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 相关文章推荐
firefox中用javascript实现鼠标位置的定位
Jun 17 Javascript
Javascript学习笔记9 prototype封装继承
Jan 11 Javascript
Javascript实现仿WebQQ界面的“浮云”兼容 IE7以上版本及FF
Apr 27 Javascript
JS阻止冒泡事件以及默认事件发生的简单方法
Jan 17 Javascript
Javascript同时声明一连串(多个)变量的方法
Jan 23 Javascript
JS中正则表达式全局匹配模式 /g用法详解
Apr 01 Javascript
js案例之鼠标跟随jquery版(实例讲解)
Jul 21 jQuery
jquery ztree实现右键收藏功能
Nov 20 jQuery
Vue 进入/离开动画效果
Dec 26 Javascript
vuex直接赋值的三种方法总结
Sep 16 Javascript
JS块级作用域和私有变量实例分析
May 11 Javascript
javascript中的相等操作符(==与===区别)
Dec 21 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 编写的 25个游戏脚本
2009/05/11 PHP
简单的php+mysql聊天室实现方法(附源码)
2016/01/05 PHP
PHP的PDO预定义常量讲解
2019/01/24 PHP
php设计模式之工厂模式用法经典实例分析
2019/09/20 PHP
laravel7学习之无限级分类的最新实现方法
2020/09/30 PHP
一个JavaScript处理textarea中的字符成每一行实例
2014/09/22 Javascript
jQuery使用CSS()方法给指定元素同时设置多个样式
2015/03/26 Javascript
深入理解node exports和module.exports区别
2016/06/01 Javascript
利用Plupload.js解决大文件上传问题, 带进度条和背景遮罩层
2017/03/15 Javascript
jquery事件与绑定事件
2017/03/16 Javascript
详解vee-validate的使用个人小结
2017/06/07 Javascript
js中url对象化管理分析
2017/12/29 Javascript
vue组件编写之todolist组件实例详解
2018/01/22 Javascript
JSON.stringify()方法讲解
2019/01/31 Javascript
Vue运用transition实现过渡动画
2019/05/06 Javascript
js get和post请求实现代码解析
2020/02/06 Javascript
Vue 集成 PDF.js 实现 PDF 预览和添加水印的步骤
2021/01/22 Vue.js
python并发2之使用asyncio处理并发
2017/12/21 Python
把vgg-face.mat权重迁移到pytorch模型示例
2019/12/27 Python
django 解决扩展自带User表遇到的问题
2020/05/14 Python
python爬虫爬取网页数据并解析数据
2020/09/18 Python
html5的pushstate以及监听浏览器返回事件的实现
2020/08/11 HTML / CSS
JVM是一个编译程序还是解释程序
2012/09/11 面试题
会计系毕业个人自荐信格式
2013/09/23 职场文书
幼儿园小班植树节活动方案
2014/03/04 职场文书
同学聚会主持词
2014/03/18 职场文书
感恩小明星事迹材料
2014/05/23 职场文书
军人离婚协议书样本
2014/10/21 职场文书
2015年员工试用期工作总结
2014/12/12 职场文书
2015年汽车销售员工作总结
2015/07/24 职场文书
优秀团员主要事迹范文
2015/11/05 职场文书
赞美教师的句子
2019/09/02 职场文书
用Python提取PDF表格的方法
2021/04/11 Python
Oracle更换为MySQL遇到的问题及解决
2021/05/21 Oracle
根德5570型九灯四波段立体声收音机是电子管收音机的楷模 ? 再论5570
2022/04/05 无线电
Golang获取List列表元素的四种方式
2022/04/20 Golang