원래 프런트엔드 HTML 코드에서는 텍스트나 이미지의 가로, 세로 스크롤을 구현하기 위해 Marquee를 사용했지만, 브라우저 호환성과 W3C 표준 준수를 고려한 끝에 여전히 JavaScript 코드를 사용하여 구현될 것이라고 생각했습니다. 나중에는 jquery에 푹 빠졌습니다. 아래에 적힌 내용이 초보자에게 도움이 되었으면 좋겠습니다. 전문가의 비판은 금물이지만 지도는 환영이고 감사합니다.
원리: 원활한 스크롤의 원리는 동일한 내용을 담은 두 개의 컨테이너를 사용하여 사람들의 시야를 속이는 효과를 얻는 것입니다. 그런 다음 전체 대형 컨테이너의 스크롤 막대를 좌우 또는 상하로 움직여 스크롤을 수행합니다. 아래 첨부된 그림은 원리를 간략하게 설명하기 위해 손으로 그린 그림입니다. 우선, 우리의 목적은 상자 1의 내용을 왼쪽으로 가로 스크롤하는 것을 구현하는 것입니다(오른쪽 스크롤과 위아래 스크롤의 원리는 실제로 거의 동일합니다. 둘 중 하나만 알면 나머지는 다음과 같습니다). 문제가 되지 않습니다.) 그런 다음 페이지가 로드되면 js를 사용하여 상자 2의 콘텐츠(html 콘텐츠)를 상자 1의 콘텐츠와 동일하게 동적으로 할당합니다. 그런 다음 스크롤 막대를 점차 오른쪽으로 이동하여 왼쪽 효과를 얻습니다. 너무 많이 말했거든요. 나중에 코드(설명 포함)를 첨부하겠습니다.
1.html 코드
juqery는 다음과 같은 효과를 달성합니다. marquee</ title> <br><script src="jquery-1.4.2.js" type="text/javascript"></script> <br><style type="text/css"> ; <br>#container /*이것은 가장 바깥쪽 컨테이너입니다. 가장 중요한 점은 Overflow:hidden을 숨기는 것입니다. */ <br>{ <br>폭:600px; <br>오버플로우:숨김; <br>} <br>#longwidth <br>높이:80px; width:1000%; /*div1과 div2의 내용에 맞을 만큼 충분히 커야 합니다. 그렇지 않으면 float: left가 맞지 않기 때문에 두 번째 줄로 이동합니다*/ <br>} <br>.kuang <br> { <br>float:left; <br>height:80px; <br></style> <br><script type="text/javascript"> { <br>$("#div2").html($("#div1").html()); //div2의 html을 div1의 html로 설정 <br>var mar = function () { <br>if ($("#container").scrollLeft() > $("#div1").width()) { //스크롤 막대의 숨겨진 길이가 div1의 너비보다 큰 경우 <br> $(" #container").scrollLeft(0); <br>} <br>else { <br>$("#container").scrollLeft($("#container").scrollLeft() 5); /스크롤 막대가 오른쪽으로 1px 이동할 때마다 <br>var vid = setInterval(mar, 1) <br>$("#container").mouseenter(function () { <br>clearInterval(vid); <br>}).mouseleave(function () { <br>vid = setInterval(mar,1); <br>}) <br>< /script> <br></head> <br><body> <br><!--컨테이너는 div를 사용할 수 있고 콘텐츠는 ul li를 사용할 수 있으며 상자 1은 div2입니다. , 두 개의 div가 한 줄에 필요합니다. div의 float:left 속성을 설정해야 합니다.-><br><!--물론 CSS에 대해 잘 모르는 경우 다음과 같이 할 수도 있습니다. 이를 구현하려면 table을 사용하고, 구현하려면 td1 및 td2를 사용하십시오. 저는 테이블을 좋아하지 않아서 div를 통해 만들었습니다.-> <br><div id="container"><br><div id="longwidth"> ="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></body> ></html> <br><br>
</div></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>성명：</span><div>본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.</div></div></div><div class="nphpSytBox"><span>이전 기사：<a class="dBlack" title="JavaScript를 사용하면 텍스트 상자의 마지막 텍스트 뒷면에 초점 구현 code_javascript 기술을 얻을 수 있습니다." href="https://m.php.cn/ko/faq/18136.html">JavaScript를 사용하면 텍스트 상자의 마지막 텍스트 뒷면에 초점 구현 code_javascript 기술을 얻을 수 있습니다.</a></span><span>다음 기사：<a class="dBlack" title="JavaScript를 사용하면 텍스트 상자의 마지막 텍스트 뒷면에 초점 구현 code_javascript 기술을 얻을 수 있습니다." href="https://m.php.cn/ko/faq/18138.html">JavaScript를 사용하면 텍스트 상자의 마지막 텍스트 뒷면에 초점 구현 code_javascript 기술을 얻을 수 있습니다.</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>관련 기사</h2><em><a href="https://m.php.cn/ko/article.html" class="bBlack"><i>더보기</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/ko/faq/1609.html" title="Bootstrap 목록 그룹 구성 요소에 대한 심층 분석" class="aBlack">Bootstrap 목록 그룹 구성 요소에 대한 심층 분석</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ko/faq/1640.html" title="JavaScript 함수 커링에 대한 자세한 설명" class="aBlack">JavaScript 함수 커링에 대한 자세한 설명</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ko/faq/1949.html" title="JS 비밀번호 생성 및 강도 감지의 전체 예(데모 소스 코드 다운로드 포함)" class="aBlack">JS 비밀번호 생성 및 강도 감지의 전체 예(데모 소스 코드 다운로드 포함)</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ko/faq/2248.html" title="Angularjs는 WeChat UI(weui)를 통합합니다." class="aBlack">Angularjs는 WeChat UI(weui)를 통합합니다.</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ko/faq/2351.html" title="JavaScript를 사용하여 중국어 번체와 중국어 간체 간을 빠르게 전환하는 방법과 중국어 간체와 중국어 번체 간 전환을 지원하는 웹사이트의 요령_javascript 기술" class="aBlack">JavaScript를 사용하여 중국어 번체와 중국어 간체 간을 빠르게 전환하는 방법과 중국어 간체와 중국어 번체 간 전환을 지원하는 웹사이트의 요령_javascript 기술</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>공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！</p></div><div class="footermid"><a href="https://m.php.cn/ko/about/us.html">회사 소개</a><a href="https://m.php.cn/ko/about/disclaimer.html">부인 성명</a><a href="https://m.php.cn/ko/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></html>
