技术 订阅所有技术的日志

一组JS网站幻灯片代码

作者:admin 日期:2008-07-02

字体大小: 小 中 大

一个幻灯片效果及其衍生的几种效果，不段补充中. 兼容浏览器:ie6.firefox1.3及其以上版本,主要是一个缓冲算法公式,及其禁用js的情况下，保持版面布局完好,正确.顺便贴一些运动计算公式.

JavaScript代码
  1. Fx.expoIn = function(pos){return Math.pow(2, 10 * (pos - 1))};   
  2. Fx.expoOut = function(pos){return (-Math.pow(2, -10 * pos) + 1)};   
  3.   
  4. Fx.quadIn = function(pos){return Math.pow(pos, 2)};   
  5. Fx.quadOut = function(pos){return -(pos)*(pos-2)};   
  6.   
  7. Fx.circOut = function(pos){return Math.sqrt(1 - Math.pow(pos-1,2))};   
  8. Fx.circIn = function(pos){return -(Math.sqrt(1 - Math.pow(pos, 2)) - 1)};   
  9.   
  10. Fx.backIn = function(pos){return (pos)*pos*((2.7)*pos - 1.7)};   
  11. Fx.backOut = function(pos){return ((pos-1)*(pos-1)*((2.7)*(pos-1) + 1.7) + 1)};   
  12.   
  13. Fx.sineOut = function(pos){return Math.sin(pos * (Math.PI/2))};   
  14. Fx.sineIn = function(pos){return -Math.cos(pos * (Math.PI/2)) + 1};   
  15. Fx.sineInOut = function(pos){return -(Math.cos(Math.PI*pos) - 1)/2};   
  16.   
  17.   
  18. Fx.wobble = function(pos){return (-Math.cos(pos*Math.PI*(9*pos))/2) + 0.5};   
  19. Fx.pulse = function(pos){return (Math.floor(pos*10) % 2 == 0 ? (pos*10-Math.floor(pos*10)) : 1-(pos*10-Math.floor(pos*10)))};   

 

幻灯片甲的代码:

XML/HTML代码
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  2. <html>  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312">  
  5. <title>幻灯片测试</title>  
  6. <style type="text/css">  
  7. <!--   
  8. div{margin:0;padding:0}   
  9. body {margin-left: 30px;margin-top: 30px;}   
  10. .slide{float:left;position:relative}   
  11. #img{width:441px;border:7px solid #156fe6; height:283px;overflow:hidden;}   
  12. #img img{text-align:center;border:0px; vertical-align:top}   
  13. #img a{display:block}   
  14. #txt{position:absolute;bottom:7px;_bottom:6px;left:0px;opacity:0.7;-moz-opacity: 0.7;filter: alpha(opacity=70);width:421px;height:32px;overflow:hidden;text-align:left;background:#24211d;font-size:12px; padding:0 10px;margin-left:7px;line-height:32px;}   
  15. #txt a{color:#fff;text-decoration:none;display:block}   
  16. #btn{position:absolute;top:7px;right:17px;}   
  17. #btn a{width:84px;height:51px;background:url(imgs/btnbg.gif);display:block;margin:10px 0}   
  18. #btn a:hover{background:url(imgs/btna.gif)}   
  19. #btn a:active{background:url(imgs/btned.gif)}   
  20. #btn a.btna{background:url(imgs/btned.gif)}   
  21. #btn img{margin:2px 0 0 7px;border:0px}   
  22.   
  23. -->  
  24. </style></head>  
  25.   
  26. <body>  
  27. <div class="slide">  
  28.     <div id="img"><a href="#" target="_blank"><img src="imgs/1.jpg"></a><a href="#" target="_blank"><img src="imgs/2.jpg"></a><a href="#" target="_blank"><img src="imgs/3.jpg"></a></div>  
  29.     <div class="link" id="btn"><a href="#" class="btna"><img src="imgs/btn1.gif"></a><a href="#"><img src="imgs/btn2.gif"></a><a href="#"><img src="imgs/btn3.gif"></a></div>  
  30.     <div class="text" id="txt"><a href="#" target="_blank">周杰伦最新专辑：《牛仔很忙》</a>|<a href="#" target="_blank">初恋的回忆-《不能说的秘密》</a>|<a href="#" target="_blank">2008贺岁第一棒-《命运呼叫转移》</a></div>  
  31. </div>  
  32. <script type="text/javascript">  
  33. function G(id){   
  34.     return document.getElementById(id);   
  35. }   
  36. var imgHeight=283;   
  37. var st = 0;   
  38. var __n=0;   
  39. var sp=0.3;   
  40. var txtLinks =G('txt').innerHTML.split("|");   
  41. var ele=G('img');   
  42. var timers=new Array();   
  43. function slide(n){     
  44.     document.title=n;   
  45.     G('txt').innerHTML = txtLinks[n];   
  46.     timers[1]=setInterval(doSlide,10);   
  47.     var btn=G('btn').getElementsByTagName('a');   
  48.     for(var i=0; i<3; i++){   
  49.         if(i == n){   
  50.             btn[n].className = 'btna';   
  51.             continue;   
  52.         }   
  53.         btn[i].className = '';   
  54.     }      
  55. }   
  56. function doSlide(){   
  57.     var x=ele.scrollTop;   
  58.     if(ele.scrollTop==__n*imgHeight){          
  59.         __n++;   
  60.         if(timers[1]){clearInterval(timers[1])};   
  61.     }else{   
  62.         stst=st+sp*((__n*imgHeight)-st);   
  63.         ele.scrollTop = Math.round(st);   
  64.     }   
  65. }   
  66. var slideInit = function(){   
  67.     if(__n == 3) __n = 0;   
  68.     slide(__n);   
  69. }   
  70. window.onload=function(){   
  71.     timers[0]=setInterval(slideInit, 5000);   
  72.     var btn=G('btn').getElementsByTagName('a');    
  73.     for(var i=0; i<3; i++){   
  74.         btn[i].setAttribute("num",i);   
  75.         btn[i].onmouseover=function(){clearInterval(timers[0]);}   
  76.         btn[i].onclick=function(){if(timers[1]){clearInterval(timers[1])};__n=this.getAttribute("num");slide(__n);}        
  77.         btn[i].onmouseout=function(){timers[0]=setInterval(slideInit, 5000);}   
  78.         btn[i].onfocus=function(){this.blur()}   
  79.     }      
  80. }   
  81. </script>  
  82. </body>  
  83. </html>  

 




[本日志由 admin 于 2008-07-19 06:46 PM 编辑]
文章来自: 网址兽
引用通告: 查看所有引用 | 我要引用此文章
Tags:
评论: 0 | 引用: 0 | 查看次数: -
发表评论
昵　称:
密　码: 游客发言不需要密码.
内　容:
验证码: 验证码
选　项:
虽然发表评论不用注册，但是为了保护您的发言权，建议您注册帐号.