旋轉木馬特效實現原理及過程
<html>
<head lang="en">
<meta charset="UTF-8">
<title>旋轉木馬輪播圖</title>
<link rel="stylesheet" href="css/css.css"/>
<script type="text/javascript" src="js/animate.js"></script>
<!--<script type="text/javascript" src="js/my.js"></script>-->
</head>
<body>
<div class="wrap" id="wrap">
<div class="slide" id="slide">
<ul>
<li><a href="#"><img src="images/slidepic1.jpg" alt=""/></a></li>
<li><a href="#"><img src="images/slidepic2.jpg" alt=""/></a></li>
<li><a href="#"><img src="images/slidepic3.jpg" alt=""/></a></li>
<li><a href="#"><img src="images/slidepic4.jpg" alt=""/></a></li>
<li><a href="#"><img src="images/slidepic5.jpg" alt=""/></a></li>
</ul>
<div class="arrow" id="arrow">
<a href="javascript:;" class="prev" id="arrLeft"></a>
<a href="javascript:;" class="next" id="arrRight"></a>
</div>
</div>
</div>
<script src="../animate.js"></script>
<script>
var config = [
{
width: 400,
top: 20,
left: 50,
opacity: 0.2,
zIndex: 2
},//0
{
width: 600,
top: 70,
left: 0,
opacity: 0.8,
zIndex: 3
},//1
{
width: 800,
top: 100,
left: 200,
opacity: 1,
zIndex: 4
},//2
{
width: 600,
top: 70,
left: 600,
opacity: 0.8,
zIndex: 3
},//3
{
width: 400,
top: 20,
left: 750,
opacity: 0.2,
zIndex: 2
}//4
];//其實就是一個配置單 規定了每張圖片的大小位置層級透明度
var slide = document.getElementById("slide");
var ul = slide.children[0];
var lis = ul.children;
var arrow = document.getElementById("arrow");
var arrRight = arrow.children[1];
var arrLeft = arrow.children[0];
var wrap = document.getElementById("wrap");
//移入移出盒子顯示arrow
wrap.onmouseover = function () {
animate(arrow, {"opacity": 1});
};
wrap.onmouseout = function () {
animate(arrow, {"opacity": 0});
};
change();
//通過變量去控制當前點擊是否可以執行
var flag = true;
//點擊右按鈕
arrRight.onclick = function () {
if (flag) {
//點擊以後首先設置不能再點了
flag = false;
//從config前面刪除一個元素
var temp = config.shift();
//將刪除的第一項放到最後
config.push(temp);
//配置單改變，我們需要讓所有的li走到新的位置上
change();
}
};
//點擊左側
arrLeft.onclick = function () {
if (flag) {
flag = false;
var temp = config.pop();
config.unshift(temp);
//根據新的配置單讓圖片歸位
change();
}
};
//這個函數是讓每一個li運動到config中對應的位置
function change() {
//讓每一個li運動到指定位置
for (var i = 0; i < lis.length; i++) {
//運動到哪
animate(lis[i], config[i], function () {
//是在運動完畢後觸發
flag = true;
});
}
}
// 運動函數
function animate(tag,obj,Fn){
clearInterval(tag.timer);
tag.timer = setInterval(function(){
var flag = true;
for(var key in obj){
if(key == 'zIndex'){
tag.style[key] = obj[key];
}else if(key == 'opacity'){
var attr = key;
var target = obj[key] * 10;
var leader = getStyle(tag,attr)*10 || 0;
var step = (target - leader) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
leader = leader + step;
tag.style[attr] = leader / 10;
}else{
var attr = key;
var target = obj[key];
var leader = parseInt(getStyle(tag,attr)) || 0;
var step = (target - leader) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
leader = leader + step;
tag.style[attr] = leader + 'px';
}
if(leader != target){
flag = false;
}
}
if(flag){
clearInterval(tag.timer);
Fn && Fn();
}
},20);
</script>
</body>
</html>
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
由淺入深在實踐中玩轉Zabbix，解決剩下20%的監控需求！
本文整理自Zabbix中級認證專家李銘栓（滿分學員）在Zabbix Meetup廣州站的演講。 掌握這幾種監控方式解決80%的監控問題，剩下的20%如何實現？這裏有答案！ 幾點經驗分享： 1