js+div实现图片滚动效果代码


Posted in Javascript onFebruary 10, 2014

横向
<div id=demo style="overflow:hidden;width:200px;border:2px solid #e0e0e0;padding:2px;" onmouseover="stopscroll();"

onmouseout="doscroll()">
<div id="demo1" style="white-space:nowrap;padding:0;">
<a href="javascript:alert('发表新贴');"><img src="图片URL" height=20 width=104

border=0></a>
<a href="javascript:alert('发表回复');"><img src="图片URL" height=20 width=104

border=0></a>
</div>
</div>
<!--滚动的javascript-->
<script>
var t=demo.scrollWidth
demo1.innerHTML+=demo1.innerHTML
function doMarquee()
{
demo.scrollLeft=demo.scrollLeft<demo.scrollWidth-demo.offsetWidth?demo.scrollLeft+1:t-demo.offsetWidth
}
function doscroll()
{
   sc=setInterval(doMarquee,20)
}
function stopscroll()
{
   clearInterval(sc)
}
doscroll()
</script>
<!--滚动的javascript结束-->

纵向
<div id="demo" style="height:110px; overflow:hidden ">
<div id="demo1">
<a href="javascript:alert('发表新贴');"><img src="图片URL" height=20 width=104

border=0></a>
<a href="javascript:alert('发表回复');"><img src="图片URL" height=20 width=104

border=0></a>
</div><div id="demo2"></div>
<!--滚动的javascript-->
<script>
var speed=100
demo2.innerHTML=demo1.innerHTML
function Marquees(){
if(demo2.offsetTop-demo.scrollTop<=0)
demo.scrollTop-=demo1.offsetHeight
else{
demo.scrollTop++
}
}
var MyMars=setInterval(Marquees,speed)
demo.onmouseover=function() { clearInterval(MyMars) }
demo.onmouseout=function() { MyMars=setInterval(Marquees,speed) }
zlselect('6');
</script><!--滚动的javascript结束-->
</div>

Javascript 相关文章推荐
js tab效果的实现代码
Dec 26 Javascript
JS/jQuery实现默认显示部分文字点击按钮显示全部内容
May 13 Javascript
js写出遮罩层登陆框和对联广告并自动跟随滚动条滚动
Apr 29 Javascript
浅谈JS日期(Date)处理函数
Dec 07 Javascript
JS实现超炫网页烟花动画效果的方法
Mar 02 Javascript
jQuery实现微信长按识别二维码功能
Aug 26 Javascript
jquery精度计算代码 jquery指定精确小数位
Feb 06 Javascript
详解vue.js全局组件和局部组件
Apr 10 Javascript
vue返回上一页面时回到原先滚动的位置的方法
Dec 20 Javascript
layer弹出层自定义提交取消按钮的例子
Sep 10 Javascript
LayUI switch 开关监听 获取属性值、更改状态的方法
Sep 21 Javascript
vue 子组件修改data或调用操作
Aug 07 Javascript
javascript实现数字验证码的简单实例
Feb 10 #Javascript
javascript实现数字+字母验证码的简单实例
Feb 10 #Javascript
Jquery获取元素的父容器对象示例代码
Feb 10 #Javascript
javascript类型转换使用方法
Feb 08 #Javascript
jquery和雅虎的yql服务实现天气预报服务示例
Feb 08 #Javascript
遍历DOM对象内的元素属性示例代码
Feb 08 #Javascript
JS的参数传递示例介绍
Feb 08 #Javascript
You might like
《星际争霸重制版》兵种对比图鉴
2020/03/02 星际争霸
php Rename 更改文件、文件夹名称
2011/05/24 PHP
如何在Laravel之外使用illuminate组件详解
2020/09/20 PHP
一个很酷的拖动层的js类,兼容IE及Firefox
2009/06/23 Javascript
JQuery 学习笔记 element属性控制
2009/07/23 Javascript
Javascript的闭包
2009/12/31 Javascript
理解JSON:3分钟课程
2011/10/28 Javascript
javascript 循环调用示例介绍
2013/11/20 Javascript
jquery easyui使用心得
2014/07/07 Javascript
javascript正则表达式之search()用法实例
2015/01/19 Javascript
使用jquery制作弹出框效果
2015/04/03 Javascript
Bootstrap每天必学之导航组件
2016/04/25 Javascript
Vuex之理解state的用法实例
2017/04/19 Javascript
微信小程序实现动态获取元素宽高的方法分析
2018/12/10 Javascript
JS中的算法与数据结构之二叉查找树(Binary Sort Tree)实例详解
2019/08/16 Javascript
jquery树形插件zTree高级使用详解
2019/08/16 jQuery
element form 校验数组每一项实例代码
2019/10/10 Javascript
python中的多线程实例教程
2014/08/27 Python
在python环境下运用kafka对数据进行实时传输的方法
2018/12/27 Python
python requests 库请求带有文件参数的接口实例
2019/01/03 Python
nohup后台启动Python脚本,log不刷新的解决方法
2019/01/14 Python
python实现雪花飘落效果实例讲解
2019/06/18 Python
python opencv调用笔记本摄像头
2019/08/28 Python
css3一个简易的 LED 数字时钟实现方法
2020/01/15 HTML / CSS
html5教你做炫酷的碎片式图片切换 (canvas)
2017/07/28 HTML / CSS
Soft Cotton捷克:来自爱琴海棉花的浴袍
2017/02/01 全球购物
The Hut英国:英国领先的豪华在线百货商店
2019/07/26 全球购物
计算机求职信
2013/12/01 职场文书
初中生期末考试的自我评价
2013/12/17 职场文书
揠苗助长教学反思
2014/02/04 职场文书
争先创优演讲稿
2014/09/15 职场文书
财务工作检讨书
2014/10/29 职场文书
个人总结与自我评价2015
2015/03/11 职场文书
医院岗前培训心得体会
2016/01/08 职场文书
浅谈Python响应式类库RxPy
2021/06/14 Python
基于PostgreSQL/openGauss 的分布式数据库解决方案
2021/12/06 PostgreSQL