js实现新闻滚动实例
2024-08-31 11:32:31
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script> <style type="text/css">
*{
padding:0;
margin:0;
border:none;
}
#news{
width:300px;
height:100px;
margin:20px auto;
background-color:rgb(236, 231, 159);
border:#039 solid 1px;
overflow:hidden;/*这里必须设置哦,否则滚动会消失的,如果设置为scroll,更容易明白原理*/
}
#news li{
line-height:30px;
}
</style>
</head>
<body>
<div id="news" onmouseover="tz()" onmouseout="ks()">
<ul id="p1">
<li><a href="">1这是测试新闻滚动效果</a></li>
<li><a href="">2这是测试新闻滚动效果</a></li>
<li><a href="">3这是测试新闻滚动效果</a></li>
<li><a href="">4这是测试新闻滚动效果</a></li>
<li><a href="">5这是测试新闻滚动效果</a></li>
<li><a href="">6这是测试新闻滚动效果</a></li>
<li><a href="">7这是测试新闻滚动效果</a></li>
<li><a href="">8这是测试新闻滚动效果</a></li>
</ul>
<ul id="p2">
</ul>
</div>
<script type="text/javascript">
var n=document.getElementById("news");
var p1=document.getElementById("p1");
var p2=document.getElementById("p2");
p2.innerHTML=p1.innerHTML;
//alert(n.offsetHeight+" 1 "+p1.offsetHeight);
var f=function(){
n.scrollTop++;
if(n.scrollTop>=p1.offsetHeight){
//alert(n.scrollTop+" 1 "+p1.offsetHeight);
n.scrollTop=0;
}
}
var i=setInterval(f,20);
var tz=function(){
clearInterval(i);
}
var ks=function(){
i=setInterval(f,20);
}
</script>
</body>
</html>
请注意:有jQuery的封装函数
知识点:
最新文章
- Shell : debug
- 一个类似宣传的H5页面
- 开发一个简单的python计算器
- 查看Windows服务器登录日志
- 【转】nanosleep的精度与调度算法的关系 来自:bean.blog.chinaunix.net
- codeforces Educational Codeforces Round 5 A. Comparing Two Long Integers
- HBase Shell 常见操作
- Mustache.js前端模板引擎源码解读
- angularJS商品购物车案例
- PL/SQL中查看列注释、列属性
- memcpy的使用方法总结
- perl 处理文本
- crontab linux
- Swing之JTable的详细介绍(转)
- Linux 下实时查看日志
- Cairo-Dock 系统关机无效
- C++版 - 剑指Offer 面试题39:二叉树的深度(高度)(二叉树深度优先遍历dfs的应用) 题解
- python入门(十四):面向对象(属性、方法、继承、多继承)
- 【C#复习总结】 Async 和 Await 的异步编程
- MongoDB的地理位置查询,以及和mysql的使用对比
热门文章
- Strtus配置Tomcat出现问题
- spring中的单例和多例
- 计算机网络系统--Microsoft Lync 与 腾讯通RTX 对比(转载)
- 洛谷—— P3119 [USACO15JAN]草鉴定Grass Cownoisseur || BZOJ——T 3887: [Usaco2015 Jan]Grass Cownoisseur
- HDU 5171
- JeeSite(2):导入数据,进入系统
- Suffix Array 后缀数组
- 关于getchar()的使用
- iOS11访问相册权限变更问题
- C/C++中的函数指针