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 相关文章推荐
List Information About the Binary Files Used by an Application
Jun 18 Javascript
比较简单实用的使用正则三种版本的js去空格处理方法
Nov 18 Javascript
JQury slideToggle闪烁问题及解决办法
Jul 05 Javascript
获取内联和链接中的样式(js代码)
Apr 11 Javascript
地址栏传递中文参数乱码在js里用escape转码
Aug 28 Javascript
JS实现鼠标点击展开或隐藏表格行的方法
Mar 03 Javascript
jQuery简单实现日历的方法
May 04 Javascript
js图片卷帘门导航菜单特效代码分享
Sep 10 Javascript
基于JS实现textarea中获取动态剩余字数的方法
May 25 Javascript
JS基于正则截取替换特定字符之间字符串操作示例
Feb 03 Javascript
详解AngularJS1.6版本中ui-router路由中/#!/的解决方法
May 22 Javascript
用node撸一个监测复联4开售短信提醒的实现代码
Apr 10 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
Terran魔法科技
2020/03/14 星际争霸
PHP PDO数据库操作预处理与注意事项
2019/03/16 PHP
php 自定义函数实现将数据 以excel 表格形式导出示例
2019/11/13 PHP
写出高效jquery代码的19条指南
2014/03/19 Javascript
JavaScript charCodeAt方法入门实例(用于取得指定位置字符的Unicode编码)
2014/10/17 Javascript
jQuery中innerWidth()方法用法实例
2015/01/19 Javascript
javascript实现获取浏览器版本、操作系统类型
2015/01/29 Javascript
通过node-mysql搭建Windows+Node.js+MySQL环境的教程
2016/03/01 Javascript
CascadeView级联组件实现思路详解(分离思想和单链表)
2016/04/12 Javascript
html5 canvas 详细使用教程
2017/01/20 Javascript
JS简单生成随机数(随机密码)的方法
2017/05/11 Javascript
JS基于正则表达式实现的密码强度验证功能示例
2017/09/21 Javascript
浅谈React Native Flexbox布局(小结)
2018/01/08 Javascript
jquery 获取索引值在一定范围的列表方法
2018/01/25 jQuery
优雅的在React项目中使用Redux的方法
2018/11/10 Javascript
基于jquery实现九宫格拼图小游戏
2018/11/30 jQuery
从0到1构建vueSSR项目之路由的构建
2019/03/07 Javascript
微信小程序实现简单的select下拉框
2020/11/23 Javascript
用Python编写一个简单的FUSE文件系统的教程
2015/04/02 Python
Python编程中实现迭代器的一些技巧小结
2016/06/21 Python
python3.4用函数操作mysql5.7数据库
2017/06/23 Python
python利用urllib实现爬取京东网站商品图片的爬虫实例
2017/08/24 Python
在Pycharm中将pyinstaller加入External Tools的方法
2019/01/16 Python
Python OpenCV利用笔记本摄像头实现人脸检测
2020/08/20 Python
Python matplotlib绘制饼状图功能示例
2019/09/10 Python
numpy.linalg.eig() 计算矩阵特征向量方式
2019/11/29 Python
python输出结果刷新及进度条的实现操作
2020/07/13 Python
html5中canvas图表实现柱状图的示例
2017/11/13 HTML / CSS
塑料制成的可水洗的编织平底鞋和鞋子:Rothy’s
2018/09/16 全球购物
小学教师自我鉴定范文
2014/03/20 职场文书
民族团结先进个人事迹材料
2014/06/02 职场文书
乒乓球比赛通知
2015/04/27 职场文书
预备党员考察意见范文
2015/06/01 职场文书
pytorch 中nn.Dropout的使用说明
2021/05/20 Python
使用goaccess分析nginx日志的详细方法
2021/07/09 Servers
Redis安装使用RedisJSON模块的方法
2022/03/23 Redis