类似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 相关文章推荐
js常用排序实现代码
Dec 28 Javascript
JS删除数组元素的函数介绍
Mar 27 Javascript
JavaScript String.replace函数参数实例说明
Jun 06 Javascript
jQuery中借助deferred来请求及判断AJAX加载的实例讲解
May 24 Javascript
js从外部获取图片的实现方法
Aug 05 Javascript
JS弹性运动实现方法分析
Dec 15 Javascript
浅谈JavaScript的函数及作用域
Dec 30 Javascript
判断颜色是否合法的正则表达式(详解)
May 03 Javascript
详解webpack多页面配置记录
Jan 22 Javascript
JavaScript数组及常见操作方法小结
Nov 13 Javascript
JS实现网页端猜数字小游戏
Mar 06 Javascript
详解JSON.parse和JSON.stringify用法
Feb 18 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中的注释、变量、数组、常量、函数应用介绍
2012/11/16 PHP
PHP清除字符串中所有无用标签的方法
2014/12/01 PHP
PHP中file_exists使用中遇到的问题小结
2016/04/05 PHP
php使用imagecopymerge()函数创建半透明水印
2018/01/25 PHP
php array_chunk()函数用法与注意事项
2019/07/12 PHP
读jQuery之四(优雅的迭代)
2011/06/20 Javascript
jquery 插件学习(一)
2012/08/06 Javascript
JS弹出层单纯的绝对定位居中示例代码
2014/02/18 Javascript
浅谈 jQuery 事件源码定位问题
2014/06/18 Javascript
javascript实现动态导入js与css等静态资源文件的方法
2015/07/25 Javascript
JS+CSS实现鼠标滑过时动态翻滚的导航条效果
2015/09/24 Javascript
JavaScript中利用jQuery绑定事件的几种方式小结
2016/03/06 Javascript
浅析jquery unbind()方法移除元素绑定的事件
2016/05/24 Javascript
NodeJS整合银联网关支付(DEMO)
2016/11/09 NodeJs
前端面试知识点锦集(JavaScript篇)
2016/12/28 Javascript
JS jQuery使用正则表达式去空字符的简单实现代码
2017/05/20 jQuery
使用Node.js搭建静态资源服务详细教程
2017/08/02 Javascript
vuejs使用$emit和$on进行组件之间的传值的示例
2017/10/04 Javascript
Bootstrap框架建立树形菜单(Tree)的实例代码
2017/10/30 Javascript
关于vue3.0中的this.$router.replace({ path: '/'})刷新无效果问题
2020/01/16 Javascript
[01:13]DOTA2群星解读国服召集令 一起说出回归的理由
2013/07/17 DOTA
Python实现命令行通讯录实例教程
2016/08/18 Python
对numpy中array和asarray的区别详解
2018/04/17 Python
对Python 数组的切片操作详解
2018/07/02 Python
20行python代码的入门级小游戏的详解
2019/05/05 Python
Python 实现opencv所使用的图片格式与 base64 转换
2020/01/09 Python
python 实现一个图形界面的汇率计算器
2020/11/09 Python
一站式跨境收款解决方案:Payoneer(派安盈)
2018/09/06 全球购物
通息工程毕业生自荐信
2013/10/16 职场文书
设计大赛策划方案
2014/06/13 职场文书
《中国梦我的梦》大学生演讲稿
2014/08/20 职场文书
升职感谢信
2015/01/22 职场文书
毕业生个人自荐书
2015/03/05 职场文书
关于做家务的心得体会
2016/01/23 职场文书
Node-Red实现MySQL数据库连接的方法
2021/08/07 MySQL
Python OpenCV实现图形检测示例详解
2022/04/08 Python