上下无缝滚动(应用高级盒子模型)
2015-07-07 10:23
441 查看
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>文字列表无缝向上滚动JavaScript代码</title> <style> *{margin:0px;padding:0px;border:0px;} body{font-size:12px} #demo1{ height:auto; text-align:left; } #demo2{ height:auto; text-align:left; } #demo1 li{ list-style-type:none; height:22px; background:url() no-repeat left center; text-align:left; text-indent:15px; } #demo2 li{ list-style-type:none; height:22px; background:url() no-repeat left center; text-align:left; text-indent:15px; } </style> </head> <body> <div id="demo" style="overflow:hidden;height:80px;width:280px;"> <ul id="demo1"> <li><a href="/soft/4085.shtml" target="_blank">XP Menu 仿QQ菜单管理器左侧菜单</a></li> <li><a href="/soft/5884.shtml" target="_blank">多层嵌套的一个层展开</a></li> <li><a href="/soft/1852.shtml" target="_blank">《Java2核心技术卷2:高级特性》第7版</a></li> <li><a href="/soft/1286.shtml" target="_blank">CSS、HTML教程打包下载 (CHM)</a></li> <li><a href="/soft/4216.shtml" target="_blank">《C++ Primer》中文第四版 chm</a></li> <li><a href="/soft/3388.shtml" target="_blank">C++工资管理系统(Access)</a></li> <li><a href="/soft/2009.shtml" target="_blank">非常牛的左侧栏JS折叠菜单</a></li> </ul> <ul id="demo2"></ul> </div> <!-- javascript代码 --> <script> // 定义速度 var speed = 40 var demo = document.getElementById("demo"); var demo2 = document.getElementById("demo2"); var demo1 = document.getElementById("demo1"); // 复制demo1的内容到demo2中去 demo2.innerHTML=demo1.innerHTML // 核心轮换函数 function Marquee(){ // 是否demo1 if(demo2.offsetTop - demo.scrollTop <= 0) demo.scrollTop -= demo1.offsetHeight else{ // demo中的内容向上移动 demo.scrollTop ++ } } // setInterval()方法可按照指定的周期(以毫秒计)来调用函数或计算表达式,而clearInterval()是用来清除调用的。 var MyMar = setInterval(Marquee,speed) // 鼠标移入 demo.onmouseover = function() { clearInterval(MyMar) } // 鼠标移出 demo.onmouseout = function() { MyMar=setInterval(Marquee,speed) } </script> </body> </html>
相关文章推荐
- leetCode(31):Combination Sum III
- 关于SQL Server数据库中的注释---扩展属性的使用
- 加载storyboard和xib文件
- leetCode(31):Combination Sum III 分类: leetCode 2015-07-07 10:23 163人阅读 评论(0) 收藏
- javascript笔记01:javascript入门介绍
- C++读取特定路径下文件目录及文件名称&&文件结构
- kubenetes環境搭建
- 【leetcode】Binary Tree Maximum Path Sum
- Hadoop
- [深入学习C#]完成异步委托的三种方式
- android 存储5种方式
- C#关于摄像头的使用
- chrome firefox 获取模拟微信浏览器
- 【后端】content type大全 from http://tool.oschina.net/commons
- Android5.0网络之ipv6
- H5页面中删除iPhone自带样式
- WEB前端面试题整理
- [SoapUI] context.expand 和 groovyUtils.getXmlHolder 有什么不一样
- Python连接PostgreSQL
- Jquery DataTable 回调函数说明及示例