类似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 相关文章推荐
jquery中ajax学习笔记一
Oct 16 Javascript
javascript和HTML5利用canvas构建猜牌游戏实现算法
Jul 17 Javascript
JavaScript中setAttribute用法介绍
Jul 20 Javascript
jQuery中的height innerHeight outerHeight区别示例介绍
Jun 15 Javascript
12种JavaScript常用的MVC框架比较分析
Nov 16 Javascript
javascript下拉列表菜单的实现方法
Nov 18 Javascript
Zero Clipboard实现浏览器复制到剪贴板的方法(多个复制按钮)
Mar 24 Javascript
详解JS: reduce方法实现 webpack多文件入口
Feb 14 Javascript
Koa 中的错误处理解析
Apr 09 Javascript
JS实现基本的网页计算器功能示例
Jan 16 Javascript
vue tab切换,解决echartst图表宽度只有100px的问题
Jul 19 Javascript
Postman环境变量全局变量使用方法详解
Aug 13 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 eval函数用法 PHP中eval()函数小技巧
2012/10/31 PHP
基于PHP实现用户注册登录功能
2016/10/14 PHP
使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能示例
2017/09/15 PHP
脚本收藏iframe
2006/07/21 Javascript
JQuery 前台切换网站的样式实现
2009/06/22 Javascript
根据对象的某一属性进行排序的js代码(如:name,age)
2010/08/10 Javascript
基于jquery的cookie的用法
2011/01/10 Javascript
TextArea设置MaxLength属性最大输入值的js代码
2012/12/21 Javascript
js控制表单不能输入空格的小例子
2013/11/20 Javascript
对table和ul实现js分页示例分享
2014/02/24 Javascript
NodeJS实现客户端js加密
2017/01/09 NodeJs
js实现年月日表单三级联动
2020/04/17 Javascript
详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件
2017/06/01 jQuery
requirejs + vue 项目搭建详解
2017/06/16 Javascript
微信小程序表单弹窗实例
2018/07/19 Javascript
Easyui 关闭jquery-easui tab标签页前触发事件的解决方法
2019/04/28 jQuery
JavaScript实现tab栏切换效果
2020/03/16 Javascript
用vue写一个日历
2020/11/02 Javascript
基于vue项目设置resolves.alias: '@'路径并适配webstorm
2020/12/02 Vue.js
python列表与元组详解实例
2013/11/01 Python
python实现倒计时的示例
2014/02/14 Python
Python 列表排序方法reverse、sort、sorted详解
2016/01/22 Python
New Balance美国官网:运动鞋和健身服装
2017/04/11 全球购物
全球酒店比价网:HotelsCombined
2017/06/20 全球购物
Lancer Skincare官方网站:抗衰老皮肤护理
2020/11/20 全球购物
iostream与iostream.h的区别
2015/01/16 面试题
问卷调查计划书
2014/01/10 职场文书
学校安全工作制度
2014/01/19 职场文书
个性车贴标语
2014/06/24 职场文书
军人离婚协议书样本
2014/10/21 职场文书
公司庆典欢迎词
2015/01/26 职场文书
2015年入党积极分子评语
2015/03/26 职场文书
员工辞职信范文大全
2015/05/12 职场文书
2015年幼儿园教育教学工作总结
2015/05/25 职场文书
小学体育队列队形教学反思
2016/02/16 职场文书
Nginx代理同域名前后端分离项目的完整步骤
2021/03/31 Servers