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实际应用:innerHTMl和确认提示的使用
Jun 22 Javascript
JavaScript打开word文档的实现代码(c#)
Apr 16 Javascript
基于jQuery判断两个元素是否有重叠部分的代码
Jul 25 Javascript
使用js实现一个可编辑的select下拉列表
Feb 20 Javascript
jQuery链式操作实例分析
Nov 16 Javascript
Zero Clipboard实现浏览器复制到剪贴板的方法(多个复制按钮)
Mar 24 Javascript
AngularJS Bootstrap详细介绍及实例代码
Jul 28 Javascript
妙用Bootstrap的 popover插件实现校验表单提示功能
Aug 29 Javascript
JavaScript中String对象的方法介绍
Jan 04 Javascript
mpvue中配置vuex并持久化到本地Storage图文教程解析
Mar 15 Javascript
MockJs结合json-server模拟后台数据
Aug 26 Javascript
原生JS实现汇率转换功能代码实例
May 13 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者的疑难问答(2)
2006/10/09 PHP
php实现以只读方式打开文件的方法
2015/03/16 PHP
apache和PHP如何整合在一起
2015/10/12 PHP
Laravel框架实现定时发布任务的方法
2018/08/16 PHP
TP5框架实现自定义分页样式的方法示例
2020/04/05 PHP
js 实现无缝滚动 兼容IE和FF
2009/07/15 Javascript
IE6,IE7下js动态加载图片不显示错误
2010/07/17 Javascript
JQuery for与each性能比较分析
2013/05/14 Javascript
浮动的div自适应居中显示的js代码
2013/12/23 Javascript
当滚动条滚动到页面底部自动加载增加内容的js代码
2014/05/13 Javascript
js实现window.open不被拦截的解决方法汇总
2014/10/30 Javascript
javascript实现youku的视频代码自适应宽度
2015/05/25 Javascript
js多功能分页组件layPage使用方法详解
2016/05/19 Javascript
jQuery Ajax请求后台数据并在前台接收
2016/12/10 Javascript
原生JS实现ajax与ajax的跨域请求实例
2017/12/01 Javascript
谈谈JS中的!!
2017/12/07 Javascript
Vue2.0学习之详解Vue 组件及父子组件通信
2017/12/12 Javascript
vue实现登录后页面跳转到之前页面
2018/01/07 Javascript
ES6中let 和 const 的新特性
2018/09/03 Javascript
js canvas实现5张图片合成一张图片
2019/07/15 Javascript
Vue.js路由实现选项卡简单实例
2019/07/24 Javascript
python实现的一个火车票转让信息采集器
2014/07/09 Python
如何用itertools解决无序排列组合的问题
2017/05/18 Python
Django内容增加富文本功能的实例
2017/10/17 Python
Python实战小程序利用matplotlib模块画图代码分享
2017/12/09 Python
dataframe 按条件替换某一列中的值方法
2019/01/29 Python
python实现单链表的方法示例
2019/09/03 Python
python GUI库图形界面开发之PyQt5控件QTableWidget详细使用方法与属性
2020/02/25 Python
Manjaro、pip、conda更换国内源的方法
2020/11/17 Python
美国顶级品牌男士大码服装店:DXL
2017/08/30 全球购物
见习期自我鉴定
2013/11/07 职场文书
信用卡结清证明怎么写
2014/09/13 职场文书
法制教育观后感
2015/06/17 职场文书
责任书格式
2019/04/18 职场文书
python 中的@运算符使用
2021/05/26 Python
分析SQL窗口函数之取值窗口函数
2022/04/21 Oracle