手風(fēng)琴焦點(diǎn)圖：
手風(fēng)琴焦點(diǎn)圖
案例源碼：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
ul{list-style: none}
*{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;
}
div ul {
width: 1300px;
}
</style>
</head>
<body>
<div>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>
<script src="animate.js"></script>
<script>
var box = document.getElementsByTagName("div")[0];
var lis = box.children[0].children;
for(var i=0;i<lis.length;i++)
{
lis[i].style.backgroundImage = "url(images/"+(i+1)+".jpg)";
lis[i].onmouseover = function() {
for(var i=0;i<lis.length;i++)
{
animate(lis[i],{width:100});
}
animate(this,{width:800});
}
lis[i].onmouseout = function(){
for(var i=0;i<lis.length;i++)
{
animate(lis[i],{width:240});
}
}
}
</script>
其中animate.js
// 多個(gè)屬性運(yùn)動(dòng)框架 添加回調(diào)函數(shù)
function animate(obj,json,fn) { // 給誰 json
clearInterval(obj.timer);
obj.timer = setInterval(function() {
var flag = true; // 用來判斷是否停止定時(shí)器 一定寫到遍歷的外面
for(var attr in json){ // attr 屬性 json[attr] 值
//開始遍歷 json
// 計(jì)算步長 用 target 位置 減去當(dāng)前的位置 除以 10
// console.log(attr);
var current = 0;
if(attr == "opacity")
{
current = parseInt(getStyle(obj,attr)*100);
}
else
{
current = parseInt(getStyle(obj,attr)); // 數(shù)值
}
// console.log(current);
// 目標(biāo)位置就是 屬性值
var step = ( json[attr] - current) / 10; // 步長 用目標(biāo)位置 - 現(xiàn)在的位置 / 10
step = step > 0 ? Math.ceil(step) : Math.floor(step);
//判斷透明度
if(attr == "opacity") // 判斷用戶有沒有輸入 opacity
{
if("opacity" in obj.style) // 判斷 我們?yōu)g覽器是否支持opacity
{
// obj.style.opacity
obj.style.opacity = (current + step) /100;
}
else
{ // obj.style.filter = alpha(opacity = 30)
obj.style.filter = "alpha(opacity = "+(current + step)+")";
console.log(current);
}
}
else if(attr == "zIndex")
{
obj.style.zIndex = json[attr];
}
else
{
obj.style[attr] = current + step + "px" ;
}
if(current != json[attr]) // 只要其中一個(gè)不滿足條件 就不應(yīng)該停止定時(shí)器 這句一定遍歷里面
{
flag = false;
}
}
if(flag) // 用于判斷定時(shí)器的條件
{
clearInterval(obj.timer);
//alert("ok了");
if(fn) // 很簡單 當(dāng)定時(shí)器停止了惋啃。 動(dòng)畫就結(jié)束了 如果有回調(diào)，就應(yīng)該執(zhí)行回調(diào)
{
fn(); // 函數(shù)名 + （） 調(diào)用函數(shù) 執(zhí)行函數(shù)
}
}
},5)
}
function getStyle(obj,attr) { // 誰的 那個(gè)屬性
if(obj.currentStyle) // ie 等
{
return obj.currentStyle[attr]; // 返回傳遞過來的某個(gè)屬性
}
else
{
return window.getComputedStyle(obj,null)[attr]; // w3c 瀏覽器
}
}
此案例圖片獲裙嫒琛：
鏈接：http://pan.baidu.com/s/1geLaEsz 密碼：fmk2
