console.log(🍺);|

js实现新闻滚动实例

复制代码
 1 <html>
 2 <head>
 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 4 <title>test</title>
 5 <script type="text/javascript" src="jquery-1.11.1.min.js"></script>
 6 
 7 <style type="text/css">
 8 *{
 9     padding:0;
10     margin:0;
11     border:none;
12 }
13 #news{
14     width:300px;
15     height:100px;
16     margin:20px auto;
17     background-color:rgb(236, 231, 159);
18     border:#039 solid 1px;
19     overflow:hidden;/*这里必须设置哦,否则滚动会消失的,如果设置为scroll,更容易明白原理*/
20 }
21 #news li{
22     line-height:30px;
23 }
24 </style>
25 </head>
26 <body>
27 <div id="news" onmouseover="tz()" onmouseout="ks()">
28 <ul id="p1">
29 <li><a href="">1这是测试新闻滚动效果</a></li>
30 <li><a href="">2这是测试新闻滚动效果</a></li>
31 <li><a href="">3这是测试新闻滚动效果</a></li>
32 <li><a href="">4这是测试新闻滚动效果</a></li>
33 <li><a href="">5这是测试新闻滚动效果</a></li>
34 <li><a href="">6这是测试新闻滚动效果</a></li>
35 <li><a href="">7这是测试新闻滚动效果</a></li>
36 <li><a href="">8这是测试新闻滚动效果</a></li>
37 </ul>
38 <ul id="p2">
39 </ul>
40 </div>
41 <script type="text/javascript">
42 var n=document.getElementById("news");
43 var p1=document.getElementById("p1");
44 var p2=document.getElementById("p2");
45 p2.innerHTML=p1.innerHTML;
46 //alert(n.offsetHeight+" 1  "+p1.offsetHeight);
47 var f=function(){
48     n.scrollTop++;
49     if(n.scrollTop>=p1.offsetHeight){
50         //alert(n.scrollTop+" 1  "+p1.offsetHeight);
51         n.scrollTop=0;
52     }
53 }
54 var i=setInterval(f,20);
55 var tz=function(){
56     clearInterval(i);
57 }
58 var ks=function(){
59     i=setInterval(f,20);
60 }
61 </script>
62 </body>
63 </html>
复制代码

请注意:有jQuery的封装函数 

知识点:

 

本文作者:Mahmud(مەھمۇد)

本文链接:https://www.cnblogs.com/mahmud/p/10105916.html

版权声明:本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。

posted @   Mahmud(مەھمۇد)  阅读(2744)  评论(1编辑  收藏  举报
编辑推荐:
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
阅读排行:
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· 凌晨三点救火实录:Java内存泄漏的七个神坑,你至少踩过三个!
点击右上角即可分享
微信分享提示
评论
收藏
关注
推荐
深色
回顶
收起
  1. 1 404 not found REOL
404 not found - REOL
00:00 / 00:00
An audio error has occurred.

Not available