JS实现超精简的链接列表在固定区域内滚动效果代码

更新时间：2015年11月04日 10:37:49 作者：企鹅

这篇文章主要介绍了JS实现超精简的链接列表在固定区域内滚动效果代码,非常常见的页面元素属性变换控制实现滚动效果,简单实用,需要的朋友可以参考下

本文实例讲述了JS实现超精简的链接列表在固定区域内滚动效果代码。分享给大家供大家参考，具体如下：

这款超精简版的链接列表文字滚动代码，可在指定的区域内滚动，当然，区域大小可以自己设置的。

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/js-link-list-scroll-style-codes/

具体代码如下：

<html>
<HEAD>
<TITLE>文字链接列表滚动</TITLE>
<META content="text/html; charset=gb2312" http-equiv=Content-Type>
<STYLE type=text/css>
#demo a {
 width:100%;
 overflow:hidden;
 font:12px/16px tahoma;
 display:block;
 text-decoration:none;
 margin:2px;
 color:#4a551c;
 padding-left:2px;
 text-align:left;
}
#demo a:hover {
 color:#ff6600;
}
</STYLE>
</HEAD>
<body>
<div id="demo" style="overflow:hidden;height:132px;width:350px; border:1px solid #dde5bc;">
 <div id="demo1"> 
  <a href="#">多彩的电脑机箱图标，很多颜色和风格……</a>
  <a href="#">地方税务局网站建设方案 ……</a>
  <a href="#">获得系统内存，并以圆饼图表现百分比……</a>
  <a href="#">多彩的电脑机箱图标，很多颜色和风格……</a>
  <a href="#">完全兼容IE, FF, Opera, 其它的还未经测试……</a>
  <a href="#">地方税务局网站建设方案 ……</a>
  <a href="#">多彩的电脑机箱图标，很多颜色和风格……</a>
  <a href="#">地方税务局网站建设方案 ……</a>
  <a href="#">完全兼容IE, FF, Opera, 其它的还未经测试……</a>
  <a href="#">获得系统内存，并以圆饼图表现百分比……</a>
  <a href="#">完全兼容IE, FF, Opera, 其它的还未经测试……</a>
  <a href="#">获得系统内存，并以圆饼图表现百分比……</a>
 </div>
 <div id="demo2"></div>
</div>
<script>
var speed=40
var demo=document.getElementById("demo");
var demo2=document.getElementById("demo2");
var demo1=document.getElementById("demo1");
demo2.innerHTML=demo1.innerHTML
function Marquee(){
 if(demo2.offsetTop-demo.scrollTop<=0)
  demo.scrollTop-=demo1.offsetHeight
 else{
  demo.scrollTop++
 }
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>
</body>
</html>

希望本文所述对大家JavaScript程序设计有所帮助。

您可能感兴趣的文章:

微信小程序页面间传值的实现方法示例
这篇文章主要给大家介绍了关于微信小程序页面间传值的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-04-04
js实现input密码框提示信息的方法(附html5实现方法)
这篇文章主要介绍了js实现input密码框提示信息的方法,涉及JavaScript页面元素的获取,属性判断及样式设置等技巧,并附带html5的相关实现方法,需要的朋友可以参考下
2016-01-01
javascript 日期时间转换的方法
javascript 日期时间转换的方法，需要的朋友可以参考一下
2013-02-02
MUI实现上拉加载和下拉刷新效果
这篇文章主要为大家详细介绍了MUI实现上拉加载和下拉刷新效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-06-06
根据出生日期自动取得星座的js代码
最近这个项目需要注册时用户填写出生日期，然后自动取得星座，想想好像用后台代码太麻烦只好转而使用JavaScript。
2010-07-07
setInterval 和 setTimeout会产生内存溢出
jscript 5.7 发布修复了不少ie javascript内存泄露的问题。但是leak依然存在。当我们频繁使用 setInterval 和 setTimeout 时就会每几秒钟出现32k leak...
2008-02-02
循环 vs 递归浅谈
本文代码使用 JavaScript。一些同学对递归的理解还停留在“是一种求阶乘比循环低效的方法”。但其实递归和循环处理的问题是不同。拿“遍历数组”这个问题来说：循环适合同一维度（单层长度不限）上的遍历，而递归则适合跨维度（层数不限）的遍历。
2013-02-02
详解html-webpack-plugin插件(用法总结)
这篇文章主要介绍了详解html-webpack-plugin插件(用法总结)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-09-09
javascript简单比较日期大小的方法
这篇文章主要介绍了javascript简单比较日期大小的方法,涉及JavaScript针对日期的转换与判定操作技巧,需要的朋友可以参考下
2016-01-01
js 数组克隆方法小结
在JS中，对于对象类型的变量的引用是通过类似C之类的“指针”的方式来操作的，及如果多个变量引用同一个对象，则任意一个变量对对象的操作都会影响到其它的变量。
2010-03-03