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 相关文章推荐
Extjs改变树节点的勾选状态点击按钮将复选框去掉
Nov 14 Javascript
使用jquery选择器如何获取父级元素、同级元素、子元素
May 14 Javascript
让IE8浏览器支持function.bind()方法
Oct 16 Javascript
node.js中的http.response.writeHead方法使用说明
Dec 14 Javascript
js实现DOM走马灯特效的方法
Jan 21 Javascript
原生javascript 学习之js变量全面了解
Jul 14 Javascript
解决vue this.$forceUpdate() 处理页面刷新问题(v-for循环值刷新等)
Jul 26 Javascript
如何将HTML字符转换为DOM节点并动态添加到文档中详解
Aug 19 Javascript
小程序实现列表点赞功能
Nov 02 Javascript
vue实现倒计时获取验证码效果
Apr 17 Javascript
微信小程序完美解决scroll-view高度自适应问题的方法
Aug 08 Javascript
JavaScript中关于预编译、作用域链和闭包的理解
Mar 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读取RSS feed的代码
2008/08/01 PHP
解析php中call_user_func_array的作用
2013/06/07 PHP
php实现只保留mysql中最新1000条记录
2015/06/18 PHP
php目录拷贝实现方法
2015/07/10 PHP
PHP自定义错误用法示例
2016/09/28 PHP
php获取字符串前几位的实例(substr返回字符串的子串用法)
2017/03/08 PHP
Yii框架常见缓存应用实例小结
2019/09/09 PHP
tbody元素支持嵌套的注意方法
2007/03/24 Javascript
JavaScript 克隆数组最简单的方法
2009/02/12 Javascript
一些Javascript的IE和Firefox(火狐)兼容性的问题总结及常用例子
2009/05/21 Javascript
Jquery + Ajax调用webService实例代码(asp.net)
2010/08/27 Javascript
js处理json以及字符串的比较等常用操作
2013/09/08 Javascript
JavaScript中Cookie操作实例
2015/01/09 Javascript
jquery+html5烂漫爱心表白动画代码分享
2015/08/24 Javascript
JS实现具备延时功能的滑动门菜单效果
2015/09/17 Javascript
JavaScript setTimeout使用闭包功能实现定时打印数值
2015/12/18 Javascript
详解Vuejs2.0 如何利用proxyTable实现跨域请求
2017/08/03 Javascript
在vue项目中集成graphql(vue-ApolloClient)
2018/09/08 Javascript
vue项目中使用vue-i18n报错的解决方法
2019/01/13 Javascript
Vue实现类似Spring官网图片滑动效果方法
2019/03/01 Javascript
jQuery中DOM常见操作实例小结
2019/08/01 jQuery
VUE 自定义组件模板的方法详解
2019/08/30 Javascript
Node.js API详解之 zlib模块用法分析
2020/05/19 Javascript
使用Element的InfiniteScroll 无限滚动组件报错的解决
2020/07/27 Javascript
解决vue单页面应用打包后相对路径、绝对路径相关问题
2020/08/14 Javascript
Python二分法搜索算法实例分析
2015/05/11 Python
python itchat实现微信好友头像拼接图的示例代码
2017/08/14 Python
Python实现爬虫爬取NBA数据功能示例
2018/05/28 Python
Python3爬虫中关于Ajax分析方法的总结
2020/07/10 Python
几个SQL的面试题
2014/03/08 面试题
WEB控件可以激发服务端事件,请谈谈服务端事件是怎么发生并解释其原理?自动传回是什么?为什么要使用自动传回?
2012/02/21 面试题
婚假请假条格式及范文
2014/04/10 职场文书
市场营销专业自荐书
2014/06/10 职场文书
股指期货心得体会
2014/09/10 职场文书
职称评定个人总结
2015/03/05 职场文书
2016年基层党支部书记公开承诺书
2016/03/25 职场文书