本篇博客的技术栈涉及 函数封装 、获取元素属性、动画原理、json解析、排他思想等。也是一篇不错的综合案例。
html代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
div{
width: 1150px;
height: 400px;
margin:50px auto;
border:1px solid red;
}
div li{
width: 240px;
height: 400px;
float: left;
}
div ul{
width: 1300px;
}
</style>
</head>
<body>
<div>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>
<script type="text/javascript" src="animate.js" ></script>
<script>
var box = document.getElementsByTagName("div")[0];
var lis = box.children[0].children;
for(var i = 0,len = lis.length;i<len;i++){
lis[i].style.backgroundImage = "url(images/"+(i+1)+".jpg)";
lis[i].onmousemove = function(){
// 1.所有的li统一设置
for(var j = 0,len = lis.length;j<len;j++){
animate(lis[j],{width:100})
}
// 2.点击的li层叠掉之前的样式
animate(this,{width:800});
}
lis[i].onmouseout = function(){
// 3. 恢复点击前的设置
for(var i = 0,len = lis.length;i<len;i++){
animate(lis[i],{width:240});
}
}
}
</script>
animate.js代码如下：
// 动谁 动多少
function animate(obj, json,fn) {
clearInterval(obj.timer);
// parseInt()可以去掉px
obj.timer = setInterval(function() {
var flag = true;
// 遍历JSON
for (var attr in json) {
var current = 0;
if(attr == "opacity"){
current = Math.round(parseInt(getStyle(obj,attr)*100)) || 0;
console.log(current);
}
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) // 判断 我们浏览器是否支持opacity
{
// obj.style.opacity 标准浏览器
obj.style.opacity = (current + step) /100;
}
else
{ // obj.style.filter = alpha(opacity = 30) ie6
obj.style.filter = "alpha(opacity = "+(current + step)* 10+")";
}
}
else if(attr == "zIndex")
{
obj.style.zIndex = json[attr];
}else{
obj.style[attr] = current + step + "px";
}
// 如果再判断清除定时器的话，就会出现属性值达不到的问题
// if (json[attr] == current) {
// clearInterval(obj.timer);
// }
// 正确添加停止定时器的方法如下
// 只要有一个属性的值没有到达预定值就不能停止定时器
if(current != json[attr]){
flag = false;
}
}
if(flag){
clearInterval(obj.timer);
//下面的这个判断方式要记住
if(fn){
//执行回调函数
fn();
}
}
}, 30);
}
// 谁的 哪个属性
function getStyle(obj, attr) {
if (obj.currentStyle) {
// ie浏览器
return obj.currentStyle[attr];
} else {
// 标准浏览器
return window.getComputedStyle(obj, null)[attr];
}
}预览效果和图片可以与我取得联系获取。