现在的位置: 首页 > 综合 > 正文

js滚动广告效果

2018年01月23日 ⁄ 综合 ⁄ 共 3638字 ⁄ 字号 小 中 大 ⁄ 评论关闭

上下翻滚的js滚动广告效果， 通过js操作table的position来实现。

运行代码 < type="text/javascript">

 

view plaincopy to clipboardprint?
  1. <HTML>  
  2.  <HEAD>  
  3.   <title>test</title>  
  4.   <style>    
  5.     #g_div{   
  6.      text-align:right;   
  7.      overflow:hidden;   
  8.     }   
  9.    .b{   
  10.      width:24px;   
  11.      height:16px;   
  12.      background:#737373;   
  13.      font-size:14px;   
  14.      font-weight:bold;   
  15.      color:#fff;   
  16.      text-decoration:none   
  17.      margin-left:1px;   
  18.     }   
  19.    .b:hover{   
  20.     width:24px;    
  21.     height:16px;    
  22.     background:#780001;   
  23.     font-size:14px;   
  24.     font-weight:bold;   
  25.     color:#fff;   
  26.     text-decoration:none;   
  27.     margin-left:1px;   
  28.    }   
  29.    .bhover{   
  30.      width:24px;    
  31.     height:16px;    
  32.     background:#780001;    
  33.     font-size:14px;    
  34.     font-weight:bold;    
  35.     color:#fff;    
  36.     text-decoration:none;    
  37.     margin-left:1px;   
  38.    }   
  39.   </style>  
  40.  </HEAD>  
  41.  <BODY>  
  42.   <div id="g_div" style="WIDTH:270px;HEIGHT:252px">  
  43.    <a href="#" target="_blank">  
  44.     <img id="g_img" style="BORDER-RIGHT:green 1px solid; BORDER-TOP:green 1px solid; FILTER:revealTrans(duration=1,transition=23); BORDER-LEFT:green 1px solid; WIDTH:266px; BORDER-BOTTOM:green 1px solid; HEIGHT:220px" src="http://zi.csdn.net/xian.gif">  
  45.    </a>  
  46.    <a href="http://www.baidu.com/" for="http://pic.moobol.com/user_pic//070910/news/071023/s/153210223.jpg" target="_blank">  
  47.     Tip 1   
  48.    </a>  
  49.    <a href="http://www.126.com/" for="http://pic.moobol.com/user_pic//070213/hcwuzhanlong/071030/s/141331956.jpg" target="_blank">  
  50.     Tip 2   
  51.    </a>  
  52.    <a href="http://mp3.baidu.com/" for="http://pic.moobol.com/user_pic//070910/news/071023/s/154419597.jpg" target="_blank">  
  53.     Tip 3   
  54.    </a>  
  55.    <a href="http://post.baidu.com/" for="http://pic.moobol.com/user_pic//061013/keke/071030/s/173614548.jpg" target="_blank">  
  56.     Tip 4   
  57.    </a>  
  58.    <a href="http://top.baidu.com/" for="http://pic.moobol.com/user_pic//070612/pengshaojun/071030/s/115630736.JPG" target="_blank">  
  59.     Tip 5   
  60.    </a>  
  61.   </div>  
  62.  </BODY>  
  63. </HTML>  
  64.   
  65. <script language="JavaScript">  
  66.  function f(){   
  67.   var g_sec=5;   
  68.   var g_items=new Array();   
  69.   var g_div=document.getElementById("g_div");   
  70.   var g_img=document.getElementById("g_img");   
  71.   var g_imgg_imglink=g_img.parentElement;   
  72.   var arr=g_div.getElementsByTagName("A");   
  73.   var arrarr_length=arr.length;   
  74.   var g_index=1;   
  75.      
  76.   var show_img=function(n){     
  77.       if(//d+/.test(n)){   
  78.       var prev=g_index+1;   
  79.       g_index=n-1;   
  80.       }   
  81.       else{      
  82.      var prev=(g_index>arr.length)?(arr_length-1):g_index+1;   
  83.      g_index=(g_index<arr_length-2)?(++g_index):0;   
  84.       }    
  85.       if(document.all){   
  86.        g_img.filters.revealTrans.Transition=23;   
  87.        g_img.filters.revealTrans.apply();   
  88.        g_img.filters.revealTrans.play();   
  89.       }   
  90.     arr[prev].className="b";   
  91.     arr[g_index+1].className="bhover";   
  92.     g_img.src=g_items[g_index].img.src;   
  93.     g_img.title=g_items[g_index].txt;   
  94.     g_imglink.href=g_items[g_index].url;   
  95.     g_imglink.target=g_items[g_index].target;   
  96.   }   
  97.      
  98.   for(var i=1;i<arr_length;i++){   
  99.     g_items.push({txt:arr[i].innerHTML,   
  100.     url:arr[i].href,   
  101.     target:arr[i].target,   
  102.     img:(function(){var o=new Image;o.src=arr[i].getAttribute("for");return o})()})    
  103.     arr[i].title=arr[i].innerHTML   
  104.     arr[i].innerHTML=[i,"&nbsp;"].join("")   
  105.     arr[i].className="b"  
  106.     arr[i].onclick=function(){   
  107.       event.returnValue=false;   
  108.       show_img(event.srcElement.innerText)   
  109.      }   
  110.    }   
  111.   show_img(1);   
  112.   var t=window.setInterval(show_img,g_sec*1000)    
  113.   g_img.onmouseover=function(){window.clearInterval(t)}   
  114.   g_img.onmouseout=function(){t=window.setInterval(show_img,g_sec*1000)}     
  115.  }   
  116.  window.attachEvent("onload",f);   
  117. </script>  
返回
【上篇】
【下篇】

作者:

抱歉!评论已关闭.

返回首页

Copyright © 2013-2018 学步园  保留所有权利.
软文销售 QQ客服：2265327166 点击这里给我发消息（其他合作也可洽谈）
必威体育
必威电竞