声明,该 DEMO 依托于某个培训机构中,非常感谢这个培训结构.话不多说,现在开始改 demo 的制作.
首先,在前端的学习过程中,轮播图是我们一定要学习的,所以为了更加高效的实现各种轮播图,封装了一个运动的框架.
function getStyle(obj, attr) {
if (obj.currentStyle) {
return obj.currentStyle[attr]; //为了获取IE下的属性值
} else {
return window.getComputedStyle(obj, null)[attr]; //为了获取W3C浏览器下的属性值
}
}
function animate(obj, json) {
clearInterval(obj.timer);
obj.timer = setInterval(function() {
var flag = true;
var current = 0;
for (var attr in json) {
if (attr == 'opacity') {
current = parseInt(getStyle(obj, attr) * 100);
} else {
current = parseInt(getStyle(obj, attr));
};
var step = (json[attr] - current) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
//先判断属性是否为透明度
if (attr == 'opacity') {
//首先判断浏览器是否支持opacity
if ('opacity' in obj.style) {
obj.style.opacity = (current + step) / 100;
} else {
obj.style.filter = 'alpha(opacity = ' + (current + step) + ')';
}
//再判断属性是否为z-index
} else if (attr == 'zIndex') {
obj.style.zIndex = json[attr];
//最后再判断
} else {
obj.style[attr] = current + step + 'px';
}
if (current != json[attr]) {
flag = false;
}
}
if (flag) {
clearInterval(obj.timer);
}
},
5);
}
在该框架中兼容了不同的浏览器,并且允许传入 opacity 和 z-index 这样的属性,当然,像 width,height,left,right 这样常见的属性是必不可少的.利用该框架,可以实现非常棒的效果.所以现在开始正式做该 DEMO.
首先是 index.html 的制作.
<div id="box">
<ul>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
</ul>
</div>
index.html 的制作非常的简单,我们会将图片作为 li 的背景图片在 javascript 中进行插入.之后,我们进行 CSS 样式的调节.
* {
margin: 0px;
padding: 0px;
}#box {
width: 1300px;
height: 400px;
margin: 100px auto;
overflow: hidden;
}#box ul {
height: 400px;
width: 1300px;
}#box ul li {
width: 240px;
height: 400px;
float: left;
overflow: hidden;
}
javascript 的代码如下:
window.onload = function() {
var box = document.getElementById('box');
var aLi = box.children[0].children;
for (var i = 0; i < aLi.length; i++) {
aLi[i].style.backgroundImage = 'url(' + 'images/' + (i + 1) + '.jpg';
aLi[i].onmouseover = function() {
for (var i = 0; i < aLi.length; i++) {
animate(aLi[i], {
width: 100
});
}
animate(this, {
width: 800
});
};
aLi[i].onmouseout = function() {
for (var i = 0; i < aLi.length; i++) {
animate(aLi[i], {
width: 240
});
}
}
}
}
这样使用原生 JS 实现的风箱效果 demo 就实现了,当然,还可以利用封装好的 animate 框架实现类似网易的轮播图效果.
以上这篇原生 JS 实现风箱式 demo, 并封装了一个运动框架 (实例代码) 就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家.
来源: http://www.jb51.net/article/89040.htm