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


Posted in Javascript onNovember 04, 2015

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

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

运行效果截图如下:

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

在线演示地址如下:

具体代码如下:

<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程序设计有所帮助。

Javascript 相关文章推荐
文本域光标操作的jQuery扩展分享
Mar 10 Javascript
JavaScript加入收藏夹功能(兼容IE、firefox、chrome)
May 05 Javascript
jquery获取checkbox的值并post提交
Jan 14 Javascript
JS+CSS实现的蓝色table选项卡效果
Oct 08 Javascript
Jquery操作Ajax方法小结
Nov 29 Javascript
你有必要知道的25个JavaScript面试题
Dec 29 Javascript
js 判断数据类型的几种方法
Jan 13 Javascript
Vue2.0父子组件传递函数的教程详解
Oct 16 Javascript
angular基于ng-alain定义自己的select组件示例
Feb 23 Javascript
基于JavaScript实现幸运抽奖页面
Jul 05 Javascript
Vue中常用rules校验规则(实例代码)
Nov 14 Javascript
Node中对非阻塞I/O、事件循环的知识点总结
Jan 05 Javascript
JS实现网页上随滚动条滚动的层效果代码
Nov 04 #Javascript
jQuery实现带有动画效果的回到顶部和底部代码
Nov 04 #Javascript
JavaScript前端开发之实现二进制读写操作
Nov 04 #Javascript
js实现二级菜单渐隐显示
Nov 03 #Javascript
整理JavaScript创建对象的八种方法
Nov 03 #Javascript
JavaScript实现倒计时代码段Item1(非常实用)
Nov 03 #Javascript
jQuery实用技巧必备(下)
Nov 03 #Javascript
You might like
PHP文本数据库的搜索方法
2006/10/09 PHP
php smarty函数扩展
2010/03/15 PHP
PHP管理依赖(dependency)关系工具 Composer的自动加载(autoload)
2014/08/18 PHP
php通过隐藏表单控件获取到前两个页面的url
2014/09/09 PHP
使用WordPress发送电子邮件的相关PHP函数用法解析
2015/12/15 PHP
thinkPHP实现的联动菜单功能详解
2017/05/05 PHP
搜索附近的人PHP实现代码
2018/02/11 PHP
极酷的javascirpt,让你随意编辑任何网页
2007/02/25 Javascript
实现png图片和png背景透明(支持多浏览器)的方法
2009/09/08 Javascript
javascript jq 弹出层实例
2013/08/25 Javascript
JavaScript两种跨域技术全面介绍
2014/04/16 Javascript
js限制文本框只能输入整数或者带小数点的数字
2015/04/27 Javascript
基于JavaScript的操作系统你听说过吗?
2016/01/28 Javascript
基于BootStrap Metronic开发框架经验小结【八】框架功能总体界面介绍
2016/05/12 Javascript
Bootstrap基本组件学习笔记之input输入框组(9)
2016/12/07 Javascript
two.js之实现动画效果示例
2017/11/06 Javascript
Vue引入jquery实现平滑滚动到指定位置
2018/05/09 jQuery
JS伪继承prototype实现方法示例
2018/06/20 Javascript
es6中class类静态方法,静态属性,实例属性,实例方法的理解与应用分析
2020/02/15 Javascript
基于element-ui封装表单金额输入框的方法示例
2021/01/06 Javascript
[04:30]显微镜下的DOTA2第五期——拉比克
2013/09/26 DOTA
python使用内存zipfile对象在内存中打包文件示例
2014/04/30 Python
python中使用百度音乐搜索的api下载指定歌曲的lrc歌词
2014/07/18 Python
Python运算符重载用法实例
2015/05/28 Python
Python解决八皇后问题示例
2018/04/22 Python
python的pip安装以及使用教程
2018/09/18 Python
使用HTML5的表单验证的简单示例
2015/09/09 HTML / CSS
总务岗位职责
2013/11/19 职场文书
2014迎新年晚会策划方案
2014/02/23 职场文书
《槐乡五月》教学反思
2014/04/25 职场文书
电子信息专业应届生自荐信
2014/06/04 职场文书
2014年关工委工作总结
2014/11/17 职场文书
事业单位岗位说明书
2015/10/08 职场文书
2019年个人工作总结范文(3篇)
2019/08/27 职场文书
详解Python自动化之文件自动化处理
2021/06/21 Python
Redis Cluster集群动态扩容的实现
2021/07/15 Redis