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调用XML制作连动下拉列表框
Jun 25 Javascript
Open and Print a Word Document
Jun 15 Javascript
javascript YUI 读码日记之 YAHOO.util.Dom - Part.4
Mar 22 Javascript
Js 中debug方式
Feb 07 Javascript
Javascript中的isNaN函数使用说明
Nov 10 Javascript
js函数调用常用方法详解
Dec 03 Javascript
关于IE BUG与字符串截取substr的解决办法
Apr 10 Javascript
jQuery窗口、文档、网页各种高度的精确理解
Jul 02 Javascript
JavaScript性能优化之小知识总结
Nov 20 Javascript
javascript常用的设计模式
Feb 09 Javascript
laydate时间日历插件使用方法详解
Nov 14 Javascript
基于Vue中使用节流Lodash throttle详解
Oct 30 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/01/28 PHP
php 获取今日、昨日、上周、本月的起始时间戳和结束时间戳的方法
2013/09/28 PHP
PHP中empty,isset,is_null用法和区别
2017/02/19 PHP
TextArea设置MaxLength属性最大输入值的js代码
2012/12/21 Javascript
JS 两个字符串时间的天数差计算
2013/08/25 Javascript
jQuery实现径向动画菜单效果
2015/07/17 Javascript
通用javascript代码判断版本号是否在版本范围之间
2015/11/29 Javascript
关于动态生成dom绑定事件失效的原因及解决方法
2016/08/06 Javascript
微信小程序 教程之小程序配置
2016/10/17 Javascript
学好js,这些js函数概念一定要知道【推荐】
2017/01/19 Javascript
基于webpack4.X从零搭建React脚手架的方法步骤
2018/12/23 Javascript
JavaScript如何获取一个元素的样式信息
2019/07/29 Javascript
Vue 自定义指令实现一键 Copy功能
2019/09/16 Javascript
python之模拟鼠标键盘动作具体实现
2013/12/30 Python
详解Python中的strftime()方法的使用
2015/05/22 Python
启动targetcli时遇到错误解决办法
2017/10/26 Python
用Python下载一个网页保存为本地的HTML文件实例
2018/05/21 Python
基于Django与ajax之间的json传输方法
2018/05/29 Python
浅谈python中对于json写入txt文件的编码问题
2018/06/07 Python
使用pandas批量处理矢量化字符串的实例讲解
2018/07/10 Python
Python实现定时自动关闭的tkinter窗口方法
2019/02/16 Python
pandas修改DataFrame列名的实现方法
2019/02/22 Python
Python Flask 搭建微信小程序后台详解
2019/05/06 Python
基于python的itchat库实现微信聊天机器人(推荐)
2019/10/29 Python
Python上下文管理器全实例详解
2019/11/12 Python
无惧面试,带你搞懂python 装饰器
2020/08/17 Python
Abe’s of Maine:自1979以来销售相机和电子产品
2016/11/21 全球购物
存储过程的优缺点是什么
2015/01/10 面试题
简历中的自我评价怎么写
2014/01/29 职场文书
大学生优秀团员事迹材料
2014/01/30 职场文书
升职演讲稿范文
2014/05/23 职场文书
一份关于丢失公司财物的检讨书
2014/09/19 职场文书
学校总务处领导干部个人对照检查材料思想汇报
2014/10/06 职场文书
健康状况证明模板
2014/10/23 职场文书
旗帜观后感
2015/06/08 职场文书
工作建议书范文
2019/07/08 职场文书