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 相关文章推荐
键盘控制事件应用教程大全
Nov 24 Javascript
jQuery 类twitter的文本字数限制带提示效果插件
Apr 16 Javascript
HTML复选框和单选框 checkbox和radio事件介绍
Dec 12 Javascript
javascript实现yield的方法
Nov 06 Javascript
jQuery实现平滑滚动的标签分栏切换效果
Aug 28 Javascript
JS+DIV实现的卷帘效果示例
Mar 22 Javascript
jQuery实现的粘性滚动导航栏效果实例【附源码下载】
Oct 19 jQuery
利用vue + koa2 + mockjs模拟数据的方法教程
Nov 22 Javascript
JS逻辑运算符短路操作实例分析
Jul 09 Javascript
JsonServer安装及启动过程图解
Feb 28 Javascript
用vue设计一个日历表
Dec 03 Vue.js
vue-cli3.x配置全局的scss的时候报错问题及解决
Apr 30 Vue.js
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中基本符号及使用方法
2010/03/23 PHP
php数据结构 算法(PHP描述) 简单选择排序 simple selection sort
2011/08/09 PHP
解析php多线程下载远程多个文件
2013/06/25 PHP
PHP分页详细讲解(有实例)
2013/10/30 PHP
ThinkPHP视图查询详解
2014/06/30 PHP
windows7下php开发环境搭建图文教程
2015/01/06 PHP
基于ThinkPHP实现批量删除
2015/12/18 PHP
让您的菜单不离网站
2006/10/03 Javascript
node.js中的events.emitter.removeAllListeners方法使用说明
2014/12/10 Javascript
jquery实现Ctrl+Enter提交表单的方法
2015/07/21 Javascript
DIV+CSS+jQ实现省市联动可扩展
2016/06/22 Javascript
AngularJS基础 ng-switch 指令简单示例
2016/08/03 Javascript
jQuery实现表格隔行及滑动,点击时变色的方法【测试可用】
2016/08/20 Javascript
JS使用正则实现去掉字符串左右空格的方法
2016/12/27 Javascript
关于Angular2 + node接口调试的解决方案
2017/05/28 Javascript
浅谈事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流
2017/07/22 jQuery
vuejs 单文件组件.vue 文件的使用
2017/07/28 Javascript
vue 组件中添加样式不生效的解决方法
2018/07/06 Javascript
浅谈vue websocket nodeJS 进行实时通信踩到的坑
2020/09/22 NodeJs
详解Python中内置的NotImplemented类型的用法
2015/03/31 Python
python实现的二叉树定义与遍历算法实例
2017/06/30 Python
Tensorflow 训练自己的数据集将数据直接导入到内存
2018/06/19 Python
pycharm修改文件的默认打开方式的步骤
2019/07/29 Python
Pandas聚合运算和分组运算的实现示例
2019/10/17 Python
dpn网络的pytorch实现方式
2020/01/14 Python
Python datetime 如何处理时区信息
2020/09/02 Python
lookfantastic荷兰:在线购买奢华护肤、护发和化妆品
2018/11/27 全球购物
印度手工编织服装和家居用品商店:Fabindi
2019/10/07 全球购物
英智兴达软件测试笔试题
2016/10/12 面试题
毕业生实习鉴定
2013/12/11 职场文书
企业演讲稿范文
2013/12/28 职场文书
营销与策划专业求职信
2014/06/20 职场文书
开展批评与自我批评发言稿
2014/10/16 职场文书
领导欢迎词致辞
2015/01/23 职场文书
采购内勤岗位职责
2015/04/13 职场文书
2015暑假假期总结
2015/07/13 职场文书