教程集 www.jiaochengji.com
Golang 教程
教程集 >  脚本编程  >  javascript  >  正文 经典的仿切片滤镜的图片幻灯切换效果

经典的仿切片滤镜的图片幻灯切换效果

发布时间：2017-03-18   编辑：jiaochengji.com
教程集为您提供经典的仿切片滤镜的图片幻灯切换效果等资源，欢迎您收藏本站，我们将为您提供最新的经典的仿切片滤镜的图片幻灯切换效果资源
这是一款免费的经典的仿切片滤镜的图片幻灯切换效果，利用js来仿flash图片切换效果啊。
提示：您可以先修改部分代码再运行

<textarea name="runcool" rows="28" cols="75" > <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>仿切片滤镜的图片幻灯切换效果</title> <meta http-equiv="content-type" content="text/html;charset=gb2312"> <style type="text/css"> *{margin:0;padding:0;border:0;list-style:none;} body{font:12px/1.5 Verdana, Geneva, sans-serif;background:#eee;padding:20px;} /*=========mF_liuzg ========*/ .mF_liuzg{position:relative;width:450px;height:296px;overflow:hidden;font:12px/1.5 Verdana,Geneva,sans-serif;background:#fff;} .mF_liuzg .loading{position:absolute;z-index:9999;width:100%;height:100%;color:#666;text-align:center;padding-top:90px;background:#fff url(20100916180015250-loading.gif) center -40px no-repeat;}/*载入画面*/ .mF_liuzg .pic li{width:450px;position:relative;overflow:hidden;*margin-top:-2px;} .mF_liuzg .pic li p{width:450px;position:absolute;} .mF_liuzg .pic li p a{display:block;}/*图片和焦点图框架一样大小*/ .mF_liuzg .pic li p img{width:450px;height:296px;} .mF_liuzg .num{position:absolute;z-index:3;bottom:8px;right:8px;color:#333;}/*按钮样式*/ .mF_liuzg .num li{float:left;width:22px;height:18px;position:relative;border:1px solid #333;line-height:18px;text-align:center;margin-right:3px;cursor:pointer;background:#aaa;filter:alpha(opacity=90);opacity:0.9;} .mF_liuzg .num li.current,.mF_liuzg .num li.hover{background:#f60;color:#fff;font-weight:bold;height:20px;line-height:20px;top:-2px;} </style> <script type="text/javascript"> var myFocus={ //Design By Koen @ 2010.8.x //http://hi.baidu.com/koen_li $:function(id){return document.getElementById(id);}, $$:function(tag,obj){return (typeof obj=='object'?obj:this.$(obj)).getElementsByTagName(tag);}, style:function(obj,style){return ( [1,])?window.getComputedStyle(obj,null)[style]:obj.currentStyle[style];},//getStyle简化版 easeOut:function(t,b,c,d){return -c*((t=t/d-1)*t*t*t - 1) b;}, move:function(obj,prop,val,type,spd,fn){//运动函数，spd为运动需要的时间，时间越大速度越小 var t=0,b=parseInt(this.style(obj,prop)),c=val-b,d=spd||50,st=type,m=c>0?'ceil':'floor'; if(obj[prop 'Timer']) clearInterval(obj[prop 'Timer']); obj[prop 'Timer']=setInterval(function(){ if(t<d){obj.style[prop]=Math[m](myFocus[st]( t,b,c,d)) 'px';} else {clearInterval(obj[prop 'Timer']);fn&&fn.call(obj);} },10);return this; }, setting:function(par){ if(window.attachEvent){window.attachEvent('onload',function(){myFocus[par.style](par)});} 　　 else{window.addEventListener('load',function(){myFocus[par.style](par)},false);} }, mF_liuzg:function(par){ var box=this.$(par.id),boxH=box.offsetHeight,t=par.time*1000; var pic=this.$$('li',this.$$('ul', box)[0]),n=pic.length; var c=boxH%par.chip?8:par.chip,h=boxH/c,pics=[],nums=[]; nums.push('
上一篇：带加载效果的切片滤镜的图片幻灯切换效果 下一篇：js展开收缩层的效果
[关闭]
最近更新
浏览排行

关于本站 | 网站地图 | 联系我们 | 免责声明 | 友情链接
京ICP备12039225号-6 广告合作请加QQ:441358019
CopyRight © 2010-2014 教程集 jiaochengji.com , All Rights Reserved.

~ ~