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用unbind方法去掉hover事件及其他方法介绍
Mar 18 Javascript
jquery导航制件jquery鼠标经过变色效果示例
Dec 05 Javascript
jquery1.9 下检测浏览器类型和版本的方法
Dec 26 Javascript
将查询条件的input、select清空
Jan 14 Javascript
使用delegate方法为一个tr标签加一个链接
Jun 27 Javascript
JavaScript中的对象序列化介绍
Dec 30 Javascript
angularjs 源码解析之scope
Aug 22 Javascript
纯原生js实现table表格的增删
Jan 05 Javascript
微信小程序 仿猫眼实现实例代码
Mar 14 Javascript
微信小程序 动态绑定事件并实现事件修改样式
Apr 13 Javascript
微信小程序实现录音功能
Nov 22 Javascript
tracking.js实现前端人脸识别功能
Apr 16 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 开发环境配置(测试开发环境)
2010/04/28 PHP
laravel框架中路由设置,路由参数和路由命名实例分析
2019/11/23 PHP
精心挑选的15个jQuery下拉菜单制作教程
2012/06/15 Javascript
javascript中expression的用法整理
2014/05/13 Javascript
基于Jquery+Ajax+Json实现分页显示附效果图
2014/07/30 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记6)
2015/12/20 Javascript
JavaScript 数组- Array的方法总结(推荐)
2016/07/21 Javascript
js获取腾讯视频ID的方法
2016/10/03 Javascript
canvas绘制七巧板
2017/02/03 Javascript
jQuery图片切换动画效果
2017/02/28 Javascript
JavaScript之浏览器对象_动力节点Java学院整理
2017/07/03 Javascript
jquery 一键复制到剪切板的实例
2017/09/20 jQuery
node通过express搭建自己的服务器
2017/09/30 Javascript
简单的vuex 的使用案例笔记
2018/04/13 Javascript
微信小程序使用gitee进行版本管理
2018/09/20 Javascript
了解JavaScript表单操作和表单域
2019/05/27 Javascript
vue路由传参页面刷新参数丢失问题解决方案
2019/10/08 Javascript
使用JavaScript计算前一天和后一天的思路详解
2019/12/20 Javascript
如何配置vue.config.js 处理static文件夹下的静态文件
2020/06/19 Javascript
JS跨浏览器解析XML应用过程详解
2020/10/16 Javascript
[40:13]Ti4 冒泡赛第二天 iG vs NEWBEE 2
2014/07/15 DOTA
python检测远程端口是否打开的方法
2015/03/14 Python
python创建临时文件夹的方法
2015/07/06 Python
使用Scrapy爬取动态数据
2018/10/21 Python
python使用writerows写csv文件产生多余空行的处理方法
2019/08/01 Python
python读取ini配置文件过程示范
2019/12/23 Python
如何使用Python调整图像大小
2020/09/26 Python
Tahari ASL官方网站:高级设计师女装
2021/03/15 全球购物
幼儿教师自我鉴定
2013/11/02 职场文书
奥巴马演讲稿
2014/01/08 职场文书
毕业生自荐书
2014/02/02 职场文书
模具专业毕业推荐信
2014/03/08 职场文书
《歌唱二小放牛郎》教学反思
2014/04/19 职场文书
党在我心中的演讲稿
2014/09/13 职场文书
525心理健康活动总结
2015/05/08 职场文书
2015年秋季小班开学寄语
2015/05/27 职场文书