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 相关文章推荐
jQuery 全选效果实现代码
Mar 23 Javascript
JS window.opener返回父页面的应用
Oct 24 Javascript
jQuery 常见学习网站与参考书
Nov 09 Javascript
jquery命令汇总,方便使用jquery的朋友
Jun 26 Javascript
JavaScript动态创建link标签到head里的方法
Dec 22 Javascript
javascript html5 canvas实现可拖动省份的中国地图
Mar 11 Javascript
AngularJS过滤器详解及示例代码
Aug 16 Javascript
jquery动态赋值id与动态取id方法示例
Aug 21 jQuery
js+css实现红包雨效果
Jul 12 Javascript
微信小程序实现联动选择器
Feb 15 Javascript
一文读懂ES7中的javascript修饰器
May 06 Javascript
如何自定义微信小程序tabbar上边框的颜色
Jul 09 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通过获取头信息判断图片类型的方法
2015/06/26 PHP
PHP发送AT指令实例代码
2016/05/26 PHP
PHP批斗大会之缺失的异常详解
2019/07/09 PHP
PHP实现字母数字混合验证码功能
2019/07/11 PHP
Javascript 布尔型分析
2008/12/22 Javascript
使用js+jquery实现无限极联动
2013/05/23 Javascript
jquery text(),val(),html()方法区别总结
2013/11/04 Javascript
jQuery操作JSON的CRUD用法实例
2015/02/25 Javascript
jQuery中extend()和fn.extend()方法详解
2015/06/03 Javascript
AngularJS 工作原理详解
2016/08/18 Javascript
jQuery progressbar通过Ajax请求实现后台进度实时功能
2016/10/11 Javascript
Vue.js实现移动端短信验证码功能
2017/03/29 Javascript
初学者AngularJS的环境搭建过程
2017/10/27 Javascript
详解解决使用axios发送json后台接收不到的问题
2018/06/27 Javascript
jQuery操作事件完整实例分析
2020/01/10 jQuery
浅析JavaScript预编译和暗示全局变量
2020/09/03 Javascript
[05:31]干嘛呢兄弟!DOTA2 TI9语音轮盘部分出处
2019/05/14 DOTA
跟老齐学Python之开始真正编程
2014/09/12 Python
python爬虫实现中英翻译词典
2019/06/25 Python
html5使用canvas实现弹幕功能示例
2017/09/11 HTML / CSS
XD健身器材:Kevlar球、Crossfit健身球
2019/03/26 全球购物
PHP面试题集
2016/12/18 面试题
总经理岗位职责
2013/11/09 职场文书
校友会欢迎辞
2014/01/13 职场文书
店长职务说明书
2014/02/04 职场文书
银行求职自荐信
2014/06/30 职场文书
学习礼仪心得体会
2014/09/01 职场文书
公司租房协议书范本
2014/10/08 职场文书
群众路线批评与自我批评发言稿
2014/10/16 职场文书
2014年党的群众路线活动个人整改措施
2014/10/28 职场文书
五年级上册复习计划
2015/01/19 职场文书
幼儿园大班开学寄语(2015秋季)
2015/05/27 职场文书
创业计划书之健康营养产业
2019/10/15 职场文书
python3中apply函数和lambda函数的使用详解
2022/02/28 Python
SONY AN-LP1 短波有源天线放大器图
2022/04/05 无线电
MySQL 语句执行顺序举例解析
2022/06/05 MySQL