类似CSDN图片切换效果脚本


Posted in Javascript onSeptember 17, 2009
/*---------------------------------------------------------------------------*\ 
| Subject: Rotate AD 
| NameSpace: System.Web.UI.WebControls.MzRotateImage 
| Author: meizz 
| Created: 2006-11-11 
| Version: 2006-12-06 
|----------------------------------- 
| MSN: huangfr@msn.com QQ:112889082 Copyright (c) meizz 
| http://www.meizz.com/jsframework/ MIT-style license 
| The above copyright notice and this permission notice shall be 
| included in all copies or substantial portions of the Software | Changer: Worm 
| AlterDate: 2009-09-15 
\*---------------------------------------------------------------------------*/ 
//Using("System.Data.MzDataProvider"); 
//Using("System.Web.Forms.MzBehavior"); 
//node{url, target, summary, img, alt} 
function MzRotateImage() 
{ 
MzDataProvider.call(this); this.stateChangeHandle(1); 
this.width = 280; 
this.height= 187; 
this.timer = null; 
this.interval = 10000; 
this.duration = 2000; 
this.activeIndex = 1; 
this.currentIndex = 0; 
this.floatControlBar = true; 
this.useFilter = System.ie && MzBrowser.version>=5.5; 
} 
MzRotateImage.Extends(MzDataProvider, "MzRotateImage"); 
System.loadCssFile(System.resourcePath +"/MzRotateImage.css", "MzRotateImage_CSS"); 
MzRotateImage.prototype.render=function() 
{ 
this.dataInit(); this.images=new Array(); 
var d = this.nodes = this.rootNode.childNodes; 
for(var i=0; i<d.length; i++) 
{ 
this.images[i] = new Image(); 
this.images[i].src = d[i].get("img"); 
} 
var id=this.id="MzRotateImage_"+this.hashCode,s=[]; 
var width = this.width = parseInt(this.width); 
var height = this.height = parseInt(this.height); 
s.push("<div id='"+id+"' style='width:"+width+"px;' class='MzRotateImage'>"); 
s.push("<div id='"+id+"_ImageBox' class='MzRotateImage_ImageBox' style='height:"+ height +"px'>"); 
if(this.useFilter) { if(d.length>0) //filter: revealTrans 
{ 
var alt = d[0].get("alt"), src = this.images[0].src; 
s.push("<a href='#'><img alt='"+ alt +"' src='"+src+"' ");if(d.length>1) 
s.push("style='filter:revealTrans(duration="+(this.duration/1000)+")'"); 
s.push(" id='"+ id +"_img' style='border: none' width="+this.width+" height="+this.height+" />"); 
s.push("<div id='"+ id +"_div' style='width: "+ width +"px; height:25px;overflow:hidden; white-space:nowrap; text-overflow:ellipsis;cursor:hand;' align='center' >"+alt+"</div></a>"); 
} 
} 
else { for(i=0; i<d.length; i++) //new MzBehavior.Rotate() 
{ 
s.push("<div id='"+id+"_item_"+i+"' style='width: "+width+"px;"); 
if (i>0) s.push(" display: none;"); 
s.push(" height: "+ height +"px; overflow: hidden;'>"); 
s.push("<a href='"+ (d[i].get("url") || "#")+"'"); 
s.push(" target='"+ (d[i].get("target") || "_self") +"'>"); 
s.push("<img alt='"+(d[i].get("alt") || "") +"'"); 
s.push(" src='"+ this.images[i].src +"'/>"); 
s.push("<div style='width: "+ width +"px; height:25px;cursor:hand;overflow:hidden; white-space:nowrap; text-overflow:ellipsis;' align='center' >"+d[i].get("alt")+"</div></a></div>"); 
} 
} 
s.push("</div><div style='width: "+ width +"px; "); 
s.push((this.floatControlBar?"margin-top: -48px":"") +"' "); 
s.push(" id='"+id+"_ControlBar' class='MzRotateImage_ControlBar'>"); 
for(i=0;i<d.length;i++)s.push("<input type='button' style='background-color: #99cccc; cursor:hand; border-right: #ffffcc 1px solid; border-top: #ffffcc 1px solid; border-left: #ffffcc 1px solid; width: 20px; border-bottom: #ffffcc 1px solid;' value='"+(i+1)+"'/>"); 
s.push("</div>"); s.push("</div>"); s = s.join(""); 
this.stateChangeHandle(2); this._onload(); 
return s; 
}; 
MzRotateImage.prototype.stateChangeHandle=function(n) 
{ 
this.readyState = n||0; 
this.dispatchEvent(new System.Event("onreadystatechange")); 
}; 
MzRotateImage.prototype._onload=function() 
{ 
var me=this; 
if(MzElement.check(this.id)) 
{ 
this.stateChangeHandle(4); 
if(this.useFilter) this.timer= 
setTimeout(function(){me.filter();}, me.interval+me.duration); 
else 
{ 
this._rotate = new MzBehavior.Rotate(me.id +"_ImageBox", 
{interval:me.interval,duration:me.duration}); 
this._rotate.addEventListeners("onchange", function(e) 
{ 
me.activeIndex = e.target.activeIndex; 
me.currentIndex = e.target.currentIndex; 
e= new System.Event("onchange"); e.target=me; 
me.dispatchEvent(e); 
}); 
} 
var A = MzElement.check(this.id+"_ControlBar").getElementsByTagName("INPUT"); 
A[this.currentIndex].className = "active"; 
this.addEventListeners("onchange", function(e) 
{ 
for(var i=0; i<A.length; i++) A[i].className=""; 
if(A.length>1) 
{ 
A[e.target.activeIndex].className = "active"; 
} 
else 
{ 
A[0].className = "active"; 
} 
}); 
for(var i=0; i<A.length; i++) 
{ 
var f=new Function("Instance('"+ this.hashCode +"').focus("+ i +")"); 
A[i].onmouseover = f; A[i].onclick = f; 
} 
} 
else setTimeout(function(){me._onload();}, 10); 
}; 
MzRotateImage.prototype.focus=function(n) 
{ 
clearTimeout(this.timer); 
if(this.useFilter){this.activeIndex=n; this.filter();} 
else if(this._rotate) this._rotate.focus(n); 
}; 
MzRotateImage.prototype.filter=function() 
{ 
var me = this; 
if(me.dispatchEvent(new System.Event("onchange"))) 
{ 
var img; 
if(img=MzElement.check(me.id +"_img")) 
{ 
var a = img.parentNode; 
var N; 
if(me.nodes.length==1) 
N=0 
else 
N=me.activeIndex; 
this.currentIndex = N; 
this.activeIndex = N+1>=me.nodes.length ? 0 : N+1; 
var dv=MzElement.check(me.id +"_div"); 
dv.innerText=me.nodes[N].get("alt"); 
a.href = (me.nodes[N].get("url") || "#"); 
a.target = (me.nodes[N].get("target") || "_self"); 
img.src=me.images[N].src; 
img.alt=me.nodes[N].get("alt"); 
if(me.nodes.length >1) 
{ 
img.filters.revealTrans.Transition=23; 
img.filters.revealTrans.apply(); 
img.filters.revealTrans.play(); 
} 
} 
} 
me.interval = 5000; 
this.timer=setTimeout(function(){me.filter();}, me.interval+me.duration); 
};
Javascript 相关文章推荐
Javascript new Date().valueOf()的作用与时间戳由来详解
Apr 24 Javascript
php跨域调用json的例子
Nov 13 Javascript
解决JS中乘法的浮点错误的方法
Jan 03 Javascript
div失去焦点事件实现思路
Apr 22 Javascript
JavaScript事件代理和委托详解
Apr 08 Javascript
JSONP和批量操作功能的实现方法
Aug 21 Javascript
Vue.js第一天学习笔记(数据的双向绑定、常用指令)
Dec 01 Javascript
浅析Vue项目中使用keep-Alive步骤
Jul 27 Javascript
深入理解Vue父子组件生命周期执行顺序及钩子函数
Aug 12 Javascript
js字符串倒序的实例代码
Nov 30 Javascript
浅析js实现网页截图的两种方式
Nov 01 Javascript
TensorFlow.js 微信小程序插件开始支持模型缓存的方法
Feb 21 Javascript
var与Javascript变量隐式声明
Sep 17 #Javascript
html数组字符串拼接的最快方法
Sep 16 #Javascript
在IE下获取object(ActiveX)的Param的代码
Sep 15 #Javascript
javascript 检测浏览器类型和版本的代码
Sep 15 #Javascript
不安全的常用的js写法
Sep 15 #Javascript
Mootools 1.2教程 滑动效果(Slide)
Sep 15 #Javascript
Mootools 1.2教程 同时进行多个形变动画
Sep 15 #Javascript
You might like
某大型网络公司应聘时的笔试题目附答案
2008/03/27 PHP
隐性调用php程序的方法
2009/03/09 PHP
CodeIgniter读写分离实现方法详解
2016/01/20 PHP
你可能不知道的JavaScript的new Function()方法
2014/04/17 Javascript
JQuery select(下拉框)操作方法汇总
2015/04/15 Javascript
jquery使用each方法遍历json格式数据实例
2015/05/18 Javascript
浅析JavaScript访问对象属性和方法及区别
2015/11/16 Javascript
JavaScript小技巧整理
2015/12/30 Javascript
使用JSON作为函数的参数的优缺点
2016/10/27 Javascript
Bootstrap 3 按钮标签实例代码
2017/02/21 Javascript
基于node打包可执行文件工具_Pkg使用心得分享
2018/01/24 Javascript
Vue.js 实现地址管理页面思路详解(地址添加、编辑、删除和设置默认地址)
2019/12/11 Javascript
基于jsbarcode 生成条形码并将生成的条码保存至本地+源码
2020/04/27 Javascript
基于vue中的scoped坑点解说
2020/09/04 Javascript
[15:23]教你分分钟做大人:虚空假面
2014/10/30 DOTA
使用Python将数组的元素导出到变量中(unpacking)
2016/10/27 Python
python使用pyqt写带界面工具的示例代码
2017/10/23 Python
详解python多线程、锁、event事件机制的简单使用
2018/04/27 Python
解决python写入带有中文的字符到文件错误的问题
2019/01/31 Python
windows环境中利用celery实现简单任务队列过程解析
2019/11/29 Python
HTML5制作3D爱心动画教程 献给女友浪漫的礼物
2014/11/05 HTML / CSS
KOHLER科勒美国官网:国际著名卫浴橱柜领先品牌
2020/06/27 全球购物
库存图片、照片、矢量图、视频和音乐:Shutterstock
2021/02/12 全球购物
北京天润融通.net面试题笔试题
2012/02/20 面试题
Linux面试经常问的文件系统操作命令
2015/11/05 面试题
统计员岗位职责
2013/11/14 职场文书
学生实习推荐信范文
2013/11/26 职场文书
物流司机岗位职责
2013/12/28 职场文书
农业资源与环境专业自荐信范文
2013/12/30 职场文书
2014年党支部学习材料
2014/05/19 职场文书
工伤私了协议书范本
2014/11/24 职场文书
个人典型事迹材料
2014/12/30 职场文书
温馨祝福晨语:美丽的一天从我的问候开始
2019/11/28 职场文书
python opencv常用图形绘制方法(线段、矩形、圆形、椭圆、文本)
2021/04/12 Python
Redis Cluster 字段模糊匹配及删除
2021/05/27 Redis
TV动画「神渣☆爱豆」公开第一弹主视觉图
2022/03/21 日漫