实用的js 焦点图切换效果 结构行为相分离

2019-06-06 02:20:16刘景俊

with (jfocuspic)//针对于IE添加滤镜效果;
{
filters[0].Apply();//在开始一个动态效果之前,先需要进行装备(Apply),Apply事件用来使一种滤镜效果生成。
for(i=0;i<Num.length;i++)i==value?children[i].style.display="block":children[i].style.display="none";
filters[0].play();//play()方法用于播放动态效果。在这之前,已经在#jfocus_pic样式中为图片层添加了滤镜样式;
}
}
catch(e)
{
for(i=0;i<Num.length;i++)
{
i==value?imglist[i].style.display="block":imglist[i].style.display="none";//使当前图片显示,隐藏其他图片;
}
}
}
function mouse(n){
for(var i=0;i<Num.length;i++){
(function(n){
Num[i].onmouseover=imglist[i].onmouseover=function(){clearInterval(autoStart);Mea(n);}//鼠标经过后停止自动切换,并给函数Mea()传递一个当前参数n
Num[i].onmouseout=imglist[i].onmouseout=function(){setAuto();}
})(i);
}
}
function Mea(value){
n=value;
mouse();
setBg(value);
plays(value);
}
function auto(){//参数n的递增使图片自动轮换的关键;
n++;
if(n>Num.length-1)n=0;
Mea(n);
}
function setAuto(){autoStart=setInterval("auto()", 2000)}//每隔2000毫秒,便执行一次auto()函数;每执行一次,参数n便递增1
setAuto();//调用函数

演示代码:

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
行为层是由js来实现的,这里的工作只是搭建了一个简单的骨架,如果要让效果图美观些并符合设计要求,就要发挥css的强大作用了。
js编好后,下次可以重复利用,但编写css就没那么幸运,每次设计师都可能会做出不同风格的外观,使你不得不重新编写css代码,而要实现css的精确定位并保持良好兼容性,还要使其得到最大的优化,真的不是一件简单的事情。