div 图片滚动 / 文字滚动

今天研究了一下图片滚动,网上有很多可以使用的例子,所以先是找了一个用的是表格布局的,如下:


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title>
</head>
<body><div id="gpic" style="overflow: hidden; width: 600px; height: 182px;"><table border="0" align="center" cellpadding="0" cellspacing="0"><tr><td id="gpic1" valign="top" align="center"><table width="974" border="0" align='center' cellpadding="0" cellspacing="0"><tr><td height="120" bgcolor="#FF00FF">图片/链接1</td><td valign='top' bgcolor="#00FFFF">图片/链接2</td><td valign='top' bgcolor="#FFFF00">图片/链接3</td><td valign='top' bgcolor="#0000FF">图片/链接4</td><td valign='top' bgcolor="#00FF00">图片/链接5</td><td valign='top' bgcolor="#FF0000">图片/链接6</td></tr><tr><td height="24" align="center">文字信息</td><td align="center">文字信息</td><td align="center">文字信息</td><td align="center">文字信息</td><td align="center">文字信息</td><td align="center">文字信息</td></tr></table></td><td id="gpic2" valign="top"></td></tr></table></div><script>var speed = 30gpic2.innerHTML = gpic1.innerHTMLfunction Marquee() {if (gpic2.offsetWidth - gpic.scrollLeft <= 0)gpic.scrollLeft -= gpic1.offsetWidthelse {gpic.scrollLeft++}}var MyMar = setInterval(Marquee, speed)gpic.onmouseover = function () { clearInterval(MyMar) }gpic.onmouseout = function () { MyMar = setInterval(Marquee, speed) }</script>
</body>
</html>

这个滚动效果可以使用,但是表格布局现在一般不用,而且这个例子的onmouseover和onmouseout在频繁的setInterval;
个人感觉可以使用布尔变量true和false来控制,停止还是继续滚动。
自己改写如下:


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title>
</head>
<body><div id="PicWall" style="width: 200px; overflow: hidden; white-space: nowrap;"><div id="InnerPic" style="display: inline; width: 200px;"><img src="a.jpg" alt="img-1" />1<img src="a.jpg" alt="img-2" />2<img src="a.jpg" alt="img-3" />3<img src="a.jpg" alt="img-4" />4<img src="a.jpg" alt="img-5" />5</div><div id="InnerPic2" style="display: inline; width: 200px;"></div></div><script>var speed = 30;var scroll = true;InnerPic2.innerHTML = InnerPic.innerHTML;function Marquee() {if (scroll) {if (InnerPic2.offsetWidth - PicWall.scrollLeft <= 0) {PicWall.scrollLeft -= InnerPic.offsetWidth;} else {PicWall.scrollLeft++;}}}var MyMarquee = setInterval(Marquee, speed);PicWall.onmouseover = function () { scroll = false; }PicWall.onmouseout = function () { scroll = true; }</script>
</body>
</html>

另外有些了一个文字上下滚动


<!-- 临时或重点信息发布(滚动)【开始】 --><div id="TextWall" style="overflow: hidden; border: 1px solid #2aff00; height: 230px;"><div id="InnerText" style="word-wrap: break-word;">信息:<br />1、abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz<br />2、abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz<br />3、abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz<br />4、abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz<br /></div><div id="InnerText2" style="word-wrap: break-word;"></div></div><script>var textSpeed = 30;var textScroll = true;InnerText2.innerHTML = InnerText.innerHTML;function TextMarquee() {if (textScroll) {if (InnerText.offsetHeight - TextWall.scrollTop <= 0) {TextWall.scrollTop -= InnerText.offsetHeight;} else {TextWall.scrollTop++;}}}var MyTextMarquee = setInterval(TextMarquee, textSpeed);TextWall.onmouseover = function () { textScroll = false; }TextWall.onmouseout = function () { textScroll = true; }</script><!-- 临时或重点信息发布(滚动)【结束】 -->

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/544880.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

为什么阿里内部不允许用Executors创建线程池?

来源&#xff1a;cnblogs.com/zjfjava/p/11227456.html1. 通过Executors创建线程池的弊端在创建线程池的时候&#xff0c;大部分人还是会选择使用Executors去创建。下面是创建定长线程池&#xff08;FixedThreadPool&#xff09;的一个例子&#xff0c;严格来说&#xff0c;当使…

Java FilePermission暗含()方法与示例

FilePermission类implies()方法 (FilePermission Class implies() method) implies() method is available in java.io package. implies()方法在java.io包中可用。 implies() method is used to check whether this FilePermission implies the given permission (perm) or no…

填充

1. $number 68 {0:d7} -f $number2. $number1 68$number1.PadLeft(7,0)转载于:https://www.cnblogs.com/IvanChen/p/4492976.html

RabbitMQ中7种消息队列和保姆级代码演示!

blog.csdn.net/qq_32828253/article/details/110450249七种模式介绍与应用场景简单模式&#xff08;Hello World&#xff09;做最简单的事情&#xff0c;一个生产者对应一个消费者&#xff0c;RabbitMQ相当于一个消息代理&#xff0c;负责将A的消息转发给B应用场景&#xff1a;…

如何在使用ASPMVC4的分部视图中获取数据展示

如何在使用ASPMVC4的分部视图中获取数据展示在ASPMVC4中&#xff0c;创建的网站项目会用到分部视图&#xff0c;通过Html.Partial("视图名")来加载到页面上&#xff1b;但是如何把数据附加到分部视图中在加载到主页上&#xff0c;是个新的问题。暂时发现这个问题有两…

Java枚举getDeclaringClass()方法与示例

枚举类getDeclaringClass()方法 (Enum Class getDeclaringClass() method) getDeclaringClass() method is available in java.lang package. getDeclaringClass()方法在java.lang包中可用。 getDeclaringClass() method is used to return the Class object denoting the enum…

项目已被os x使用 不能打开-黑苹果之路

之前复制了几个视频文件到NTFS的盘上&#xff0c;在mac中始终无法使用&#xff08;甚至是chmod&#xff09;&#xff0c;无论是哪种播放软件&#xff0c;甚至改成dmg类型都无法打开&#xff0c;报“项目已被os x使用 不能打开”&#xff0c;用ls命令发现文件属性中多了个标志&a…

CyclicBarrier:人齐了,老司机就发车了!

作者 | 王磊来源 | Java中文社群&#xff08;ID&#xff1a;javacn666&#xff09;转载请联系授权&#xff08;微信ID&#xff1a;GG_Stone&#xff09;上一篇咱讲了 CountDownLatch 可以解决多个线程同步的问题&#xff0c;相比于 join 来说它的应用范围更广&#xff0c;不仅可…

Leetcode 2975. Maximum Square Area by Removing Fences From a Field

Leetcode 2975. Maximum Square Area by Removing Fences From a Field 1. 解题思路2. 代码实现 题目链接&#xff1a;2975. Maximum Square Area by Removing Fences From a Field 1. 解题思路 这一题思路上是比较直接的&#xff0c;就是直接求出横向和纵向上可能的interva…

判断ip是否合法

//用来判断ip是否合法public boolean checkIp(String tempIp) {String regex "(25[0-5]|2[0-4]\\d|1\\d{2}|[1-9]?\\d)(\\.(25[0-5]|2[0-4]\\d|1\\d{2}|[1-9]?\\d)){3}";Pattern p Pattern.compile(regex);Matcher m p.matcher(tempIp);return m.matches();}

Java类类getPackage()方法及示例

类的类getPackage()方法 (Class class getPackage() method) getPackage() method is available in java.lang package. getPackage()方法在java.lang包中可用。 getPackage() method is used to return the package of this class, we find the package of the class by using…

iOS平台快速发布HT for Web拓扑图应用

iOS平台一直是封闭的生态圈&#xff0c;iOS开发者要缴纳年费加入开发者计划才可进行iOS平台的APP开发测试&#xff0c;所开发的APP需要上传到App Store经过苹果审核以后才可对外发布。如果要开发企业内部应用&#xff0c;则要缴纳更高的费用购买企业账户才可以。 对于现在火如荼…

事务注解 @Transactional 失效的3种场景及解决办法

Transactional失效场景第一种 Transactional注解标注方法修饰符为非public时&#xff0c;Transactional注解将会不起作用。例如以下代码&#xff0c;定义一个错误的Transactional标注实现&#xff0c;修饰一个默认访问符的方法&#xff1a;/*** author zhoujy**/ Component pub…

Android的多语言实现

文章转自&#xff1a;http://blog.csdn.net/barryhappy/article/details/23436527 以前就知道Android的多语言实现很简单&#xff0c;可以在不同的语言环境下使用不同的资源什么的&#xff0c;但是一直没有实际使用过。 最近公司的项目要用到多语言于&#xff0c;是就研究了一下…

java 根据类名示例化类_Java即时类| minusNanos()方法与示例

java 根据类名示例化类即时类minusNanos()方法 (Instant Class minusNanos() method) minusNanos() method is available in java.time package. minusNanos()方法在java.time包中可用。 minusNanos() method is used to subtract the given duration in nanoseconds from this…

厉害了,自己手写一个Java热加载!

热加载&#xff1a;在不停止程序运行的情况下&#xff0c;对类&#xff08;对象&#xff09;的动态替换。Java ClassLoader 简述Java中的类从被加载到内存中到卸载出内存为止&#xff0c;一共经历了七个阶段&#xff1a;加载、验证、准备、解析、初始化、使用、卸载。接下来我们…

php相应的扩展的对应链接地址

window下memcached安装&#xff1a;http://code.jellycan.com/memcached/ memcached.exe -m 15 -p 11211开启服务转载于:https://www.cnblogs.com/jakentec/p/4496828.html

duration java_Java Duration类| toMinutes()方法与示例

duration javaDuration Class toMinutes()方法 (Duration Class toMinutes() method) toMinutes() method is available in java.time package. toMinutes()方法在java.time包中可用。 toMinutes() method is used to convert this Duration into the number of minutes. toMin…

Android 如何让EditText不自动获取焦点

文章转自&#xff1a;http://www.cnblogs.com/error404/archive/2012/12/28/2837294.html 在项目中&#xff0c;一进入一个页面, EditText默认就会自动获取焦点。那么如何取消这个默认行为呢&#xff1f;在网上找了好久&#xff0c;有点 监听软键盘事件&#xff0c;有点 调用 c…

公司新来的小可爱,竟然把内存搞崩了!

ThreadLocal使用不规范&#xff0c;师傅两行泪组内来了一个实习生&#xff0c;看这小伙子春光满面、精神抖擞、头发微少&#xff0c;我心头一喜&#xff1a;绝对是个潜力股。于是我找经理申请亲自来带他&#xff0c;为了帮助小伙子快速成长&#xff0c;我给他分了一个需求&…