我知道现在大多数前端开发人员都在使用jQuery等第三方的库来进行开发,这不仅节约了时间,也让效率大大的提高,并让公司的效益增加,何乐而不为呢?
但是,这也会有一定的缺点,比如jQ比js慢,尤其在大型项目中就会显现出来,下面我用原生js实现一个简单的手风琴效果效果。
HTML代码如下
CSS代码如下:
宽高请自行设置,我之前做的这个项目图片是1226*446的图片,所以宽度和高度是按照当时做项目的时候设置的,如果你想放置其他尺寸的图片请按照实际情况设施...
margin: 0;
padding: 0;
}
div {
width: 1150px;
height: 400px;
margin: 50px auto;
border: 1px solid red;
overflow: hidden;
}
div li {
width: 240px;
height: 400px;
float: left;
/background-image: url(images/1.jpg);/
}
div ul {
width: 1300px;
}
下面是重头戏啦,请欣赏原生js(相信很多人都快忘了原生js吧)
<div class="jb51code">
<pre class="brush:js;">
//找人
var Box = document.getElementById("Box");
var ul = Box.children[0];
var lis = ul.children;
//循环遍历 lis 绑定背景图
for (var i = 0; i < lis.length; i++) {
lis[i].style.backgroundImage = "url(images/" + (i + 1) + ".jpg)";
//给每一个li注册鼠标经过事件 鼠标经过后要排他
lis[i].onmouSEOver = function () {
//干掉所有人 让所有人的宽度 渐渐地 变为100
for (var j = 0; j < lis.length; j++) {
animate(lis[j],{"width": 100});
}
//留下我自己 让我的宽度 渐渐地 变为800
animate(this,{"width": 800});
};
}
//鼠标离开Box 所有的li宽度 渐渐地 变为240
Box.onmouSEOut = function () {
for (var i = 0; i < lis.length; i++) {
animate(lis[i],{"width": 240});
}
};
//jQuery中有animate动画函数,下面是实现的原理,虽然没有jQ的强大,但是基本的效果实现还是没有问题的
function animate(obj,json) {
clearInterval(obj.timer);
obj.timer = setInterval(function () {
//先假设 这一次执行完 所有的属性都到达目标了
var flag = true;
for (var k in json) {
var leader = parseInt(getStyle(obj,k)) || 0;
var target = json[k];
var step = (target - leader) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
leader = leader + step;
obj.style[k] = leader + "px";
//if (leader === target) {
// clearInterval(obj.timer);
//}
console.log("<a href="/tag/daima/" target="_blank" class="keywords">代码</a>还在运行");
if (leader != target) {
flag = false;//告诉<a href="/tag/biaoji/" target="_blank" class="keywords">标记</a> 当前这个<a href="/tag/shuxing/" target="_blank" class="keywords">属性</a>还没到达
}
}
//如果此时仍然为true 就说明真的都到达了
if (flag) {
clearInterval(obj.timer);
}
},15);
}
//全部属性都到达目标值才能清空
function getStyle(obj,attr) {
if (window.getComputedStyle) {
return window.getComputedStyle(obj,null)[attr];
} else {
return obj.currentStyle[attr];
}
}