类似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 相关文章推荐
Extjs 继承Ext.data.Store不起作用原因分析及解决
Apr 15 Javascript
JS数组去重与取重的示例代码
Jan 24 Javascript
js中键盘事件实例简析
Jan 10 Javascript
JS实现鼠标箭头变成一个燃烧烛光效果的方法
Feb 28 Javascript
详解JavaScript 中的 replace 方法
Jan 01 Javascript
bootstrap快速制作后台界面
Dec 05 Javascript
在node.js中怎么屏蔽掉favicon.ico的请求
Mar 01 Javascript
基于AngularJS实现的工资计算器实例
Jun 16 Javascript
详解微信小程序调用支付接口支付
Apr 28 Javascript
JS正则表达式验证端口范围(0-65535)
Jan 06 Javascript
微信小程序canvas截取任意形状的实现代码
Jan 13 Javascript
vuex中遇到的坑,vuex数据改变,组件中页面不渲染操作
Nov 16 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
如何批量替换相对地址为绝对地址(利用bat批处理实现)
2013/05/27 PHP
php不用正则验证真假身份证
2013/11/06 PHP
php读取mysql的简单实例
2014/01/15 PHP
从零开始学YII2框架(四)扩展插件yii2-kartikgii
2014/08/20 PHP
php可应用于面包屑导航的迭代寻找家谱树实现方法
2015/02/02 PHP
php强大的时间转换函数strtotime
2016/02/18 PHP
Zend Framework动作控制器用法示例
2016/12/09 PHP
DOM Scripting中的图片切换[兼容Firefox]
2010/06/12 Javascript
解析window.open的使用方法总结
2013/06/19 Javascript
NodeJS实现不可逆加密与密码密文保存的方法
2018/03/16 NodeJs
如何在JavaScript中优雅的提取循环内数据详解
2019/03/04 Javascript
简单了解JavaScript中的执行上下文和堆栈
2019/06/24 Javascript
[45:18]2018DOTA2亚洲邀请赛 4.3 突围赛 Optic vs iG 第一场
2018/04/04 DOTA
Python多线程实例教程
2014/09/06 Python
Python随机生成数模块random使用实例
2015/04/13 Python
Python实现桶排序与快速排序算法结合应用示例
2017/11/22 Python
python中文乱码不着急,先看懂字节和字符
2017/12/20 Python
python爬虫爬取网页表格数据
2018/03/07 Python
python中多层嵌套列表的拆分方法
2018/07/02 Python
python实现nao机器人手臂动作控制
2019/04/29 Python
Python简易版图书管理系统
2019/08/12 Python
kafka-python 获取topic lag值方式
2019/12/23 Python
CSS3实现多重边框的方法总结
2016/05/31 HTML / CSS
预订全球最佳旅行体验:Viator
2018/03/30 全球购物
多媒体教室标语
2014/06/26 职场文书
机关党员四风问题个人整改措施
2014/10/26 职场文书
2015财务年度工作总结范文
2015/05/04 职场文书
同意报考公务员证明
2015/06/17 职场文书
学校远程教育工作总结
2015/08/11 职场文书
安全学习心得体会范文
2016/01/18 职场文书
小学教师教学反思
2016/02/24 职场文书
2016年主题党日活动总结
2016/04/05 职场文书
nginx网站服务如何配置防盗链(推荐)
2021/03/31 Servers
Vue详细的入门笔记
2021/05/10 Vue.js
JavaScript 原型与原型链详情
2021/11/02 Javascript
MySQL中rank() over、dense_rank() over、row_number() over用法介绍
2022/03/23 MySQL