javascript:新闻上下滚动特效

 1 <html>
 2 <head>
 3 <title>1</title>
 4 <style type='text/css'>
 5 #box{
 6     float:left;
 7     border:solid 1px green;
 8     overflow:hidden;
 9     height:26px;
10     border-width:1px 0px;
11 }
12 #ul_news{
13     border:solid 0px green;
14     margin:0px;
15     list-style-type:none;
16     width:150px;
17     position:relative;
18 }
19 #ul_news li{
20     padding:3px;
21     border-width:0px;
22     border-bottom:dashed 1px #cccccc;
23     font-size:14px;
24 }
25 </style>
26 </head>
27 <body onclick='fun2();'>
28 <div id='box'>
29 <ul id='ul_news'>
30 <li>hello world</li>
31 <li><font color='green'>java web</font></li>
32 <li><font color='red'><strong>zend framework</strong></font></li>
33 </ul>
34 </div>
35 <script language='javascript'>
36     var obj=document.getElementById('ul_news');
37     function fun(){
38         if(obj.offsetTop==-26){
39             var obj2=obj.firstChild.cloneNode(true);
40             obj.removeChild(obj.firstChild);
41             obj.appendChild(obj2);
42             obj.style.top='-1px';
43         }else{
44             if(obj.offsetTop-4<-26)
45                 obj.style.top='-26px';
46             else
47                 obj.style.top=(obj.offsetTop-4)+'px';
48         }
49     }
50     function fun2(){
51         window.setInterval("fun();",200);
52     }
53 </script>
54 
55 </body>
56 </html>

 

转载于:https://www.cnblogs.com/51xzdy/archive/2012/06/06/2538194.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值