无缝切换效果
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了无缝切换效果相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css"> <style> *{margin: 0;padding: 0;} li{list-style: none;} ul{position: absolute;} li{width: 100px;height: 100px;float: left;text-align:center;line-height: 100px;box-sizing: border-box;border:1px solid red;} #box{width: 400px;height: 100px;overflow: hidden;position: relative;border:1px solid blue;margin:20px auto;} .clearfix:after{display:block;content:".";height: 0;visibility:hidden;clear:both;} div.box2{width: 400px;margin: 0 auto;} </style> </head> <body> <div id="box"> <ul id="list" class="clearfix"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> </div> <div class="box2"> <button id="btn" class="btn btn-primary btn-block">切换</button> </div> <script src="animate.js"></script> <script> var box=document.getElementById("box"); var li=document.getElementsByTagName("li"); var ul=document.getElementById("list"); var btn=document.getElementById("btn"); var iTrue=true; function getWidth(){ ul.style.width = li.length*(li[0].offsetWidth) + ‘px‘; } getWidth(); btn.onclick=function(){ if(iTrue){ iTrue=false; for(var i=0;i<4;i++){ var oli=li[i].cloneNode(true); ul.appendChild(oli); getWidth(); } } ul.animate({"left":"-400px"},function(){ for(var i=0;i<4;i++){ ul.removeChild(li[0]); ul.style.left=0; } iTrue=true; }); } </script> </body> </html>
引用的animate方法：
Element.prototype.animate=animate;
Element.prototype.getStyle=getStyle;
function animate(json,callback) {
clearInterval(this.timer);
for (var attr in json) {
var that = this;
this.timer = setInterval(function () {
if (attr == ‘opacity‘) {
that.icur = Math.round(parseFloat(that.getStyle()[attr]) * 100);
} else {
that.icur = parseInt(that.getStyle()[attr]);
}
that.speed = (parseInt(json[attr]) - that.icur) / 10;
that.speed = that.speed > 0 ? Math.ceil(that.speed) : Math.floor(that.speed);
if (attr == ‘opacity‘) {
that.style.filter = ‘alpha(opacity:‘ + that.icur + that.speed + ‘)‘;
that.style.opacity = (that.icur + that.speed) / 100;
} else {
that.style[attr] = that.icur + that.speed + "px";
};
if(that.icur==parseInt(json[attr])){
//flags=true;
clearInterval(that.timer);
if(callback){
callback();
}
}
}, 20);
}
}
function getStyle() {
if (this.currentStyle) {
return this.currentStyle;
} else {
return document.defaultView.getComputedStyle(this, null);
}
}
以上是关于无缝切换效果的主要内容，如果未能解决你的问题，请参考以下文章