热门：网页模板.net视频教程JQueryMVCjsonExtJs源码示例三级联动JQuery菜单
您现在的位置：.Net中文社区>> 实用代码>>正文内容

仿QQ首页图片轮换效果

发布时间：2010年03月12日点击数： 次佚名

先看一下效果图：

直接复制如下代码运行可以看到效果:

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"> 
  2. <HTML xmlns="http://www.w3.org/1999/xhtml"> 
  3. <HEAD> 
  4. <TITLE>腾讯软件--图片滑动</TITLE> 
  5. <style>  
  6. BODY { 
  7.     PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px 
  8. } 
  9. UL { 
  10.     PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px 
  11. } 
  12. .container { 
  13.     WIDTH: 610px; HEIGHT: 205px 
  14. } 
  15. .container A IMG { 
  16.     WIDTH: 610px; HEIGHT: 205px 
  17. } 
  18. .container IMG { 
  19.     BORDER-BOTTOM-STYLE: none; BORDER-RIGHT-STYLE: none; BORDER-TOP-STYLE: none; BORDER-LEFT-STYLE: none 
  20. } 
  21. .td_f A IMG { 
  22.     PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px 
  23. } 
  24. .num { 
  25.     POSITION: absolute; WIDTH: 90px; FLOAT: right; TOP: 180px; LEFT: 520px 
  26. } 
  27. .num LI { 
  28.     TEXT-ALIGN: center; LINE-HEIGHT: 15px; LIST-STYLE-TYPE: none; MARGIN: 1px; WIDTH: 15px; FONT-FAMILY: Arial; BACKGROUND: url(http://www.aspxcs.net/UploadFiles/2010/3/201003122330190201.gif) no-repeat -15px 0px; FLOAT: left; HEIGHT: 15px; COLOR: #86a2b8; FONT-SIZE: 12px; CURSOR: pointer 
  29. } 
  30. .num LI.on { 
  31.     LINE-HEIGHT: 15px; WIDTH: 15px; BACKGROUND: url(http://www.aspxcs.net/UploadFiles/2010/3/201003122330190201.gif) no-repeat; HEIGHT: 15px; COLOR: #ffffff 
  32. } 
  33. .more { 
  34.     FLOAT: right 
  35. } 
  36. .more1 A { 
  37.     TEXT-ALIGN: left; LINE-HEIGHT: 25px; MARGIN: 0px 0px 0px 10px; COLOR: #3373a3 
  38. } 
  39. </style> 
  40. <SCRIPT language=javascript> 
  41.         if(typeof(pgvMain) == 'function') 
  42.                 pgvMain(); 
  43. </SCRIPT> 
  44. <SCRIPT> 
  45. var gtopTab="one"; 
  46. function $id(id){ 
  47.     return document.getElementById(id);  
  48. } 
  49. function changesTab(tab_id){ 
  50.     if (tab_id==gtopTab){ 
  51.         return;  
  52.     }else{ 
  53.         $id(gtopTab).className="unselect";   
  54.         $id(tab_id).className="select"; 
  55.         $id("tab_"+gtopTab).style.display="none"; 
  56.         $id("tab_"+tab_id).style.display="block"; 
  57.         gtopTab=tab_id; 
  58.     } 
  59. } 
  60. </SCRIPT> 
  61. <SCRIPT type=text/javascript> 
  62. var $ = function (id) { 
  63.     return "string" == typeof id ? document.getElementById(id) : id; 
  64. }; 
  65. var Extend = function(destination, source) { 
  66.     for (var property in source) { 
  67.         destination[property] = source[property]; 
  68.     } 
  69.     return destination; 
  70. } 
  71. var CurrentStyle = function(element){ 
  72.     return element.currentStyle || document.defaultView.getComputedStyle(element, null); 
  73. } 
  74. var Bind = function(object, fun) { 
  75.     var args = Array.prototype.slice.call(arguments).slice(2); 
  76.     return function() { 
  77.         return fun.apply(object, args.concat(Array.prototype.slice.call(arguments))); 
  78.     } 
  79. } 
  80. var Tween = { 
  81.     Quart: { 
  82.         easeOut: function(t,b,c,d){ 
  83.             return -c * ((tt=t/d-1)*t*t*t - 1) + b; 
  84.         } 
  85.     }, 
  86.     Back: { 
  87.         easeOut: function(t,b,c,d,s){ 
  88.             if (s == undefined) s = 1.70158; 
  89.             return c*((tt=t/d-1)*t*((s+1)*t + s) + 1) + b; 
  90.         } 
  91.     }, 
  92.     Bounce: { 
  93.         easeOut: function(t,b,c,d){ 
  94.             if ((t/=d) < (1/2.75)) { 
  95.                 return c*(7.5625*t*t) + b; 
  96.             } else if (t < (2/2.75)) { 
  97.                 return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b; 
  98.             } else if (t < (2.5/2.75)) { 
  99.                 return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b; 
  100.             } else { 
  101.                 return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b; 
  102.             } 
  103.         } 
  104.     } 
  105. } 
  106. //容器对象,滑动对象,切换数量 
  107. var SlideTrans = function(container, slider, count, options) { 
  108.     this._slider = $(slider); 
  109.     this._container = $(container);//容器对象 
  110.     this._timer = null;//定时器 
  111.     this._count = Math.abs(count);//切换数量 
  112.     this._target = 0;//目标值 
  113.     thisthis._t = this._b = this._c = 0;//tween参数 
  114.      
  115.     this.Index = 0;//当前索引 
  116.      
  117.     this.SetOptions(options); 
  118.      
  119.     this.Auto = !!this.options.Auto; 
  120.     this.Duration = Math.abs(this.options.Duration); 
  121.     this.Time = Math.abs(this.options.Time); 
  122.     this.Pause = Math.abs(this.options.Pause); 
  123.     thisthis.Tween = this.options.Tween; 
  124.     thisthis.onStart = this.options.onStart; 
  125.     thisthis.onFinish = this.options.onFinish; 
  126.      
  127.     var bVertical = !!this.options.Vertical; 
  128.     this._css = bVertical ? "top" : "left";//方向 
  129.      
  130.     //样式设置 
  131.     var p = CurrentStyle(this._container).position; 
  132.     p == "relative" || p == "absolute" || (this._container.style.position = "relative"); 
  133.     this._container.style.overflow = "hidden"; 
  134.     this._slider.style.position = "absolute"; 
  135.      
  136.     thisthis.Change = this.options.Change ? this.options.Change : 
  137.         this._slider[bVertical ? "offsetHeight" : "offsetWidth"] / this._count; 
  138. }; 
  139. SlideTrans.prototype = { 
  140.   //设置默认属性 
  141.   SetOptions: function(options) { 
  142.     this.options = {//默认值 
  143.         Vertical:   true,//是否垂直方向（方向不能改） 
  144.         Auto:       true,//是否自动 
  145.         Change:     0,//改变量 
  146.         Duration:   50,//滑动持续时间 
  147.         Time:       10,//滑动延时 
  148.         Pause:      4000,//停顿时间(Auto为true时有效) 
  149.         onStart:    function(){},//开始转换时执行 
  150.         onFinish:   function(){},//完成转换时执行 
  151.         Tween:      Tween.Quart.easeOut//tween算子 
  152.     }; 
  153.     Extend(this.options, options || {}); 
  154.   }, 
  155.   //开始切换 
  156.   Run: function(index) { 
  157.     //修正index 
  158.     index == undefined && (index = this.Index); 
  159.     index < 0 && (index = this._count - 1) || index >= this._count && (index = 0); 
  160.     //设置参数 
  161.     this._target = -Math.abs(this.Change) * (this.Index = index); 
  162.     this._t = 0; 
  163.     this._b = parseInt(CurrentStyle(this._slider)[this.options.Vertical ? "top" : "left"]); 
  164.     thisthis._c = this._target - this._b; 
  165.      
  166.     this.onStart(); 
  167.     this.Move(); 
  168.   }, 
  169.   //移动 
  170.   Move: function() { 
  171.     clearTimeout(this._timer); 
  172.     //未到达目标继续移动否则进行下一次滑动 
  173.     if (this._c && this._t < this.Duration) { 
  174.         this.MoveTo(Math.round(this.Tween(this._t++, this._b, this._c, this.Duration))); 
  175.         this._timer = setTimeout(Bind(this, this.Move), this.Time); 
  176.     }else{ 
  177.         this.MoveTo(this._target); 
  178.         this.Auto && (this._timer = setTimeout(Bind(this, this.Next), this.Pause)); 
  179.     } 
  180.   }, 
  181.   //移动到 
  182.   MoveTo: function(i) { 
  183.     this._slider.style[this._css] = i + "px"; 
  184.   }, 
  185.   //下一个 
  186.   Next: function() { 
  187.     this.Run(++this.Index); 
  188.   }, 
  189.   //上一个 
  190.   Previous: function() { 
  191.     this.Run(--this.Index); 
  192.   }, 
  193.   //停止 
  194.   Stop: function() { 
  195.     clearTimeout(this._timer); this.MoveTo(this._target); 
  196.   } 
  197. }; 
  198. </SCRIPT> 
  199. <BODY> 
  200. <DIV id=idContainer2 class=container> 
  201. <TABLE id=idSlider2 border=0 cellSpacing=0 cellPadding=0> 
  202.   <TBODY> 
  203. <TR> 
  204.  <td class="td_f"><a href="" onclick="pgvSendClick({hottag:'ISD.SHOW.BANNER.PY'});"><img src="http://www.aspxcs.net/UploadFiles/2010/3/201003122258434719.jpg" /></a></td> 
  205.         <td class="td_f"><a href="" onclick="pgvSendClick({hottag:'ISD.SHOW.BANNER.PLAYER'});"><img src="http://www.aspxcs.net/UploadFiles/2010/3/201003122258445123.jpg" /></a></td> 
  206.         <td class="td_f"><a href="" onclick="pgvSendClick({hottag:'ISD.SHOW.BANNER.XF'});"><img src="http://www.aspxcs.net/UploadFiles/2010/3/201003122258452471.jpg" /></a></td> 
  207.         <td class="td_f"><a href="" onclick="pgvSendClick({hottag:'ISD.SHOW.BANNER.TT'});"><img src="http://www.aspxcs.net/UploadFiles/2010/3/201003122258468980.jpg" /></a></td> 
  208. </TR> 
  209.   </TBODY> 
  210. </TABLE> 
  211. <UL id=idNum class=num></UL> 
  212. </DIV> 
  213. <SCRIPT> 
  214. //new SlideTrans("idContainer", "idSlider", 3).Run(); 
  215. /////////////////////////////////////////////////////////// 
  216. var forEach = function(array, callback, thisObject){ 
  217.     if(array.forEach){ 
  218.         array.forEach(callback, thisObject); 
  219.     }else{ 
  220.         for (var i = 0, len = array.length; i < len; i++) { callback.call(thisObject, array[i], i, array); } 
  221.     } 
  222. } 
  223. var st = new SlideTrans("idContainer2", "idSlider2", 5, { Vertical: false }); 
  224. var nums = []; 
  225. //插入数字 
  226. for(var i = 0, n = st._count - 1; i <= n;){ 
  227.     (nums[i] = $("idNum").appendChild(document.createElement("li"))).innerHTML = ++i; 
  228. } 
  229. forEach(nums, function(o, i){ 
  230.     o.onmouseover = function(){ o.className = "on"; st.Auto = false; st.Run(i); } 
  231.     o.onmouseout = function(){ o.className = ""; st.Auto = true; st.Run(); } 
  232. }) 
  233. //设置按钮样式 
  234. st.onStart = function(){ 
  235.     forEach(nums, function(o, i){ o.className = st.Index == i ? "on" : ""; }) 
  236. } 
  237. //$("idAuto").onclick = function(){ 
  238.     //if(st.Auto){ 
  239.         //st.Auto = false; st.Stop(); this.value = "自动"; 
  240.     //}else{ 
  241.         //st.Auto = true; st.Run(); this.value = "停止"; 
  242.     //} 
  243. //} 
  244. //$("idNext").onclick = function(){ st.Next(); } 
  245. //$("idPre").onclick = function(){ st.Previous(); } 
  246. //$("idTween").onchange = function(){ 
  247.     //switch (parseInt(this.value)){ 
  248.         //case 2 : 
  249.             //st.Tween = Tween.Bounce.easeOut; break; 
  250.         //case 1 : 
  251.             //st.Tween = Tween.Back.easeOut; break; 
  252.         //default : 
  253.             //st.Tween = Tween.Quart.easeOut; 
  254.     //} 
  255. //} 
  256. st.Run(); 
  257. </SCRIPT> 
  258. </BODY></HTML> 

随机文章推荐

本站热点业务

更多模板/案例展示

热门推荐

最近更新

关于我们 | 联系我们 | 团队日志 | 网站地图 | 网站合作
本站部份资源来于互联网,只供学习之用,不得用于商业,如有侵犯版权请联系告知,本站将第一时间删除!
copyright © 2008-2010 .Net中文社区 ASPXCS.NET™.All Rights Reserved 滇ICP备08102132号