图片切换效果! - scomouse - ITeye博客

`

scomouse

浏览: 14892 次
性别:
来自: 广州

最近访客更多访客>>

博主相关

博客

微博

相册

收藏

留言

关于我

文章分类

全部博客 (67)

社区版块

存档分类

最新评论

图片切换效果!

阅读更多

学了一段时间tween算法,也学习了一些好的代码,也写了一些例子,不过都是模仿的,

但这个绝对是原创, HOHO

<style type="text/css"> .ss{ border:1px solid #000000; height:100px; width:100px; position:absolute; left:100px; top:240px; z-index:1; border:1px solid #FFFFFF; } </style> <body style="background-color:#000000;color:#FFFFFF; font-size:12px;"> <div>循环播放<input id='a1' value="确定" type="button" onClick="cycle(this)" disabled="disabled"></div> <div>键盘操作(left,rigth键====>‘→’‘←’)<input id='a2' value="确定" type="button" onClick="keyboard(this)"></div> <script> Array.prototype.end =function(){return (this.length) ? this[this.length - 1] : null;}; function $(Id){return document.getElementById(Id)}; function create(elm,parent,fn){var element = document.createElement(elm);parent.appendChild(element);if(fn)fn(element);}; var CurrentStyle = function(element){return element.currentStyle || document.defaultView.getComputedStyle(element, null);}; function foreach(arr,fn){for(var i=0;i<arr.length;i++){arr[i]=fn(arr[i])}} function parseint(elm,type){ switch(type) { case 1: return parseInt(CurrentStyle(elm).width); break; case 2: return parseInt(CurrentStyle(elm).height); break; case 3: return parseInt(CurrentStyle(elm).left); break; case 4: return parseInt(CurrentStyle(elm).top); break default: return ; } } var Tween = { Quintic:{ easeOut: function(t,b,c,d){ //return c*((t=t/d-1)*t*t*t*t + 1) + b; return c*t/d + b; } } } var extend = function() { var args = arguments; if(!args[1])args = [this,args[0]]; for(var property in args[1])args[0][property] = args[1][property]; return args[0]; }; var Class = function(properties){ var _class = function(){return (arguments[0] !== null && this.initialize && typeof(this.initialize) == 'function') ? this.initialize.apply(this, arguments) : this;}; _class.prototype = properties; return _class; }; var imgswitch = new Class({ options:{ range :300, //扩大的范围; step :30, t :0, time :10, zindex :10, leftdiff:150 //图片的间距 }, initialize:function(data,dif){ var self = this; this.data = data; this.dif = dif; this.lock = false; this.timer = null; this.position = []; this.direction= true; this.current = new Array(4); //////////////////////////////////////////////////////////////////////// this.range = this.options.range; this.step = document.all?this.options.step:this.options.step-20; this.t = this.options.t; this.time = this.options.time; this.zindex = this.options.zindex; this.leftdiff = this.options.leftdiff; //////////////////////////////////////////////////////////////////////// for(var i=0; i<this.data.length;i++) { create('img',document.body,function(elm){ with(elm){id = self.data[i].id;className= self.data[i].className;src= self.data[i].src;style.left = parseint($(self.data[0].id),3) +i*self.leftdiff} self.position.push(parseInt(CurrentStyle(elm).left)); }) } this.original = [parseint($(this.data[0].id),1),parseint($(this.data[0].id),2),parseint($(this.data[0].id),3),parseint($(this.data[0].id),4)]; this.gap = parseint($(this.data[1].id),3)-parseint($(this.data[0].id),3); //////////////////////////////////////////////////////////////////////////////////////////////////// //设置最后一张图片的位置长度高度 var data =$(this.data.end().id); data.style.height = this.current[1] = parseint(data,2)+this.range+'px'; data.style.width = this.current[0] = parseint(data,1)+this.range+'px'; data.style.left = this.current[2] = this.position[0] +(parseint($(this.data[this.data.length-2].id),3)-parseint($(this.data[0].id),3)-this.range)/2; data.style.top = this.current[3] = parseint(data,4) - this.range/2 ; data.zIndex = this.zindex; /////////////////////////////////////////////////////////////////////////////////////////////////// this.position[this.position.length-1]=parseint(data,3); foreach(this.current,function(o){return o=parseInt(o) }); }, start:function(arg){; if(this.lock){return} else{this.lock ='true'} this.direction = arg; this.gap = (this.direction?Math.abs(this.gap):(-1)*(Math.abs(this.gap))) this.move(); }, fun:function(){ this.movep();this.movef();this.movel(); }, movep:function(){ var j = this.direction?(-1):0 for(var i = 1+j ; i<this.data.length-1+j; i++) {$(this.data[i].id).style.left = this.position[i] + this.moveto(this.t,0,this.gap,this.step)} }, movef:function(){ //中间的图移动 var data = $(this.data.end().id); data.style.left = this.direction?(this.position[this.position.length-1] + this.moveto(this.t,0,(this.position[0]-this.current[2]),this.step)):(this.current[2] +this.moveto(this.t,0,(this.position[this.position.length-2]-this.current[2]),this.step)) data.style.top = this.moveto(this.t,this.current[3],(this.original[3]-this.current[3]),this.step); data.style.width = this.moveto(this.t,this.current[0],(-1*this.range),this.step); data.style.height = this.moveto(this.t,this.current[1],(-1*this.range),this.step); data.style.zIndex = this.moveto(this.t,this.zindex,(1-this.zindex),this.step); }, movel:function(){ //两边的图片移动 var data = this.direction?$(this.data[this.data.length-2].id):$(this.data[0].id) data.style.left = this.direction?(this.position[this.position.length-2] + this.moveto(this.t,0,(this.current[2]-this.position[this.position.length-2]),this.step)):(this.position[0] + this.moveto(this.t,0,(this.current[2]-this.position[0]),this.step)) data.style.width = this.moveto(this.t,this.original[0],this.range,this.step); data.style.height = this.moveto(this.t,this.original[1],this.range,this.step); data.style.top = this.moveto(this.t,this.original[3],(this.current[3]-this.original[3]),this.step); data.style.zIndex = this.moveto(this.t,3,(this.zindex-1),this.step); }, move:function(){ var self = this; this.fun(); if(++this.t>this.step) { clearTimeout(this.timer);this.t=0;this.lock=false; this.direction?this.data.splice(0,0,this.data.pop()):this.data.push(this.data.shift()) } else {this.timer = setTimeout(function(){self.move()},this.time)} }, moveto:function(t,b,c,d){ return Math.round(Tween.Quintic.easeOut(t,b,c,d)); } }) var arr = [{id:'img1',className:'ss',src:'http://images.cnblogs.com/cnblogs_com/wtcsy/192373/r_1.gif'},{id:'img2',className:'ss',src:'http://images.cnblogs.com/cnblogs_com/wtcsy/192373/r_2.gif'},{id:'img3',className:'ss',src:'http://images.cnblogs.com/cnblogs_com/wtcsy/192373/r_7.gif'},{id:'img4',className:'ss',src:'http://images.cnblogs.com/cnblogs_com/wtcsy/192373/r_8.gif'},{id:'img5',className:'ss',src:'http://images.cnblogs.com/cnblogs_com/wtcsy/192373/r_10.gif'},{id:'img6',className:'ss',src:'http://images.cnblogs.com/cnblogs_com/wtcsy/192373/r_11.gif'},{id:'img7',className:'ss',src:'http://images.cnblogs.com/cnblogs_com/wtcsy/192373/r_12.gif'}]; var a = new imgswitch(arr,4000); function addListener(element,e,fn){ element.addEventListener?element.addEventListener(e,fn,false):element.attachEvent("on" + e,fn)} function removeListener(element,e,fn){ element.removeEventListener?element.removeEventListener(e,fn,false):element.detachEvent("on" + e,fn)} var timer =null function cycle(obj){ obj.disabled="disabled" $('a2').disabled = '' timer = setInterval(function(){a.move()},4000) removeListener(document,'keydown',an) } function keyboard(obj){ obj.disabled="disabled" $('a1').disabled = '' clearTimeout(timer) addListener(document,'keydown',an) } function an(event){ var e = event || window.event if((e.charCode||e.keyCode)==37) {a.start(true);} if((e.charCode||e.keyCode)==39) {a.start(false);} } timer = setInterval(function(){a.move()},4000) </script> </body>

<script type="text/javascript"></script>

版权声明：本文为博主原创文章，未经博主允许不得转载。

分享到：

div八点大小改变 | div逐步变化

2009-05-24 22:38
浏览 146
评论(0)
查看更多

评论

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

flash图片切换效果 flash图片切换效果: flash图片切换效果 flash图片切换效果

12种炫酷CSS3图片切换过渡效果: 12种炫酷CSS3图片切换过渡效果

javascirpt图片切换效果: javascirpt图片切换效果 rok

超好看的图片切换效果: 超好看的图片切换效果超好看的图片切换效果超好看的图片切换效果

iphone图片切换效果: iphone图片切换效果

js实现首页焦点图片切换效果: js实现首页焦点图片切换效果，仿大麦网首页焦点图片切换效果

QQ网支持火狐的图片切换效果: QQ网支持火狐的图片切换效果! 值得下载看看!资源免费,大家分享!! 更多免费资源 http://ynsky.download.csdn.net/

一个图片切换效果网页(javascript): 图片切换效果网页图片切换效果网页图片切换效果网页图片切换效果网页图片切换效果网页图片切换效果网页图片切换效果网页图片切换效果网页图片切换效果网页

图片切换展示效果 jpg转换SWF js图片切换 flash图片切换效果图片自动切换效果: 图片切换展示效果 jpg转换SWF js图片切换 flash图片切换效果图片自动切换效果

8种简单的图片切换效果: 8中简单的图片切换效果，网页效果简单一用

jQuery抖动式图片切换效果: jQuery抖动式图片切换效果

切换的图片 flash效果! 很不错. 资源来自迅雷.: 切换的图片 flash效果! 很不错. 资源来自迅雷.

网页中图片切换效果: 网页中的图片切换效果，简单，实用。

多种js图片切换效果: 多种js图片切换效果 js图片切换效果图片循环切换效果

asp.net 网页图片切换效果: asp.net C# javascript, javascript图片切换效果asp.net C# javascript, javascript图片切换效果asp.net C# javascript, javascript图片切换效果asp.net C# javascript, javascript图片切换效果

图片切换效果: 图片切换效果

多图片切换效果JavaScript实现: 任意多图的焦点图片切换效果...... 源码很简单,可以随意嵌套

flash图片切换效果: 几款非常好看的图片切换效果几款非常好看的图片切换效果

两种JS图片切换效果: JS 图片切换效果图片轮播支持火狐

常用图片切换效果javascript: 常用图片切换，有透明效果，在网上下载然后改动了一下

Global site tag (gtag.js) - Google Analytics