Chinaunix首页 | 论坛 | 博客

纸上得来终觉浅

首页　| 　博文目录　| 　关于我

水中残月

  • 博客访问： 158278
  • 博文数量： 42
  • 博客积分： 0
  • 博客等级： 民兵
  • 技术积分： 399
  • 用 户 组： 普通用户
  • 注册时间： 2015-09-23 11:47
个人简介

程序猿啊程序猿

文章分类

全部博文（42）

文章存档

2016年（28）

2015年（14）

我的朋友
最近访客
推荐博文
JS实现新闻条垂直无缝滚动

分类： JavaScript

2016-02-25 10:55:53


点击(此处)折叠或打开

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="author" content="" />
  6. <title>新闻条垂直无缝滚动</title>
  7. <style type="text/css">
  8. body,ul,li,div
  9. {
  10.   margin:0px;
  11.   padding:0px;
  12. }
  13. #demo{
  14.   height: 300px;
  15.   width: 300px;
  16.   border:1px solid red;
  17.   overflow: hidden;
  18.   position: relative;
  19.   left: 400px;
  20.   top:200px;
  21. }
  22. ul{
  23.   width: 300px;
  24.   height: 400px;
  25. }
  26. ul li{
  27.   width: 300px;
  28.   height: 40px;
  29.   line-height: 40px;
  30.   text-align: center;
  31. }
  32. </style>
  33.  <script type="text/javascript">
  34. var timer=null;
  35. window.onload=function()
  36. {
  37.   var demo=document.getElementById("demo");
  38.   var demo1=document.getElementById("demo1");
  39.   var demo2=document.getElementById("demo2");
  40.   demo2.innerHTML=demo1.innerHTML;
  41.   function moveTop(){
  42.     if(demo1.offsetHeight-demo.scrollTop<=0)
  43.     {
  44.       demo.scrollTop=0;//offsetHeight获取对象的高度，scrollTop获取滚动条离顶部滚动的高度
  45.     }
  46.     else
  47.     {
  48.       demo.scrollTop++;
  49.     }
  50.   }
  51.   timer=setInterval(moveTop,100);
  52.   demo.onmouseover=function(){clearInterval(timer);};
  53.   demo.onmouseout=function(){timer=setInterval(moveTop,100);};
  54.    }
  55.  </script>
  56. </head>
  57. <body>
  58.   <div id="demo">
  59.     <div id="demo1">
  60.       <ul>
  61.               <li><a href="#">1、努力奋斗才会有美好的明天...</a></li>
  62.               <li><a href="#">2、没有人一开始就是高手...</a></li>
  63.               <li><a href="#">3、不念过去，不畏将来...</a></li>
  64.               <li><a href="#">4、太阳出来了，好好享受生活...</a></li>
  65.               <li><a href="#">5、每一天都是新的，把握现在...</a></li>
  66.               <li><a href="#">6、新的一年里要有进步...</a></li>
  67.               <li><a href="#">7、人人都有可贵之处，在于发现</a></li>
  68.               <li><a href="#">8、web工程师之路，不畏挑战...</a></li>
  69.               <li><a href="#">9、不乱于心，不困于情...</a></li>
  70.               <li><a href="#">10、这是最后一条(figiting)</a></li>
  71.        </ul>
  72.     </div>
  73.     <div id="demo2"></div>
  74.   </div>
  75. </body>
  76. </html>

阅读(982) | 评论(0) | 转发(0) |
0

上一篇：JS实现验证码并在客户端验证

下一篇：ajax的简单实现（后台为PHP）

给主人留下些什么吧！~~
关于我们 | 关于IT168 | 联系方式 | 广告合作 | 法律声明 | 免费注册

Copyright 2001-2010 ChinaUnix.net All Rights Reserved 北京皓辰网域网络信息技术有限公司. 版权所有

感谢所有关心和支持过ChinaUnix的朋友们

16024965号-6