继小鹏通过本文主要向大家介绍了横纵,横纵怎么区分,excel横纵互换,word横纵混排,横纵联合等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com
话不多说，请看代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>手风琴-支持横纵向调用-原生js封装</title>
<link rel="shortcut icon" href="../public/image/favicon.ico" type="images/x-icon"/>
<link rel="icon" href="../public/image/favicon.png" type="images/png"/>
<link rel="stylesheet" type="text/css" href="../public/style/cssreset-min.css">
<link rel="stylesheet" type="text/css" href="../public/style/common.css">
<style type="text/css">
/*公共*/
html{
height:100%;
}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td {
margin: 0;
padding: 0
}
ol, ul {
list-style: none
}
body{
position: relative;
min-height:100%;
font-size:14px;
font-family: Tahoma, Verdana,"Microsoft Yahei";
color:#333;
}
a{
text-decoration: none;
color:#333;
}
.header{
width: 960px;
padding-top: 15px;
margin: 0 auto;
line-height: 30px;
text-align: right;
}
.header a{
margin: 0 5px;
}
.main{
width:960px;
margin: 50px auto 0;
}
.code{
border:1px dashed #e2e2e2;
padding:10px 5px;
margin-bottom:25px;
}
pre {
font-family: "Microsoft Yahei",Arial,Helvetica;
white-space: pre-wrap; /*css-3*/
white-space: -moz-pre-wrap; /*Mozilla,since1999*/
white-space: -pre-wrap; /*Opera4-6*/
white-space: -o-pre-wrap; /*Opera7*/
word-wrap: break-word; /*InternetExplorer5.5+*/
}
.example{
padding-top:40px;
margin-bottom:90px;
}
.example .call{
padding:18px 5px;
background:#f0f5f8;
}
.example h2{
padding-top:20px;
margin-bottom:7px;
}
.example table {
width:100%;
table-layout:fixed;
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #cee1ee;
border-left: 0;
}
.example thead {
border-bottom: 1px solid #cee1ee;
background-color: #e3eef8;
}
.example tr {
line-height: 24px;
font-size: 13px;
}
.example tr:nth-child(2n) {
background-color: #f0f5f8;
}
.example tr th,.example tr td {
border-left: 1px solid #cee1ee;
word-break: break-all;
word-wrap: break-word;
padding:0 10px;
font-weight: normal;
}
.example tr th {
color: #555;
padding-top: 2px;
padding-bottom: 2px;
text-align: left;
}
/*公共*/
.accordion-container {
height: 200px;
margin: 20px auto;
/*border: 1px solid #ccc;*/
border-right: 1px solid #ccc;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
overflow: hidden;
position: relative;
}
.accordion-list{
position: absolute;
left: 0;
width: 150px;
border-left: 1px solid #ccc;
height: 100%;
/*-webkit-transition: all .1s linear;
-moz-transition: all .1s linear;
-o-transition: all .1s linear;
-ms-transition: all .1s linear;
transition: all .1s linear;*/
}
/*.accordion-container li:last-child{
border:none;
}*/
.accordion-container2{
width: 500px;
border-top:none;
}
.accordion-container2 .accordion-list{
width: 100%;
height: 100px;
border-top: 1px solid #ccc;
}
</style>
<script type="text/javascript">
/*封装代码*/
(function() {
var Accordion = function(el, opts) {
var self = this;
var defaults = {
direction: "x",
expose: 30,
speed: 30
}
opts = opts || {};
for (var w in defaults) {
if ("undefined" == typeof opts[w]) {
opts[w] = defaults[w];
}
}
this.params = opts;
this.container = r(el);
if (this.container.length > 1) {
var x = [];
return this.container.each(function() {
x.push(new Accordion(this, opts))
}), x
}
this.containers = this.container[0]; //容器对象
this.list = this.container.find(".accordion-list"); //获得NodeList对象集合
this.exposeSize = this.params.expose; //设置掩藏门体露出的宽度
this.init();
}
Accordion.prototype = {
//初始化
init: function() {
var self = this;
//设置容器总宽度
if (this.params.direction == 'x') {
this.direction = 'left';
this.listSize = this.list[0].offsetWidth;
this.translate = this.listSize - this.exposeSize;
} else if (this.params.direction == 'y') {
this.direction = 'top';
this.listSize = this.list[0].offsetHeight;
this.translate = this.listSize - this.exposeSize;
}
this.conwidth();
//设置每道门的初始位置
this.setlistPos();
//绑定事件
this.event();
},
//设置容器总宽度
conwidth: function() {
var boxWidth = this.listSize + (this.list.length - 1) * this.exposeSize;
if (this.params.direction == 'x') {
this.containers.style.width = boxWidth + 'px';
} else if (this.params.direction == 'y') {
this.containers.style.height = boxWidth + 'px';
}
},
//设置每道门的初始位置
setlistPos: function() {
for (var i = 1, len = this.list.length; i < len; i++) {
this.list[i].style[this.direction] = this.listSize + this.exposeSize * (i - 1) + 'px';
}
},
//绑定事件
event: function() {
var self = this;
for (var i = 0; i < this.list.length; i++) {
(function(i) {
self.list[i].addEventListener('click', function() {
self.setlistPos();
for (var j = 1; j <= i; j++) {
starmove(self.list[j], {
[self.direction]: parseInt(self.list[j].style[self.direction]) - self.translate
}, self.params.speed)
}
}, false);
})(i)
}
}
}
function starmove(obj, json, time, fn) {
var fn, times;
if (arguments[2] == undefined) {
times = 30;
} else if (typeof time == "function") {
times = 30;
fn = time;
} else if (typeof time == "number") {
times = time;
}
if (arguments[3]) {
fn = fn;
}
clearInterval(obj.zzz);
obj.zzz = setInterval(function() {
var flag = true;
for (var attr in json) {
var icur = 0;
if (attr == 'opacity') {
icur = Math.round(parseFloat(getStyle(obj, attr)) * 100);
} else {
icur = parseInt(getStyle(obj, attr));
}
var speed = (json[attr] - icur) / 8;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
if (icur != json[attr]) {
flag = false;
}
if (attr == 'opacity') {
icur += speed;
obj.style.filter = 'alpha(opacity:' + icur + ')';
obj.style.opacity = icur / 100;
} else {
obj.style[attr] = icur + speed + 'px';
}
}
if (flag) {
clearInterval(obj.zzz);
if (fn) {
fn();
}
}
}, times)
}
function getStyle(obj, attr) {
if (obj.currentStyle) {
return obj.currentStyle[attr];
} else {
return getComputedStyle(obj, false)[attr];
}
}
var r = (function() {
var e = function(e) {
var a = this,
t = 0;
for (t = 0; t < e.length; t++) {
a[t] = e[t];
}
return a.length = e.length, this
};
e.prototype = {
addClass: function(e) {
if ("undefined" == typeof e) return this;
for (var a = e.split(" "), t = 0; t < a.length; t++)
for (var r = 0; r < this.length; r++) this[r].classList.add(a[t]);
return this
},
each: function(e) {
for (var a = 0; a < this.length; a++) e.call(this[a], a, this[a]);
return this
},
html: function(e) {
if ("undefined" == typeof e) return this[0] ? this[0].innerHTML : void 0;
for (var a = 0; a < this.length; a++) this[a].innerHTML = e;
return this
},
find: function(a) {
for (var t = [], r = 0; r < this.length; r++)
for (var i = this[r].querySelectorAll(a), s = 0; s < i.length; s++) t.push(i[s]);
return new e(t)
},
append: function(a) {
var t, r;
for (t = 0; t < this.length; t++)
if ("string" == typeof a) {
var i = document.createElement("div");
for (i.innerHTML = a; i.firstChild;) this[t].appendChild(i.firstChild)
} else