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父窗口控制只弹出一个子窗口
Apr 10 Javascript
静态页面下用javascript操作ACCESS数据库(读增改删)的代码
May 14 Javascript
Javascript 解疑
Nov 11 Javascript
Javascript实现页面跳转的几种方式分享
Oct 26 Javascript
JavaScript跨浏览器获取页面中相同class节点的方法
Mar 03 Javascript
javascript中一些util方法汇总
Jun 10 Javascript
JavaScript中setMonth()方法的使用详解
Jun 11 Javascript
全面解析Bootstrap表单使用方法(表单按钮)
Nov 24 Javascript
简单的jQuery banner图片轮播实例代码
Mar 04 Javascript
AngularJS ng-bind-html 指令详解及实例代码
Jul 30 Javascript
vue.js全局API之nextTick全面解析
Jul 07 Javascript
React Native使用Modal自定义分享界面的示例代码
Oct 31 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数据库万能引擎类adodb配置使用以及实例集锦
2014/06/12 PHP
Centos6.5和Centos7 php环境搭建方法
2016/05/27 PHP
新浪的图片新闻效果
2007/01/13 Javascript
javascript-TreeView父子联动效果保持节点状态一致
2007/08/12 Javascript
jquery文字上下滚动的实现方法
2013/03/22 Javascript
JS随机生成不重复数据的实例方法
2013/07/17 Javascript
浅谈 jQuery 事件源码定位问题
2014/06/18 Javascript
jquery实现Slide Out Navigation滑出式菜单效果代码
2015/09/07 Javascript
JavaScript程序设计之JS调试
2015/12/09 Javascript
jQuery Html控件基本操作(日常收集整理)
2016/03/11 Javascript
jQuery实现内容定时切换效果完整实例
2016/04/06 Javascript
jQuery获取多种input值的简单实现方法
2016/06/20 Javascript
第九篇Bootstrap导航菜单创建步骤详解
2016/06/21 Javascript
js实现文字向上轮播功能
2017/01/13 Javascript
在vue中使用css modules替代scroped的方法
2018/03/10 Javascript
JavaScript实现旋转木马轮播图
2020/03/16 Javascript
[01:10:49]Secret vs VGJ.S 2018国际邀请赛淘汰赛BO3 第二场 8.24
2018/08/25 DOTA
python使用rsa加密算法模块模拟新浪微博登录
2014/01/22 Python
Python编程中的反模式实例分析
2014/12/08 Python
基于python指定包的安装路径方法
2018/10/27 Python
详解分布式任务队列Celery使用说明
2018/11/29 Python
pandas删除行删除列增加行增加列的实现
2019/07/06 Python
Django项目之Elasticsearch搜索引擎的实例
2019/08/21 Python
Django框架获取form表单数据方式总结
2020/04/22 Python
详解Python中import机制
2020/09/11 Python
python中使用np.delete()的实例方法
2021/02/01 Python
html5画布旋转效果示例
2014/01/27 HTML / CSS
do you have any Best Practice for testing
2016/06/04 面试题
表彰先进的通报
2014/01/31 职场文书
生活小常识广播稿
2014/09/16 职场文书
2014县委书记四风对照检查材料思想汇报
2014/09/21 职场文书
学校教师培训工作总结
2015/10/14 职场文书
《七月的天山》教学反思
2016/02/19 职场文书
《植物妈妈有办法》教学反思
2016/02/23 职场文书
python调试工具Birdseye的使用教程
2021/05/25 Python
微信小程序中使用vant框架的具体步骤
2022/02/18 Javascript