无间隔marquee滚动

 1 <html xmlns="http://www.w3.org/1999/xhtml">
 2 <head>
 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 4 <title>图片滚动</title>
 5 </head>
 6 <body>
 7 <style type="text/css">
 8 <!--
 9 *{
10     margin: 0px;
11     padding: 0px;
12     border: 0px;
13 }
14 #demo {
15 background: #FFF;
16 overflow:hidden;
17 border: 1px dashed #CCC;
18 width: 500px;
19 margin: 300px auto;
20 padding: 20px 0;
21 }
22 #demo img {
23     border: 3px solid #c8c8c8;
24 }
25 #indemo {
26 float: left;
27 width: 800%;
28 }
29 #demo1 {
30 float: left;
31 }
32 #demo2 {
33 float: left;
34 }
35 -->
36 </style>
37 <div id="demo">
38     <div id="indemo">
39         <div id="demo1">
40             <a href="#"><img src="2.png" border="0" /></a>
41             <a href="#"><img src="2.png" border="0" /></a>
42         </div>
43         <div id="demo2"></div>
44     </div>
45 </div>
46 <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
47 <script type="text/javascript">
48     var speed = 30,
49         fu = document.getElementById("demo"),
50         child1 = document.getElementById("demo1"),
51         child2 = document.getElementById("demo2");
52     child2.innerHTML = child1.innerHTML;
53
54     var marquee = function() {
55         if (child2.offsetWidth - fu.scrollLeft <= 0) {
56             fu.scrollLeft -= fu.offsetWidth;
57         } else {
58             fu.scrollLeft++;
59         }
60     };
61     var inter = setInterval(marquee, speed);
62
63     fu.onmouseover = function() {
64         clearInterval(inter);
65     };
66
67     fu.onmouseout = function() {
68         inter = setInterval(marquee, speed);
69     };
70 </script>
71 </body>
72 </html>
时间: 2024-10-13 07:07:47

无间隔marquee滚动的相关文章

关于jquery无间隙水平滚动的两种方法

1.利用scrollLeft方法 1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="Generator" content="EditPlus®"> 6 <meta name="Author" content="&q

Marquee 滚动参数

new marquee("Layer3", 2, 1, 989, 68, 20, 0, 0, 238); 参数说明:Layer3 :容器ID 2 :向上滚动(0向上 1向下 2向左 3向右) 1: 滚动的步长 989:容器可视宽度 68:容器可视高度 20:定时器 数值越小滚动的速度越快(1000=1秒,建议不小于20) 0: 间歇停顿时间(0为不停顿,1000=1秒) 0 :开始时的等待时间(0为不等待,1000=1秒) 238:间歇滚动间距(可选)

js实现文字无间断左右滚动和图片左右滚动

var MyMar=setInterval(Marquee,speed); scroll_div.onmouseover=function() {clearInterval(MyMar);} scroll_div.onmouseout=function() {MyMar=setInterval(Marquee,speed);} } </script> <div id="gongao"> <div style="width:900px;height

marquee滚动后停顿3秒

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #Marquee{ height:60px; overflow:hidden;} #Marquee div{ border:1px solid #DDD3FE; background:#EEECF

单行文字向上无间断的滚动

单行文字向上滚动,这里我主要是用了无逢滚动的原理:通过改变top值,让文字让上移动,需要一个定时器 var oNav=document.getElementById('nav'); var oUl=oNav.getElementsByTagName('ul')[0]; var aLi=oUl.children; var timer=null; var speed=-1; oUl.innerHTML+=oUl.innerHTML; oUl.style.height=aLi[0].offsetHei

rsync加inotify实现无间隔文件同步

一: 工具简介  rsync 它是一款实现远程同步功能的软件,它在同步文件的同时,可以保持原来文件的权限.时间.软硬链接等附加信息. rsync是用 "rsync 算法"来使本地和远程两个主机之间的文件达到同步,这个算法只传送文件的变化部分,而不是每次都整体传送,因此速度相当快. inotyify    inotify是Linux核心子系统之一,做为文件系统的附加功能,它可监控文件系统并将异动通知应用程序.于Linux核心2.6.13发布时,被正式纳入Linux内核.所以内核版本在2.

无间隙滚动

/**滚动效果实现原理:*1.滚动元素动画改变元素高度直至为0:*2.将动画完毕的元素,添加到容器元素底部,并设置初始高度:*3.动画循环进行,从而实现无间隙的滚动效果*/ //初始化,进行调用window.onload = function () { var dl = new seamlessRolling(); //初始化动画,并配置所需参数 dl.init({ eleID:'#right-order-content', animationClass:"right-row", mo

滚动字幕标记&lt;marquee&gt;&lt;/marquee&gt;

<marquee>滚动内容</marquee> 常用属性: Direction : 滚动方向 取值 up, down left right width  :滚动宽度 height : 滚动高度 scrollAmount : 滚动步长值 值越大 滚动的越快 scrollDellay : 两步之间的停留时间  毫秒单位 1000毫秒 = 1秒 loop    :循环滚动的次数 <marquee direction="right" scrollAmount=&q

滚动字幕Marquee

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Helvetica; color: #000000 } p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Helvetica; color: #000000; min-height: 13.0px } span.s1 { } 基本语法  <marquee>滚动文字 </marquee> 文字移动属性的设置  方向 <