简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > Web Front-end > JS Tutorial > body text

js practical non-stop scrolling effect (good compatibility)_image special effects

WBOY
Release： 2016-05-16 18:25:28
Original
1186 people have browsed it

Here is a method; basically, the structure and behavior are separated. The connection between the two only requires one
id. It is very convenient to use, and the same js code can achieve multiple scrolling chart effects on this page. Without interfering with each other,
1.xhtml

Copy code The code is as follows:

< ;div class="demo" id="demo1">



< /tr>



  • Scroll 1



  • Scroll Chart 2



  • Scroll Chart 3



  • Scroll Figure 4











2.css

Copy code The code is as follows:

ul,li,img,td{font-size:12px;list-style-type:none;text-align:center;margin:0;padding:0;}
.demo{width:230px;margin-bottom:8px;height:172px;overflow:hidden;}
.demo ul{width:408px;clear:both;}
.demo li{width: 102px;float:left;text-align:center;}
.demo img{margin-bottom:8px;}


3.js

Copy code The code is as follows:

function startmarquee(lh,speed,delay,index){
var o =document.getElementById("demo" index);
var o_td=o.getElementsByTagName("td")[0];
var str=o_td.innerHTML;
var newtd=document.createElement(" td");
newtd.innerHTML=str;
o_td.parentNode.appendChild(newtd);
var t;
var p=false;
o.onmouseover=function(){ p=true;}
o.onmouseout=function() {p=false;}
function start(){
t=setInterval(Marquee,speed);
if(!p){ o.scrollLeft = 3;}
}
function Marquee(){
if(o_td.offsetWidth-o.scrollLeft<=0)
o.scrollLeft-=o_td.offsetWidth;
else{
if(o.scrollLeft%lh!=0){
o.scrollLeft = 3
}else{clearInterval(t); setTimeout(start,delay);}
}
}
setTimeout(start,delay);
}
startmarquee(102,1,1500,1);//Stop scrolling between pictures
startmarquee(102,30,1,2) ;//Uninterrupted scrolling of images

Test code: js needs to be executed after the html file is loaded to run normally, so remember to put js after the div; the principle of image scrolling and text scrolling Much the same.
Demo code:

[Ctrl A Select all Note: If you need to introduce external Js, you need to refresh to execute
]
In the code, it is for 102 The width of the picture can be modified in the code. Only the width that suits your picture size can run perfectly.
Related labels：
无间断 滚动图
source：php.cn
Previous article：Array.prototype.slice using extension_javascript tips Next article：Dynamically add code to js word table_javascript skills
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
Submit form without button using Javascript/Jquery I'm trying to submit a form without a button by calling a JavaScript function and executin...
From 2024-04-06 14:54:03
0
2
421
Align tooltip to relative parent I spent two days trying to solve this problem but I realized I couldn't do it alone. I'm t...
From 2024-04-06 13:16:59
0
2
394
next not working properly in middleware using Nodejs I am working with Nodejs and using expressjs and now I am working on middleware functional...
From 2024-04-04 17:33:56
0
1
340
Authserver "Unable to connect" "Host xxxxx is not authorized" after changing the LAN installation IP Use the default Windows installation instructions on a bare metal Windows 10 installation....
From 2024-04-04 15:06:41
0
1
374
Efficient way to fill missing values ​​in unordered map from SQL table (SQL/C++) Question Currently there is a system that reads unique identifiers (ids) and their attache...
From 2024-04-04 11:47:44
0
1
345
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！

  • < img src="img.jpg">

    Scroll 1



  • Scroll Chart 2



  • Scroll Chart 3



  • Scroll Figure 4