类似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 相关文章推荐
Prototype源码浅析 Number部分
Jan 16 Javascript
JS 去除Array中的null值示例代码
Nov 20 Javascript
jQuery.lazyload+masonry改良图片瀑布流代码
Jun 20 Javascript
javascript中String对象的slice()方法分析
Dec 20 Javascript
js实现漂浮回顶部按钮实例
May 06 Javascript
基于jquery实现放大镜效果
Aug 17 Javascript
基于JS判断iframe是否加载成功的方法(多种浏览器)
May 13 Javascript
JQuery判断正整数整理小结
Aug 21 jQuery
微信小程序使用Socket的实例
Sep 19 Javascript
详解搭建es6+devServer简单开发环境
Sep 25 Javascript
小程序红包雨的实现示例
Feb 19 Javascript
Vue 实现复制功能,不需要任何结构内容直接复制方式
Nov 09 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
PHP中数组定义的几种方法
2013/09/01 PHP
PHP使用PHPMailer发送邮件的简单使用方法
2013/11/12 PHP
preg_match_all使用心得分享
2014/01/31 PHP
ThinkPHP单字母函数(快捷方法)使用总结
2014/07/23 PHP
TNC vs RR BO3 第一场 2.14
2021/03/10 DOTA
什么是json和jsonp,jQuery json实例详详细说明
2012/12/11 Javascript
所见即所得的富文本编辑器bootstrap-wysiwyg使用方法详解
2016/05/27 Javascript
动态更新highcharts数据的实现方法
2016/05/28 Javascript
jquery ezUI 双击行记录弹窗查看明细的实现方法
2016/06/01 Javascript
node.js缺少mysql模块运行报错的解决方法
2016/11/13 Javascript
javaScript嗅探执行神器-sniffer.js
2017/02/14 Javascript
vue组件中使用props传递数据的实例详解
2018/04/08 Javascript
Vue-router的使用和出现空白页,路由对象属性详解
2018/09/03 Javascript
解决vue axios的封装 请求状态的错误提示问题
2018/09/25 Javascript
[01:11]回顾历届DOTA2国际邀请赛中国区预选赛
2017/06/26 DOTA
[44:30]完美世界DOTA2联赛PWL S2 GXR vs Magma 第一场 11.25
2020/11/26 DOTA
极简的Python入门指引
2015/04/01 Python
django在接受post请求时显示403forbidden实例解析
2018/01/25 Python
Python中的异常处理try/except/finally/raise用法分析
2019/02/28 Python
Python面向对象程序设计多继承和多态用法示例
2019/04/08 Python
如何在Cloud Studio上执行Python代码?
2019/08/09 Python
Django自定义用户表+自定义admin后台中的字段实例
2019/11/18 Python
python标准库OS模块详解
2020/03/10 Python
python3中sys.argv的实例用法
2020/04/24 Python
Python特殊属性property原理及使用方法解析
2020/10/09 Python
PyQt5通过信号实现MVC的示例
2021/02/06 Python
YesStyle美国/全球:购买亚洲时装、美容化妆品和生活百货
2017/01/16 全球购物
儿科护理实习自我鉴定
2013/09/19 职场文书
物业公司采购员岗位职责
2013/12/31 职场文书
高中地理教学反思
2014/01/29 职场文书
作文批改评语大全
2014/04/23 职场文书
某集团股份有限公司委托书样本
2014/09/24 职场文书
三严三实·严以律己心得体会
2016/01/13 职场文书
《有余数的除法》教学反思
2016/02/22 职场文书
python爬虫框架feapde的使用简介
2021/04/20 Python
Vue监视数据的原理详解
2022/02/24 Vue.js