图片滚动效果_thewebcode-程序员宅基地

技术标签: javascript  

向上滚动
<div id=demo style=overflow:hidden;height:100;width:90;background:#214984;color:#ffffff>
<div id=demo1>
<img src="http://www.haao.cn/logo.gif">
<img src="http://www.haao.cn/logo.gif">
<img src="http://www.haao.cn/logo.gif">
<img src="http://www.haao.cn/logo.gif">
<img src="http://www.haao.cn/logo.gif">
<img src="http://www.haao.cn/logo.gif">
<img src="http://www.haao.cn/logo.gif">
<img src="http://www.haao.cn/logo.gif">
<img src="http://www.haao.cn/logo.gif">
</div>
<div id=demo2></div>
</div>
<wbr><wbr> &lt;script&gt;<br><wbr><wbr> var speed=30<br><wbr><wbr> demo2.innerHTML=demo1.innerHTML //克隆demo1为demo2<br><wbr><wbr> function Marquee(){<br> //当滚动至demo1与demo2交界时<br> if(demo2.offsetTop-demo.scrollTop&lt;=0)<wbr><wbr><br> demo.scrollTop-=demo1.offsetHeight //demo跳到最顶端<br> else{<br> demo.scrollTop++<br><wbr><wbr> }<br><wbr><wbr> }<br><wbr><wbr> var MyMar=setInterval(Marquee,speed)//设置定时器<br> //鼠标移上时清除定时器达到滚动停止的目的<br><wbr><wbr> demo.οnmοuseοver=function() {clearInterval(MyMar)}<br> //鼠标移开时重设定时器<br><wbr><wbr> demo.οnmοuseοut=function(){MyMar=setInterval(Marquee,speed)}<br> &lt;/script&gt;</wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr>

向下滚动
<div id=demo style=overflow:hidden;height:100;width:90;background:#214984;color:#ffffff>
<div id=demo1>
<img src="http://www.haao.cn/logo.gif">
<img src="http://www.haao.cn/logo.gif">
<img src="http://www.haao.cn/logo.gif">
<img src="http://www.haao.cn/logo.gif">
<img src="http://www.haao.cn/logo.gif">
<img src="http://www.haao.cn/logo.gif">
<img src="http://www.haao.cn/logo.gif">
<img src="http://www.haao.cn/logo.gif">
<img src="http://www.haao.cn/logo.gif">
</div>
<div id=demo2></div>
</div>
<wbr><wbr><wbr> &lt;script&gt;<br><wbr><wbr><wbr> var speed=30<br><wbr><wbr><wbr> demo2.innerHTML=demo1.innerHTML<br><wbr><wbr><wbr> demo.scrollTop=demo.scrollHeight<br><wbr><wbr><wbr> function Marquee(){<br><wbr><wbr><wbr> if(demo1.offsetTop-demo.scrollTop&gt;=0)<br><wbr><wbr><wbr> demo.scrollTop+=demo2.offsetHeight<br><wbr><wbr><wbr> else{<br><wbr><wbr><wbr> demo.scrollTop--<br><wbr><wbr><wbr> }<br><wbr><wbr><wbr> }<br><wbr><wbr><wbr> var MyMar=setInterval(Marquee,speed)<br><wbr><wbr><wbr> demo.οnmοuseοver=function() {clearInterval(MyMar)}<br><wbr><wbr><wbr> demo.οnmοuseοut=function() {MyMar=setInterval(Marquee,speed)}<br> &lt;/script&gt;</wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr>

向左滚动效果一
这里很多人提到滚动会停止,我将原来的width:670px改为width:600px,然后增加了两个<td><img src="http://www.haao.cn/logo.gif" width="88"></td>,问题得到解决!

<div id="demo" style="overflow:hidden;width:600px;color:#ffffff;">
<wbr><wbr><wbr><wbr><wbr> &lt;table cellpadding="0" cellspacing="0" border="0"&gt;<br><wbr><wbr><wbr><wbr><wbr><wbr><wbr> &lt;tr&gt;&lt;td id="demo1" valign="top" align="center"&gt;<br><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr> &lt;table cellpadding="2" cellspacing="0" border="0"&gt;<br><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr> &lt;tr align="center"&gt;<br><wbr><wbr><wbr><wbr> &lt;td&gt;&lt;img src="<a href="http://www.haao.cn/logo.gif">http://www.haao.cn/logo.gif</a>" width="88"&gt;&lt;/td&gt;<br><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr> &lt;td&gt;&lt;img src="<a href="http://www.haao.cn/logo.gif">http://www.haao.cn/logo.gif</a>" width="88"&gt;&lt;/td&gt;<br><wbr><wbr><wbr><wbr> &lt;td&gt;&lt;img src="<a href="http://www.haao.cn/logo.gif">http://www.haao.cn/logo.gif</a>" width="88"&gt;&lt;/td&gt;<br><wbr><wbr><wbr><wbr> &lt;td&gt;&lt;img src="<a href="http://www.haao.cn/logo.gif">http://www.haao.cn/logo.gif</a>" width="88"&gt;&lt;/td&gt;<br> &lt;td&gt;&lt;img src="<a href="http://www.haao.cn/logo.gif">http://www.haao.cn/logo.gif</a>" width="88"&gt;&lt;/td&gt;&lt;td&gt;&lt;img src="<a href="http://www.haao.cn/logo.gif">http://www.haao.cn/logo.gif</a>" width="88"&gt;&lt;/td&gt;<br><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr> &lt;td&gt;&lt;img src="<a href="http://www.haao.cn/logo.gif">http://www.haao.cn/logo.gif</a>" width="88"&gt;&lt;/td&gt;<br><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr> &lt;/tr&gt;<br><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr> &lt;/table&gt;<br><wbr><wbr><wbr><wbr><wbr><wbr><wbr> &lt;/td&gt;<br><wbr><wbr><wbr><wbr><wbr><wbr><wbr> &lt;td id="demo2" valign="top"&gt;&lt;/td&gt;<br><wbr><wbr><wbr><wbr><wbr><wbr><wbr> &lt;/tr&gt;<br><wbr><wbr><wbr><wbr><wbr> &lt;/table&gt;<br><wbr><wbr><wbr> &lt;/div&gt;<br> &lt;script&gt;<br> var speed=1//速度数值越大速度越慢<br> demo2.innerHTML=demo1.innerHTML<br> function Marquee(){<br> if(demo2.offsetWidth-demo.scrollLeft&lt;=0)<br> demo.scrollLeft-=demo1.offsetWidth<br> else{<br> demo.scrollLeft++<br> }<br> }<br> var MyMar=setInterval(Marquee,speed)<br> demo.οnmοuseοver=function() {clearInterval(MyMar)}<br> demo.οnmοuseοut=function() {MyMar=setInterval(Marquee,speed)}<br> &lt;/script&gt;</wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr>

向左滚动效果二
<div id=demo style="overflow:hidden;width:750;" align=center>
<table border=0 align=center cellpadding=1 cellspacing=1 cellspace=0 >
<wbr><wbr> &lt;tr&gt;<br><wbr><wbr><wbr><wbr><wbr><wbr> &lt;td valign=top bgcolor=ffffff id=marquePic1&gt;<br><wbr><wbr><wbr><wbr><wbr><wbr><wbr> &lt;table width='100%' border='0' cellspacing='0'&gt;&lt;tr&gt;&lt;td align=center&gt;&lt;a href='#' target=_blank&gt;&lt;img src="<a href="http://bbs.blueidea.com/logo.gif">http://bbs.blueidea.com/logo.gif</a>" width=120 height=80 border=0&gt;&lt;br&gt;&lt;br&gt;11111111111111&lt;/a&gt;&lt;/td&gt;&lt;td align=center&gt;&lt;a href='#' target=_blank&gt;&lt;img src=http://bbs.blueidea.com/logo.gif width=120 height=80 border=0&gt;&lt;br&gt;&lt;br&gt;2222222222&lt;/a&gt;&lt;/td&gt;&lt;td align=center&gt;&lt;a href='#' target=_blank&gt;&lt;img src=bbs.blueidea.com/logo.gif width=120 height=80 border=0&gt;&lt;br&gt;&lt;br&gt;333333333&lt;/a&gt;&lt;/td&gt;&lt;td align=center&gt;&lt;a href='#' target=_blank&gt;&lt;img src="bbs.blueidea.com/logo.gif" width=120 height=80 border=0&gt;&lt;br&gt;&lt;br&gt;11111111111111&lt;/a&gt;&lt;/td&gt;&lt;td align=center&gt;&lt;a href='#' target=_blank&gt;&lt;img src=http://www.haao.cn/logo.gif width=120 height=80 border=0&gt;&lt;br&gt;&lt;br&gt;2222222222&lt;/a&gt;&lt;/td&gt;&lt;td align=center&gt;&lt;a href='#' target=_blank&gt;&lt;img src=http://www.haao.cn/logo.gif width=120 height=80 border=0&gt;&lt;br&gt;&lt;br&gt;333333333&lt;/a&gt;&lt;/td&gt;&lt;td align=center&gt;&lt;a href='#' target=_blank&gt;&lt;img src="<a href="http://www.haao.cn/logo.gif">http://www.haao.cn/logo.gif</a>" width=120 height=80 border=0&gt;&lt;br&gt;&lt;br&gt;11111111111111&lt;/a&gt;&lt;/td&gt;&lt;td align=center&gt;&lt;a href='#' target=_blank&gt;&lt;img src=http://www.haao.cn/logo.gif width=120 height=80 border=0&gt;&lt;br&gt;&lt;br&gt;2222222222&lt;/a&gt;&lt;/td&gt;&lt;td align=center&gt;&lt;a href='#' target=_blank&gt;&lt;img src=http://www.haao.cn/logo.gif width=120 height=80 border=0&gt;&lt;br&gt;&lt;br&gt;333333333&lt;/a&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;<br><wbr><wbr><wbr><wbr><wbr><wbr> &lt;/td&gt;<br><wbr><wbr><wbr><wbr><wbr><wbr> &lt;td id=marquePic2 valign=top&gt;&lt;/td&gt;<br><wbr><wbr><wbr><wbr><wbr><wbr> &lt;/tr&gt;<br><wbr><wbr><wbr><wbr><wbr> &lt;/table&gt;<br><wbr><wbr><wbr><wbr> &lt;/div&gt;<br><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr> &lt;script type="text/javascript"&gt;<br> var speed=50<br> marquePic2.innerHTML=marquePic1.innerHTML<br> function Marquee(){<br> if(demo.scrollLeft&gt;=marquePic1.scrollWidth){<br> demo.scrollLeft=0<br> }else{<br> demo.scrollLeft++<br> }<br> }<br> var MyMar=setInterval(Marquee,speed)<br> demo.οnmοuseοver=function() {clearInterval(MyMar)}<br> demo.οnmοuseοut=function() {MyMar=setInterval(Marquee,speed)}<br><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr> &lt;/script&gt;</wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr>

向右滚动
<div id="demo" style="overflow:hidden;width:670px;color:#ffffff;">
<wbr><wbr><wbr><wbr><wbr> &lt;table cellpadding="0" cellspacing="0" border="0"&gt;<br><wbr><wbr><wbr><wbr><wbr><wbr><wbr> &lt;tr&gt;&lt;td id="demo1" valign="top" align="center"&gt;<br><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr> &lt;table cellpadding="2" cellspacing="0" border="0"&gt;<br><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr> &lt;tr align="center"&gt;<br><wbr><wbr><wbr><wbr> &lt;td&gt;&lt;img src="<a href="http://www.haao.cn/logo.gif">http://www.haao.cn/logo.gif</a>" width="88"&gt;&lt;/td&gt;<br><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr> &lt;td&gt;&lt;img src="<a href="http://www.haao.cn/logo.gif">http://www.haao.cn/logo.gif</a>" width="88"&gt;&lt;/td&gt;<br><wbr><wbr><wbr><wbr> &lt;td&gt;&lt;img src="<a href="http://www.haao.cn/logo.gif">http://www.haao.cn/logo.gif</a>" width="88"&gt;&lt;/td&gt;<br><wbr><wbr><wbr><wbr> &lt;td&gt;&lt;img src="<a href="http://www.haao.cn/logo.gif">http://www.haao.cn/logo.gif</a>" width="88"&gt;&lt;/td&gt;<br><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr> &lt;td&gt;&lt;img src="<a href="http://www.haao.cn/logo.gif">http://www.haao.cn/logo.gif</a>" width="88"&gt;&lt;/td&gt;<br><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr> &lt;/tr&gt;<br><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr> &lt;/table&gt;<br><wbr><wbr><wbr><wbr><wbr><wbr><wbr> &lt;/td&gt;<br><wbr><wbr><wbr><wbr><wbr><wbr><wbr> &lt;td id="demo2" valign="top"&gt;&lt;/td&gt;<br><wbr><wbr><wbr><wbr><wbr><wbr><wbr> &lt;/tr&gt;<br><wbr><wbr><wbr><wbr><wbr> &lt;/table&gt;<br><wbr><wbr><wbr> &lt;/div&gt;<br> &lt;script&gt;<br> var speed=1//速度数值越大速度越慢<br> demo2.innerHTML=demo1.innerHTML<br> function Marquee(){<br> if(demo.scrollLeft&lt;=0)<br> demo.scrollLeft+=demo2.offsetWidth<br> else{<br> demo.scrollLeft--<br> }<br> }<br> var MyMar=setInterval(Marquee,speed)<br> demo.οnmοuseοver=function() {clearInterval(MyMar)}<br> demo.οnmοuseοut=function() {MyMar=setInterval(Marquee,speed)}<br> &lt;/script&gt;</wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr>

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/iteye_19603/article/details/82518079

智能推荐

01-Android开发基于eclipse的开发环境搭建_weixin_33804990的博客-程序员宅基地

为什么80%的码农都做不了架构师?&gt;&gt;&gt; ...

计算机网络拓扑结构可如何分类,计算机网络拓扑结构的分类_刘恺威的博客-程序员宅基地

《计算机网络拓扑结构的分类》由会员分享,可在线阅读,更多相关《计算机网络拓扑结构的分类(8页珍藏版)》请在人人文库网上搜索。1、计算机网络拓扑结构的分类,1,2,学习目标,知识与能力目标: 1、理解掌握星型网络拓扑结构及其特点。 2、了解总线型、环型、树型和网状型拓扑结构及其特点。 过程与方法目标: 让学生在学习的过程中实现学会、会学、乐学的统一。 情感态度与价值观目标: 通过情景模拟、视频教学、...

习题9-3 切蛋糕 UVa1629_Skyline-程序员宅基地

1.题目描述:点击打开链接2.解题思路:本题属于棋盘型dp问题。根据题意,我们需要完整的描述一个矩形,以便于进行状态的转移,可以用(r,c,w,h)来描述一个矩形,(r,c)是矩形的左上角坐标。w是矩形的宽,h是矩形的高。那么不难得到如下的两个状态转移方程:(横切)dp(r,c,w,h)=max{dp(r,c,w,h),w+dp(r,c,w,i)+dp(r+i,c,w,h-i)}(1

mysql 第13章 触发器_dengyuan9283的博客-程序员宅基地

2015-10-24目录DDLCREATE TABLE employee (name char(64) not null,email char(64),password char(64),PRIMARY key (name));CREATE TABLE log (id int auto_increment,email char(64)...

基于MySQL元数据的Hive的安装和简单測试_weixin_30646315的博客-程序员宅基地

引言: Hive是一种强大的数据仓库查询语言,类似SQL,本文将介绍怎样搭建Hive的开发測试环境。1. 什么是Hive? hive是基于Hadoop的一个数据仓库工具,能够将结构化的数据文件映射为一张数据库表,并提供简单的sql查询功能,能够将sql语句转换为MapReduce任务进行执行。 其长处是学习成本低,能够通过类SQL语句高速实现简单的MapReduce统...

[BZOJ1098][POI2007]办公楼biu_weixin_30735745的博客-程序员宅基地

1098: [POI2007]办公楼biuTime Limit: 20 SecMemory Limit: 162 MB Submit: 1423Solved: 678 [Submit][Status][Discuss]Description  FGD开办了一家电话公司。他雇用了N个职员,给了每个职员一部手机。每个职员的手机里都存储有一些同事的 电话号码。由于FGD的公司...

随便推点

虚拟机里切换linux图形界面,虚拟机-linux系统中图形界面和命令行界面切换_Fayyy Li的博客-程序员宅基地

linux系统中图形化界面和命令行界面之间的切换可以分为两种,临时性切换和永久性切换。临时性切换即切换后只对本次生效,系统重启后界面还是默认界面。永久性切换即切换后系统开机后永远处于的界面。临时性切换方法图形界面切换命令行界面:打开控制终端,输入init 3,然后回车如果提示没有权限,则需要先切换到root用户,再执行init 3进行切换命令行界面切换图形界面:输入init 5,然后回车永久性切换...

后端日期类属性date 不接受string类型日期,都是没找到解决的方法,所有前端传回的string字符串都一一转化为java定义的类型..._weixin_34009794的博客-程序员宅基地

1、比如日期 我们可以是yyyy-MM-dd 亦可以是yyyy-MM-dd HH:mm:ss方法1在java代码中需要的字段上加上注解 写上日期类型,不过这样很麻烦,每个人写了日期类型的接收前端的参数时都要自己注入,一不小心就有前端来找你接口500了,所以这个方法一有点自私 我不用。方法2 一起xml写好到处都可以用 &lt;mvc:annotation-driven va...

oracle10g rac搭建dg,RAC上配置DG_李嘶嘶的博客-程序员宅基地

这段时间闲来无事,打算把这段时间在RAC的一些应用配置整理一下。包括OGG,dataguard这些 今天先发一个 日后会继续更新的。关于这篇文章也就是搭个实验环境,真正的生产库还需要根据实际环境修改参数。ORACLE RAC + DATA GUARD配置一.配置信息RAChostnameRAC1RAC2Public ip172.16.30.11172.16.30.12Private ip192.1...

Arduino 光敏电阻调节呼吸灯_比特字节-只为技术-程序员宅基地

今天测试PWM做呼吸灯,以及用光敏电阻做达文西呼吸灯,并输出串口光敏AD值,可作为智能家居中,卧室慢慢亮起的地灯,或根据室内光线调节光亮等效果。

[BZOJ3211]花神游历各国_dxyinme-Zz-程序员宅基地

Time Limit: 5 SecMemory Limit: 128 MBDescriptionInputOutput每次x=1时,每行一个整数,表示这次旅行的开心度Sample Input41 100 5 551 1 22 1 21 1 22 2 31 1 4Sample Output1011111HINT对于100%的数据, n≤100000,m...

keras中训练好的模型保存与载入_Jack_kun的博客-程序员宅基地

keras中的采用Sequential模式建立DNN并持久化保持、重新载入def DNN_base_v1(X_train, y_train): model = models.Sequential() model.add(layers.Dense(96, activation='elu',kernel_regularizer=regularizers.l2(0.005)...

推荐文章

热门文章

相关标签