<strong>html ファイル<br></strong>gundong-0.1.html <br><div class="codetitle"> <span><a style="CURSOR: pointer" data="76711" class="copybut" id="copybut76711" onclick="doCopy('code76711')"><u>コードをコピー</u></a></span> コードは次のとおりです:</div> <div class="codebody" id="code76711"> <br><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <br><html xmlns="http://www.w3.org/1999/xhtml"> <br><head> <br><meta http-equiv="Content-Type" content=" text/html; charset=utf-8" /> <br><title>複数行スクロールの jQuery ループ ニュース リスト コード</title> <br><style type="text/css"> ; <br>ul,li{margin:0;padding:0} <br>img{border:0px;} <br>a{text-decoration:none;border:0px;} <br>/* 水平スクロール* / <br>#scrollDiv2{border:#ccc 1px ソリッド;} <br>#scrollDiv3{border:#ccc 1px ソリッド;} <br></style> <br><script src="../jquery -1.8.0.min.js" type="text/javascript"></script> <br><script src="wordscroll-0.1.js" type="text/javascript"></スクリプト> <br><script type="text/javascript"> <br>$(document).ready(function(){ <br><br>$.wordScroll({ <br>objId:"scrollDiv2") <br> }); <br>$.wordScroll({ <br>objId:"scrollDiv3", <br>ishorizontal:true <br>}); 🎜></head> <br><div id="scrollDiv2"> <br><ul> <br><li> ;/li> ; <br><li>これはお知らせのタイトルの 2 行目です</li><br><li>これはお知らせのタイトルの 3 行目です</li> ;これはお知らせタイトルの 4 行目です</li><br><li>これはお知らせタイトルの 5 行目です</li>これはお知らせタイトルの 6 行目です< ;/li><BR><li>これはお知らせタイトルの 7 行目です<BR><li>これはお知らせタイトルの 8 行目です<BR><li> ;これはタイトルの 9 行目です <BR></ul> <br><div id="scrollDiv3"> ; <br><li>これはお知らせのタイトルの 1 行目です</li><br><li>これはお知らせのタイトルの 2 行目です</li>お知らせタイトルの 3 行目<br><li>行<br> </li> <li>これはお知らせタイトルの 5 行目です li> <br><li>これはお知らせのタイトルの 6 行目です</li>これはお知らせのタイトルの 7 行目です</li>お知らせタイトルの 8 行目です <br> </li> <li> <br><br> </li> </div> の 9 行目です🎜></body> <br></html> <br><br> <br><br>js ファイル<br>wordscroll-0.1.js<br> <br><br><br><br><br>コードをコピー<br><br> コードは次のとおりです: <br><div class="codebody" id="code68425"> <br><P>/**<br>* Multi-line text scrolling, you can achieve both left and upward scrolling <br>* <br>**/ <br>$.extend({ <br>wordScroll:function(opt,callback){ <br>//alert("suc"); <br>this.defaults = { <br>objId:"", <br>width:300, // Width of each row <br>height:100, // Height of div <br>liHeight:25, // Height of each line<br>lines:2, // Number of lines scrolled each time<br>speed:1000, // Action time<br>interval:2000, // Scroll interval<br>picTimer:0, // Interval Handle, no need to set, just used as an identifier <br>isHorizontal:false // Whether to scroll horizontally <br>} <br>//Parameter initialization<br>var opts = $.extend(this.defaults,opt); <br>// Vertical and horizontal common <br>$("#" opts.objId).css({ <br>width:opts.width, <br>height:opts.height, <br>"min-height": opts.liHeight, <br>"line-height":opts.liHeight "px", <br>overflow:"hidden" <br>}); <br>$("#" opts.objId " li"). css({ <br>height:opts.liHeight <br>}); <br>if(opts.lines==0) <br>opts.lines=1; <br>// Horizontal scrolling<br>if( opts.isHorizontal){ <br>$("#" opts.objId).css({ <br>width:opts.width*opts.lines "px" <br>}); <br>$("#" opts.objId " li").css({ <br>"display":"block", <br>"float":"left", <br>"width":opts.width "px" <br>} ); <br>$("#" opts.objId " ul").css({ <br>width:$("#" opts.objId).find("li").size()*opts.width "px" <br>});</P><P> // Use horizontally, no scrolling if the screen is not enough<br>if($("#" opts.objId).find("li") .size()<=opts.lines) <br>return; <br>var scrollWidth = 0 - opts.lines*opts.width; <br>}else{ <br>//If there is not enough content for one screen, it will not scroll<br>if($("#" opts.objId).find("li").size()<=parseInt($("#" opts.objId).height()/opts.liHeight,10 )) <br>return; <br>var upHeight=0-opts.lines*opts.liHeight; <br>} <br>// Horizontal scrolling<br>function scrollLeft(){ <br>$("#" opts.objId).find("ul:first").animate({ <br>marginLeft:scrollWidth <br>},opts.speed,function(){ <br>for(i=1;i<=opts. lines;i ){ <br>$("#" opts.objId).find("li:first").appendTo($("#" opts.objId).find("ul:first")); <br>} <br>$("#" opts.objId).find("ul:first").css({marginLeft:0}); <br>}); <br>}; <br>// Vertical scrolling<br>function scrollUp(){ <br>$("#" opts.objId).find("ul:first").animate({ <br>marginTop:upHeight <br>},opts.speed, function(){ <br>for(i=1;i<=opts.lines;i ){ <br>$("#" opts.objId).find("li:first").appendTo($(" #" opts.objId).find("ul:first")); <br>} <br>$("#" opts.objId).find("ul:first").css({marginTop:0} ; () { <br>clearInterval(opts.picTimer); <br>},function() { <br>opts.picTimer = setInterval(function() { <br>// Determine whether to perform horizontal or vertical scrolling<br>if (opts.isHorizontal) <br>scrollLeft(); <br>else <br>scrollUp(); <br>},opts.interval); // Autoplay interval, unit: milliseconds <br>}).trigger ("mouseleave"); <br>} <br>}) <br></P> <br><br> </div>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
