jquery multi-line scrolling/scroll left or up/response to mouse implementation ideas and code_jquery

html file
gundong-0.1.html

Copy code The code is as follows:

< ;/head>

• This is the first line of the announcement title
• This is the second line of the announcement title


• This is the third line of the announcement title


• This is The fourth line of the announcement title


• This is the fifth line of the announcement title


• This is the sixth line of the announcement title


• This is the seventh line of the announcement title


• This is the eighth line of the announcement title


• This is the announcement The ninth line of the title

< ;li>This is the first line of the announcement title

• This is the second line of the announcement title


• This is the third line of the announcement title Line


• This is the fourth line of the announcement title


• This is the fifth line of the announcement title

< li>This is the sixth line of the announcement title

• This is the seventh line of the announcement title


• This is the eighth line of the announcement title


• This is the ninth line of the announcement title

js file
wordscroll-0.1.js

Copy code The code is as follows:

/**
* 여러 줄 텍스트 스크롤, 왼쪽 및 위쪽 스크롤 모두 가능
*
**/
$.extend({
wordScroll:function(opt,callback){
//alert("suc");
this.defaults = {
objId:"",
width:300, // 각 행의 너비
height:100, // div의 높이
liHeight:25, // 각 라인의 높이
lines:2, // 매번 스크롤되는 라인 수
speed:1000, // Action time
interval:2000, // 스크롤 간격
picTimer:0, // 간격 핸들, 설정할 필요 없이 식별자로 사용됩니다.
isHorizontal:false // 가로 스크롤 여부
}
//매개변수 초기화
var opts = $.extend(this.defaults, opt);
// 세로 및 가로 공통
$("#" 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; 가로 스크롤
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"
});

// 가로로 사용, 화면이 충분하지 않으면 스크롤하지 않음
if($("#" opts. objId).find("li") .size()<=opts.lines)
return;
var scrollWidth = 0 - opts.lines*opts.width
}else{
//한 화면에 콘텐츠가 충분하지 않으면 스크롤되지 않습니다
if($("#" opts.objId).find("li").size()<=parseInt($("# " opts.objId).height()/opts.liHeight,10 ))
return;
var upHeight=0-opts.lines*opts.liHeight;
}
// 가로 스크롤
function scrollLeft(){
$("#" opts.objId).find("ul:first").animate({
marginLeft:scrollWidth
},opts.speed,function() {
for(i=1;i<=opts.lines;i ){
$("#" opts.objId).find("li:first").appendTo($("#" opts .objId).find("ul:first"));
}
$("#" opts.objId).find("ul:first").css({marginLeft:0}); 🎜>});
};
// 수직 스크롤
function scrollUp(){
$("#" opts.objId).find("ul:first").animate({
marginTop:upHeight
},opts.speed, function(){
for(i=1;i<=opts.lines;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() {
// 가로 스크롤 또는 세로 스크롤 수행 여부 결정
if (opts.isHorizontal)
scrollLeft()
else
scrollUp()
},opts.interval) ; // 자동 재생 간격, 단위: 밀리초
}).trigger ("mouseleave")