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 学习小结(适合新手参考)
Jul 30 Javascript
统计出现最多的字符次数的js代码
Dec 03 Javascript
在iframe里的页面编写js,实现在父窗口上创建动画效果展开和收缩的div(不变动iframe父窗口代码)
Dec 20 Javascript
js操作CheckBoxList实现全选/反选(在客服端完成)
Feb 02 Javascript
JavaScript面向对象编程入门教程
Apr 16 Javascript
jQuery中addClass()方法用法实例
Jan 05 Javascript
使用ReactJS实现tab页切换、菜单栏切换、手风琴切换和进度条效果
Oct 17 Javascript
js实现放大镜特效
May 18 Javascript
AngularJS遍历获取数组元素的方法示例
Nov 11 Javascript
详解Angular如何正确的操作DOM
Jul 06 Javascript
JS阻止事件冒泡的方法详解
Aug 26 Javascript
vue-calendar-component 封装多日期选择组件的实例代码
Dec 04 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
一个用于mysql的数据库抽象层函数库
2006/10/09 PHP
PHP教程 变量定义
2009/10/23 PHP
php调用mysql存储过程实例分析
2014/12/29 PHP
常用PHP封装分页工具类
2017/01/14 PHP
动态表单验证的操作方法和TP框架里面的ajax表单验证
2017/07/19 PHP
PHP高并发和大流量解决方案整理
2021/03/09 PHP
JS 判断代码全收集
2009/04/28 Javascript
JQuery+JS实现仿百度搜索结果中关键字变色效果
2011/08/02 Javascript
JQuery文字列表向上滚动的代码
2013/11/13 Javascript
js读写json文件实例代码
2014/10/21 Javascript
自己动手写的jquery分页控件(非常简单实用)
2015/10/28 Javascript
jQuery实现的placeholder效果完整实例
2016/08/02 Javascript
javascript对浅拷贝和深拷贝的详解
2016/10/14 Javascript
微信小程序 图片宽高自适应详解
2017/05/11 Javascript
浅谈node中的exports与module.exports的关系
2017/08/01 Javascript
vue2.0实现移动端的输入框实时检索更新列表功能
2018/05/08 Javascript
vue2 设置router-view默认路径的实例
2018/09/20 Javascript
javascript设计模式 ? 单例模式原理与应用实例分析
2020/04/09 Javascript
vue基于better-scroll实现左右联动滑动页面
2020/06/30 Javascript
javascript代码实现简易计算器
2021/01/25 Javascript
[03:57]DOTA2英雄梦之声_第03期_幻影刺客
2014/06/21 DOTA
在Python中操作字典之update()方法的使用
2015/05/22 Python
Tornado协程在python2.7如何返回值(实现方法)
2017/06/22 Python
Python爬虫实例扒取2345天气预报
2018/03/04 Python
django 使用 PIL 压缩图片的例子
2019/08/16 Python
用openCV和Python 实现图片对比,并标识出不同点的方式
2019/12/19 Python
CSS3 中filter(滤镜)属性使用详解
2020/04/07 HTML / CSS
HTML5安全介绍之内容安全策略(CSP)简介
2012/07/10 HTML / CSS
为什么如下的代码int a=100,b=100;long int c=a * b;不能工作
2013/11/29 面试题
机电一体化专业应届生求职信
2013/11/27 职场文书
车祸赔偿收入证明
2014/01/09 职场文书
运动会稿件300字
2014/02/14 职场文书
投资合作协议书
2014/04/17 职场文书
祖国在我心中演讲稿600字
2014/05/04 职场文书
2014年除四害工作总结
2014/12/06 职场文书
深度学习详解之初试机器学习
2021/04/14 Python