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 相关文章推荐
JS小框架 fly javascript framework
Nov 26 Javascript
js将字符串转成正则表达式的实现方法
Nov 13 Javascript
jquery实现的鼠标下拉滚动置顶效果
Jul 24 Javascript
js与C#进行时间戳转换
Nov 14 Javascript
node.js中的events.EventEmitter.listenerCount方法使用说明
Dec 08 Javascript
jQuery插件Zclip实现完美兼容个浏览器点击复制内容到剪贴板
Apr 30 Javascript
基于JavaScript实现鼠标悬浮弹出跟随鼠标移动的带箭头的信息层
Jan 18 Javascript
Vue的transition-group与Virtual Dom Diff算法的使用
Dec 09 Javascript
vue+element-ui表格封装tag标签使用插槽
Jun 18 Javascript
JQuery基于FormData异步提交数据文件
Sep 01 jQuery
Vue3 响应式侦听与计算的实现
Nov 11 Javascript
idea编译器vue缩进报错问题场景分析
Jul 04 Vue.js
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生成静态HTML速度快类库
2007/03/18 PHP
php表单转换textarea换行符的方法
2010/09/10 PHP
PHP静态调用非静态方法的应用分析
2013/05/02 PHP
apache配置虚拟主机的方法详解
2013/06/17 PHP
php数组添加与删除单元的常用函数实例分析
2015/02/16 PHP
PHP常用操作类之通信数据封装类的实现
2017/07/16 PHP
用JS判断IE版本的代码 超管用!
2011/08/09 Javascript
javascript当中的代码嗅探扩展原生对象和原型(prototype)
2013/01/11 Javascript
JS按字节截取字符长度实例
2013/11/20 Javascript
JS和JQUERY获取页面大小,滚动条位置,元素位置(示例代码)
2013/12/14 Javascript
jquery实现增加删除行的方法
2015/02/03 Javascript
基于jquery实现的自动补全功能
2015/03/12 Javascript
JS实现点击上移下移LI行数据的方法
2015/08/05 Javascript
js实现的简练高效拖拽功能示例
2016/12/21 Javascript
微信小程序上滑加载下拉刷新(onscrollLower)分批加载数据(二)
2017/05/11 Javascript
微信公众号H5支付接口调用方法
2019/01/10 Javascript
改进 JavaScript 和 Rust 的互操作性并深入认识 wasm-bindgen 组件
2019/07/13 Javascript
微信小程序使用echarts获取数据并生成折线图
2019/10/16 Javascript
使用PreloadJS加载图片资源的基础方法详解
2020/02/03 Javascript
vue实现导航菜单和编辑文本的示例代码
2020/07/04 Javascript
[53:10]Secret vs Pain 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
[01:05:59]Mineski vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.22
2019/09/05 DOTA
Python实现的一个自动售饮料程序代码分享
2014/08/25 Python
python中map、any、all函数用法分析
2015/04/21 Python
python中numpy基础学习及进行数组和矢量计算
2017/02/12 Python
详解python的ORM中Pony用法
2018/02/09 Python
对Python subprocess.Popen子进程管道阻塞详解
2018/10/29 Python
详解python做UI界面的方法
2019/02/27 Python
Python求离散序列导数的示例
2019/07/10 Python
pyqt5中动画的使用详解
2020/04/01 Python
Python实现邮件发送的详细设置方法(遇到问题)
2021/01/18 Python
澳大利亚免息网上购物:Shop Zero
2016/09/17 全球购物
德国网上药房:Apotal
2017/04/04 全球购物
签订劳动合同通知书
2015/04/16 职场文书
2015年电气技术员工作总结
2015/07/24 职场文书
Python数据分析之pandas函数详解
2021/04/21 Python