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 相关文章推荐
ExtJS 2.0实用简明教程 之获得ExtJS
Apr 29 Javascript
基于jquery的拖动布局插件
Nov 25 Javascript
跨浏览器的事件对象介绍
Jun 27 Javascript
将list转换为json失败的原因
Dec 17 Javascript
深入理解JavaScript中的对象
Jun 04 Javascript
js实现文字在按钮上滚动的方法
Aug 20 Javascript
解析JavaScript面向对象概念中的Object类型与作用域
May 10 Javascript
Javascript必知必会(四)js类型转换
Jun 08 Javascript
bootstrap快速制作后台界面
Dec 05 Javascript
JavaScript简单拖拽效果(1)
May 17 Javascript
angularjs实现简单的购物车功能
Sep 21 Javascript
vue-cli监听组件加载完成的方法
Sep 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
Sony CFR 320 修复改造
2020/03/14 无线电
PHP Session_Regenerate_ID函数双释放内存破坏漏洞
2011/01/27 PHP
php生成随机数的三种方法
2014/09/10 PHP
详解HTTP Cookie状态管理机制
2016/01/14 PHP
jqPlot Option配置对象详解
2009/07/25 Javascript
IE6,IE7,IE8下使用Javascript记录光标选中范围(已补全)
2011/08/28 Javascript
认识Knockout及如何使用Knockout绑定上下文
2015/12/25 Javascript
js与jQuery实现checkbox复选框全选/全不选的方法
2016/01/05 Javascript
jQuery实现的简单拖拽功能示例【测试可用】
2018/08/14 jQuery
Egg.js 中 AJax 上传文件获取参数的方法
2018/10/10 Javascript
JS实现audio音频剪裁剪切复制播放与上传(步骤详解)
2020/07/28 Javascript
微信小程序入门之指南针
2020/10/22 Javascript
python发送邮件功能实现代码
2016/07/15 Python
Python 数据结构之旋转链表
2017/02/25 Python
解读! Python在人工智能中的作用
2017/11/14 Python
python微信跳一跳系列之自动计算跳一跳距离
2018/02/26 Python
对python pandas读取剪贴板内容的方法详解
2019/01/24 Python
Python3中exp()函数用法分析
2019/02/19 Python
使用 Python 清理收藏夹里已失效的网站
2019/12/03 Python
Python猜数字算法题详解
2020/03/01 Python
Python如何使用PIL Image制作GIF图片
2020/05/16 Python
Pandas缺失值2种处理方式代码实例
2020/06/13 Python
python 怎样进行内存管理
2020/11/10 Python
python线程优先级队列知识点总结
2021/02/28 Python
Css3新特性应用之视觉效果实例
2016/12/12 HTML / CSS
AmazeUI 缩略图的实现示例
2020/08/18 HTML / CSS
医疗保健专业人士购物网站:Scrubs & Beyond
2017/02/08 全球购物
英国老牌潮鞋店:Offspring
2019/08/19 全球购物
创意爱尔兰礼物:Creative Irish Gifts
2020/01/29 全球购物
个人求职简历的自我评价
2013/10/19 职场文书
坚守艰苦奋斗精神坚决反对享乐主义整改措施
2014/09/17 职场文书
简易离婚协议书范本
2014/10/24 职场文书
功夫熊猫观后感
2015/06/10 职场文书
2016年万圣节家长开放日活动总结
2016/04/05 职场文书
家电创业计划书
2019/08/05 职场文书
python三子棋游戏
2022/05/04 Python