Home > Web Front-end > JS Tutorial > jquery multi-line scrolling/scroll left or up/response to mouse implementation ideas and code_jquery

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

WBOY
Release: 2016-05-16 17:43:04
Original
1184 people have browsed it
html file
gundong-0.1.html
Copy code The code is as follows:





Multi-line scrolling jQuery loop news list code




< ;/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")

Related labels:
source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template