Originally, in the front-end HTML code, Marquee was used to achieve horizontal and vertical scrolling of text or images. However, after considering browser compatibility and compliance with W3C standards, I later thought that it would still be implemented using JavaScript code. Later, I fell in love with jquery. I hope the content written below will be helpful to beginners. Experts are not allowed to criticize, but guidance is welcome and I am grateful.
Principle: The principle of seamless scrolling is to use two containers with the same content to achieve the effect of deceiving people's vision. Then scrolling is achieved by moving the scroll bar of the entire large container left and right or up and down. Attached below is a hand-drawn picture to briefly explain the principle. First of all, our purpose is to realize the horizontal scrolling of the content in box 1 to the left (the principles of right scrolling and up and down scrolling are actually roughly the same. As long as you know one of them, the others are not a problem.). Then when the page is loaded, we use js to dynamically assign the content in box 2 (html content) to be the same as the content in box 1. Then gradually move the scroll bar to the right to achieve the left effect. Having said so much. I'll attach the code (with comments) later.
1.html code
juqery achieves the effect of marquee</ title> <br><script src="jquery-1.4.2.js" type="text/javascript"></script> <br><style type="text/css"> <br>#container /*This is the outermost container. The most critical point is to hide overflow:hidden. */ <br>{ <br>width:600px; <br>height:80px; <br>overflow:hidden; <br>} <br>#longwidth <br>{ <br>height:80px; <br> width:1000%; /*It needs to be large enough to fit the contents of div1 and div2, otherwise it will go to the second line because float: left cannot fit*/ <br>} <br>.kuang <br>{ <br>float:left; <br>height:80px; <br>} <br></style> <br><script type="text/javascript"> <br>$( function () { <br>$("#div2").html($("#div1").html()); //Set the html of div2 to the html of div1 <br>var mar = function () { <br>if ($("#container").scrollLeft() > $("#div1").width()) { //When the hidden length of the scroll bar is greater than the width of div1 <br>$(" #container").scrollLeft(0); <br>} <br>else { <br>$("#container").scrollLeft($("#container").scrollLeft() 5); //Every time The scroll bar moves 1px to the right; <br>} <br>}; <br>var vid = setInterval(mar, 1); <br>$("#container").mouseenter(function () { <br>clearInterval (vid); <br>}).mouseleave(function () { <br>vid = setInterval(mar,1); <br>}); <br>}); <br></script> <br></head> <br><body> <br><!--The container can use div, and the content can use ul li, then box 1 is div1, box 2 is div2, and two divs are required in one line. You need to set the float:left attribute of the div--> <br><!--Of course, if you don't know much about CSS, you can also use table to implement it, and use td1 and td2 to implement it. I don’t like tables, so I made it through divs--> <br><div id="container"> <br><div id="longwidth"> <br>< div id="div1" class="kuang"> <br><img src="04.jpg" width="120px" height="80px" /> <br><img src="04. jpg" width="120px" height="80px" /> <br><img src="04.jpg" width="120px" height="80px" /> <br><img src=" 04.jpg" width="120px" height="80px" /> <br><img src="04.jpg" width="120px" height="80px" /> <br><img src ="04.jpg" width="120px" height="80px" /> <br><img src="04.jpg" width="120px" height="80px" /> <br>< /div> <br><div id="div2" class="kuang"></div> <br></div> <br></div> <br></body> <br></html> <br>
</div></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>Statement：</span><div>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</div></div></div><div class="nphpSytBox"><span>Previous article：<a class="dBlack" title="JavaScript allows the back of the last text in the text box to gain focus implementation code_javascript skills" href="https://m.php.cn/faq/18136.html">JavaScript allows the back of the last text in the text box to gain focus implementation code_javascript skills</a></span><span>Next article：<a class="dBlack" title="JavaScript allows the back of the last text in the text box to gain focus implementation code_javascript skills" href="https://m.php.cn/faq/18138.html">JavaScript allows the back of the last text in the text box to gain focus implementation code_javascript skills</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>Related articles</h2><em><a href="https://m.php.cn/article.html" class="bBlack"><i>See more</i><b></b></a></em><div class="clear"></div></div><ins class="adsbygoogle"
style="display:block"
data-ad-format="fluid"
data-ad-layout-key="-6t+ed+2i-1n-4w"
data-ad-client="ca-pub-5902227090019525"
data-ad-slot="8966999616"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({});
</script><ul class="nphpXgwzList"><li><b></b><a href="https://m.php.cn/faq/1609.html" title="An in-depth analysis of the Bootstrap list group component" class="aBlack">An in-depth analysis of the Bootstrap list group component</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/faq/1640.html" title="Detailed explanation of JavaScript function currying" class="aBlack">Detailed explanation of JavaScript function currying</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/faq/1949.html" title="Complete example of JS password generation and strength detection (with demo source code download)" class="aBlack">Complete example of JS password generation and strength detection (with demo source code download)</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/faq/2248.html" title="Angularjs integrates WeChat UI (weui)" class="aBlack">Angularjs integrates WeChat UI (weui)</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/faq/2351.html" title="How to quickly switch between Traditional Chinese and Simplified Chinese with JavaScript and the trick for websites to support switching between Simplified and Traditional Chinese_javascript skills" class="aBlack">How to quickly switch between Traditional Chinese and Simplified Chinese with JavaScript and the trick for websites to support switching between Simplified and Traditional Chinese_javascript skills</a><div class="clear"></div></li></ul></div></div><ins class="adsbygoogle"
style="display:block"
data-ad-format="autorelaxed"
data-ad-client="ca-pub-5902227090019525"
data-ad-slot="5027754603"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({});
</script><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt=""><p>Public welfare online PHP training，Help PHP learners grow quickly！</p></div><div class="footermid"><a href="https://m.php.cn/about/us.html">About us</a><a href="https://m.php.cn/about/disclaimer.html">Disclaimer</a><a href="https://m.php.cn/update/article_0_1.html">Sitemap</a></div><div class="footerbottom"><p> © php.cn All rights reserved
</p></div></div></footer><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) {
var _times = times || -1, //100次
_interval = interval || 20, //20毫秒每次
_self = this,
_selector = this.selector, //选择器
_iIntervalID; //定时器id
if( this.length ){ //如果已经获取到了，就直接执行函数
func && func.call(this);
} else {
_iIntervalID = setInterval(function() {
if(!_times) { //是0就退出
clearInterval(_iIntervalID);
}
_times <= 0 || _times--; //如果是正数就 --
_self = $(_selector); //再次选择
if( _self.length ) { //判断是否取到
func && func.call(_self);
clearInterval(_iIntervalID);
}
}, _interval);
}
return this;
}
$("table.syntaxhighlighter").wait(function() {
$('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>");
});
$(document).on("click", ".cnblogs_code_footer",function(){
$(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide();
});
$('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}});
</script></body><!-- Matomo --><script> var _paq = window._paq = window._paq || [];
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);
(function() {
var u="https://tongji.php.cn/";
_paq.push(['setTrackerUrl', u+'matomo.php']);
_paq.push(['setSiteId', '9']);
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
})();
</script><!-- End Matomo Code --></html>
