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 相关文章推荐
javscript对象原型的一些看法
Sep 19 Javascript
jquery 实现表单验证功能代码(简洁)
Jul 03 Javascript
JavaScript 用Node.js写Shell脚本[译]
Sep 20 Javascript
javascript中的=等号个数问题两个跟三个有什么区别
Oct 23 Javascript
js判断某个方法是否存在实例代码
Jan 10 Javascript
jQuery中offsetParent()方法用法实例
Jan 19 Javascript
浅析JS操作DOM的一些常用方法
May 13 Javascript
js es6系列教程 - 基于new.target属性与es5改造es6的类语法
Sep 02 Javascript
JavaScript静态作用域和动态作用域实例详解
Jun 17 Javascript
JavaScript 双向链表操作实例分析【创建、增加、查找、删除等】
Apr 28 Javascript
Js on及addEventListener原理用法区别解析
Jul 11 Javascript
js基于div丝滑实现贝塞尔曲线
Sep 23 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 面向对象程序设计(oop)学习笔记(一) - 抽象类、对象接口、instanceof 和契约式编程
2014/06/12 PHP
php调用shell的方法
2014/11/05 PHP
php简单实现快速排序的方法
2015/04/04 PHP
PHP的APC模块实现上传进度条
2015/10/27 PHP
JS之小练习代码
2008/10/12 Javascript
一些常用的JS功能函数(2009-06-04更新)
2009/06/04 Javascript
JavaScript将字符串转换为整数的方法
2015/04/14 Javascript
动态加载js、css的简单实现代码
2016/05/26 Javascript
标准的js无缝滚动效果
2016/08/30 Javascript
js改变html的原有内容实现方法
2016/10/05 Javascript
详解javascript获取url信息的常见方法
2016/12/19 Javascript
jq给页面添加覆盖层遮罩的实例
2017/02/16 Javascript
JS设置随机出现2个数字的实例代码
2017/07/19 Javascript
微信小程序picker组件下拉框选择input输入框的实例
2017/09/20 Javascript
zTree 树插件实现全国五级地区点击后加载的示例
2018/02/05 Javascript
React-router4路由监听的实现
2018/08/07 Javascript
Vue插值、表达式、分隔符、指令知识小结
2018/10/12 Javascript
解决vue动态路由异步加载import组件,加载不到module的问题
2020/07/26 Javascript
使用FastCGI部署Python的Django应用的教程
2015/07/22 Python
Pandas实现数据类型转换的一些小技巧汇总
2018/05/07 Python
python mysql断开重连的实现方法
2019/07/26 Python
python3实现高效的端口扫描
2019/08/31 Python
Python求正态分布曲线下面积实例
2019/11/20 Python
python 实现 hive中类似 lateral view explode的功能示例
2020/05/18 Python
详解PyQt5中textBrowser显示print语句输出的简单方法
2020/08/07 Python
使用Python解析Chrome浏览器书签的示例
2020/11/13 Python
html+js 实现markdown编辑器效果
2019/10/23 HTML / CSS
爱尔兰灯和灯具网上商店:Lights.ie
2018/03/26 全球购物
矫正人员思想汇报
2014/01/08 职场文书
加拿大探亲邀请信
2014/01/28 职场文书
2014年教师节寄语
2014/08/11 职场文书
2014年司法所工作总结
2014/11/22 职场文书
2014高三学生考试作弊检讨书
2014/12/14 职场文书
罚款通知怎么写
2015/04/22 职场文书
2015年企业员工工作总结范文
2015/05/21 职场文书
在职证明书模板
2015/06/15 职场文书