jqueryの複数行スクロール/左または上にスクロール/マウス実装のアイデアとcode_jqueryへの応答

html ファイル gundong-0.1.html コードをコピー コードは次のとおりです: 複数行スクロールの jQuery ループ ニュース リスト コード ; ul,li{margin:0;padding:0} img{border:0px;} a{text-decoration:none;border:0px;} /* 水平スクロール* / #scrollDiv2{border:#ccc 1px ソリッド;} #scrollDiv3{border:#ccc 1px ソリッド;} $(document).ready(function(){

$.wordScroll({ objId:"scrollDiv2") }); $.wordScroll({ objId:"scrollDiv3", ishorizontal:true }); 🎜> ;/li> ; これはお知らせのタイトルの 2 行目です これはお知らせのタイトルの 3 行目です ;これはお知らせタイトルの 4 行目です これはお知らせタイトルの 5 行目です これはお知らせタイトルの 6 行目です これはお知らせタイトルの 7 行目です これはお知らせタイトルの 8 行目です ;これはタイトルの 9 行目です ; これはお知らせのタイトルの 1 行目です これはお知らせのタイトルの 2 行目です お知らせタイトルの 3 行目 行 これはお知らせタイトルの 5 行目です li> これはお知らせのタイトルの 6 行目です これはお知らせのタイトルの 7 行目です お知らせタイトルの 8 行目です

の 9 行目です🎜>

js ファイル wordscroll-0.1.js

コードをコピー

コードは次のとおりです: /** * Multi-line text scrolling, you can achieve both left and upward scrolling * **/ $.extend({ wordScroll:function(opt,callback){ //alert("suc"); this.defaults = { objId:"", width:300, // Width of each row height:100, // Height of div liHeight:25, // Height of each line lines:2, // Number of lines scrolled each time speed:1000, // Action time interval:2000, // Scroll interval picTimer:0, // Interval Handle, no need to set, just used as an identifier isHorizontal:false // Whether to scroll horizontally } //Parameter initialization var opts = $.extend(this.defaults,opt); // Vertical and horizontal common $("#" opts.objId).css({ width:opts.width, height:opts.height, "min-height": opts.liHeight, "line-height":opts.liHeight "px", overflow:"hidden" }); $("#" opts.objId " li"). css({ height:opts.liHeight }); if(opts.lines==0) opts.lines=1; // Horizontal scrolling if( opts.isHorizontal){ $("#" opts.objId).css({ width:opts.width*opts.lines "px" }); $("#" opts.objId " li").css({ "display":"block", "float":"left", "width":opts.width "px" } ); $("#" opts.objId " ul").css({ width:$("#" opts.objId).find("li").size()*opts.width "px" });

// Use horizontally, no scrolling if the screen is not enough if($("#" opts.objId).find("li") .size() return; var scrollWidth = 0 - opts.lines*opts.width; }else{ //If there is not enough content for one screen, it will not scroll if($("#" opts.objId).find("li").size() return; var upHeight=0-opts.lines*opts.liHeight; } // Horizontal scrolling function scrollLeft(){ $("#" opts.objId).find("ul:first").animate({ marginLeft:scrollWidth },opts.speed,function(){ for(i=1;i $("#" opts.objId).find("li:first").appendTo($("#" opts.objId).find("ul:first")); } $("#" opts.objId).find("ul:first").css({marginLeft:0}); }); }; // Vertical scrolling function scrollUp(){ $("#" opts.objId).find("ul:first").animate({ marginTop:upHeight },opts.speed, function(){ for(i=1;i $("#" opts.objId).find("li:first").appendTo($(" #" opts.objId).find("ul:first")); } $("#" opts.objId).find("ul:first").css({marginTop:0} ; () { clearInterval(opts.picTimer); },function() { opts.picTimer = setInterval(function() { // Determine whether to perform horizontal or vertical scrolling if (opts.isHorizontal) scrollLeft(); else scrollUp(); },opts.interval); // Autoplay interval, unit: milliseconds }).trigger ("mouseleave"); } })