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 相关文章推荐
Javascript Cookie读写删除操作的函数
Mar 02 Javascript
使用javascript实现雪花飘落的效果
Jan 13 Javascript
浅谈jQuery.easyui的datebox格式化时间
Jun 25 Javascript
JavaScript获取当前运行脚本文件所在目录的方法
Feb 03 Javascript
jQuery ajax请求返回list数据动态生成input标签,并把list数据赋值到input标签
Mar 29 Javascript
JQuery点击行tr实现checkBox选中的简单实例
May 26 Javascript
JS获取随机数和时间转换的简单实例
Jul 10 Javascript
js图片切换具体实现代码
Oct 13 Javascript
ReactNative列表ListView的用法
Aug 02 Javascript
利用Decorator如何控制Koa路由详解
Jun 26 Javascript
解决在layer.open中使用时间控件laydate失败的问题
Sep 11 Javascript
vue自动添加浏览器兼容前后缀操作
Aug 13 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
php文件上传的简单实例
2013/10/19 PHP
ThinkPHP中的系统常量和预定义常量集合
2014/07/01 PHP
PHP模板引擎smarty详细介绍
2015/05/26 PHP
js 创建快捷方式的代码(fso)
2010/11/19 Javascript
Jquery中显示隐藏的实现代码分析
2011/07/26 Javascript
javascript实现跨域的方法汇总
2015/06/25 Javascript
非常实用的12个jquery代码片段
2015/11/02 Javascript
Nodejs的express使用教程
2015/11/23 NodeJs
Knockoutjs 学习系列(二)花式捆绑
2016/06/07 Javascript
jQuery中$.grep() 过滤函数 数组过滤
2016/11/22 Javascript
javascript 中关于array的常用方法详解
2017/05/05 Javascript
vue-cli+webpack在生成的项目中使用bootstrap实例代码
2017/05/26 Javascript
vue中将网页打印成pdf实例代码
2017/06/15 Javascript
jQuery:unbind方法的使用详解
2017/08/14 jQuery
通过button将form表单的数据提交到action层的实例
2017/09/08 Javascript
seajs中最常用的7个功能、配置示例
2017/10/10 Javascript
webpack组织模块打包Library的原理及实现
2018/03/10 Javascript
详解VUE中常用的几种import(模块、文件)引入方式
2018/07/03 Javascript
vue使用map代替Aarry数组循环遍历的方法
2020/04/30 Javascript
[01:20:37]FNATIC vs NIP 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
python中合并两个文本文件并按照姓名首字母排序的例子
2014/04/25 Python
Python实现的字典值比较功能示例
2018/01/08 Python
对TensorFlow中的variables_to_restore函数详解
2018/07/30 Python
深入了解Python在HDA中的应用
2019/09/05 Python
pytorch中tensor张量数据类型的转化方式
2019/12/31 Python
python opencv如何实现图片绘制
2020/01/19 Python
HTML5 canvas基本绘图之填充样式实现
2016/06/27 HTML / CSS
英国最大的线上保健品零售商之一:Vitamin Planet
2016/12/01 全球购物
Foot Locker德国官方网站:美国运动服和鞋类零售商
2018/11/01 全球购物
HomeAway英国:全球领先的度假租赁在线市场
2020/02/03 全球购物
《李时珍夜宿古寺》教学反思
2014/04/09 职场文书
学用政策心得体会
2014/09/10 职场文书
导游词开场白
2015/01/31 职场文书
2015年“世界无车日”活动方案
2015/05/06 职场文书
同事离别感言
2015/08/04 职场文书
爱国之歌(8首)
2019/09/29 职场文书