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 相关文章推荐
javascript 导出数据到Excel(处理table中的元素)
Dec 18 Javascript
如何确保JavaScript的执行顺序 之jQuery.html深度分析
Mar 03 Javascript
javascript开发技术大全-第3章 js数据类型
Jul 03 Javascript
js实现同一页面可多次调用的图片幻灯切换效果
Feb 28 Javascript
深入理解JavaScript系列(19):求值策略(Evaluation strategy)详解
Mar 05 Javascript
JavaScript设计模式学习之“类式继承”
Mar 12 Javascript
BootStrap轻松实现微信页面开发代码分享
Oct 21 Javascript
用Vue.js实现监听属性的变化
Nov 17 Javascript
Vue计算属性的学习笔记
Mar 22 Javascript
vue实现微信分享链接添加动态参数的方法
Apr 29 Javascript
关于vue表单提交防双/多击的例子
Oct 31 Javascript
微信小程序全选多选效果实现代码解析
Jan 21 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/07/17 PHP
PHP的范围解析操作符(::)的含义分析说明
2011/07/03 PHP
用PHP实现的四则运算表达式计算实现代码
2011/08/02 PHP
php设计模式之适配器模式原理、用法及注意事项详解
2019/09/24 PHP
JavaScript地图拖动功能SpryMap的简单实现
2013/07/17 Javascript
JavaScript学习笔记之检测客户端类型是(引擎、浏览器、平台、操作系统、移动设备)
2015/12/03 Javascript
JavaScript仿网易选项卡制作代码
2016/10/06 Javascript
JavaScript引用类型Array实例分析
2018/07/24 Javascript
JavaScript设计模式之缓存代理模式原理与简单用法示例
2018/08/07 Javascript
微信小程序学习笔记之目录结构、基本配置图文详解
2019/03/28 Javascript
vue-element-admin 菜单标签失效的解决方式
2019/11/12 Javascript
vue 动态添加class,三个以上的条件做判断方式
2020/11/02 Javascript
[03:58]兄弟们,回来开黑了!DOTA2昔日战友招募宣传视频
2016/07/17 DOTA
[01:03:37]Secret vs VGJ.S Supermajor小组赛C组 BO3 第二场 6.3
2018/06/04 DOTA
[44:22]完美世界DOTA2联赛循环赛 FTD vs PXG BO2第一场 11.01
2020/11/02 DOTA
Python列表推导式的使用方法
2013/11/21 Python
Python实现求最大公约数及判断素数的方法
2015/05/26 Python
virtualenv实现多个版本Python共存
2017/08/21 Python
VSCode下好用的Python插件及配置
2018/04/06 Python
Pipenv一键搭建python虚拟环境的方法
2018/05/22 Python
django js实现部分页面刷新的示例代码
2018/05/28 Python
Python安装及Pycharm安装使用教程图解
2019/09/20 Python
pytorch 使用加载训练好的模型做inference
2020/02/20 Python
一级方程式赛车官方网上商店:F1 Store(支持中文)
2018/01/12 全球购物
激光脱毛、蓝光和护肤:Tria Beauty
2019/03/28 全球购物
主键(Primary Key)约束和唯一性(UNIQUE)约束的区别
2013/05/29 面试题
和睦家庭事迹
2014/05/14 职场文书
大学生应聘求职信
2014/05/26 职场文书
超市店庆活动方案
2014/08/31 职场文书
2014年重阳节敬老活动方案
2014/09/16 职场文书
买卖合同协议书范本
2014/10/18 职场文书
出国留学自荐信模板
2015/03/06 职场文书
2015年大学社团工作总结
2015/04/09 职场文书
开会通知
2015/04/20 职场文书
python编程项目中线上问题排查与解决
2021/11/01 Python
IDEA 2022 Translation 未知错误 翻译文档失败
2022/04/24 Java/Android