Jquery.roll is a simulation of Baidu news non-stop scrolling effect, and support text, picture horizontal vertical scrolling, the function using the method is:
<! DOCTYPE html>
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 ">
<meta name= "description" content= "jquery seamless scrolling effect" >
<title>jquery demo</title>
<style>
Body {font:12px/1.5 Tahoma, "Microsoft Yahei", "Microsoft Ya-hei e\8f6f\96c5\9ed1";}
Body, Div, UL, Li, H1 {margin:0; padding:0;}
. News {margin:100px 0 0 100px;}
. News ul {List-style:none;}
. news-box {width:600px; margin-left:20px height:24px; Background-color: #fcfcfd; overflow:hidden; position:relative ; _zoom:1; }
. news H1 {margin-bottom:15px; padding-left:20px; color: #370188;}
. news-list {Position:absolute}
. news-list {Float:left}
. news-list li {float:left; _display:inline; margin-right:15px; height:24px; line-height:24px; overflow:hidden; word -wrap:normal; }
. news-list Li a {text-decoration:none; color: #000;}
. news-list Li A:hover {
-webkit-transition:color 2s linear,background-color. 3s linear;
-moz-transition:color 2s linear,background-color. 3s linear;
-ms-transition:color 2s linear,background-color. 3s linear;
-o-transition:color 2s linear,background-color. 3s linear;
Transition:color 2s linear,background-color. 3s linear;
Color: #FF4400;
Text-decoration:underline;
}
. news-list li a:visited {color: #290065;}
</style>
<script src= "Http://code.jquery.com/jquery-latest.js" ></script>
<body>
<div id= "J_news" class= "News" >
<div id= "J_roll_container" class= "News-box" >
<ul class= "J_roll_content news-list" >
<li><a href= "http://news.sina.com.cn/c/2013-01-10/121926003955.shtml" target= "_blank" > Japan denies going to China Cruise Diaoyu Island aircraft </a></li>
<li><a href= "http://news.hf365.com/system/2013/01/10/012875943.shtml" target= "_blank" > Japan's Defense Ministry denies firing warning to Chinese aircraft (figure) </a></li>
<li><a href= "http://news.21cn.com/world/guojisaomiao/2013/01/10/14338977.shtml" target= "_blank" > Japan denied warning shooting in the sea surveillance aircraft fear of China and Japan because of the island war </a></li>
</ul>
</div>
</div>
<script>
This refers to the Jquery.roll code
</script>
<script>
$ (function () {
var roll_jquery, contents;
Roll_jquery = $.roll ('. J_roll_content ', ' #J_Roll_Container ', {effect: ' scrollx ', duration:40, delay:500}). Rollrun ();
Contents = $ ('. J_roll_content ');
Contents.bind (' MouseEnter ', function () {
Roll_jquery.rollstop ();
});
Contents.bind (' MouseLeave ', function () {
Roll_jquery.rollrun ();
});
});
</script>
</body>
View Code
<! DOCTYPE html>
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 ">
<meta name= "description" content= "jquery seamless scrolling effect" >
<title>jquery demo</title>
<style>
Body {font:12px/1.5 Tahoma, "Microsoft Yahei", "Microsoft Ya-hei e\8f6f\96c5\9ed1";}
Body, Div, UL, Li, H1 {margin:0; padding:0;}
. News {margin:100px 0 0 100px;}
. News ul {List-style:none;}
. news-box {padding:20px; width:310px height:192px; Background-color: #fcfcfd; overflow:hidden; position:relative;}
. news H1 {margin-bottom:15px; padding-left:20px; color: #370188;}
. news-list {Position:absolute}
. news-list li {width:100%; height:24px; line-height:24px; overflow:hidden; word-wrap:normal;}
. news-list Li a {text-decoration:none; color: #000;}
. news-list Li A:hover {
-webkit-transition:color 2s linear, background-color 3s linear;
-moz-transition:color 2s linear, background-color 3s linear;
-ms-transition:color 2s linear, background-color 3s linear;
-o-transition:color 2s linear, background-color 3s linear;
Transition:color 2s linear, background-color 3s linear;
Color: #FF4400;
Text-decoration:underline;
}
. news-list li a:visited {color: #290065;}
</style>
<script src= "Http://code.jquery.com/jquery-latest.js" ></script>
<body>
<div id= "J_news" class= "News" >
<div id= "J_roll_container" class= "News-box" >
<ul class= "J_roll_content news-list" >
<li><a href= "http://news.ifeng.com/world/detail_2013_01/11/21098447_0.shtml" target= "_blank" > Chinese students are fined for picking up illegal sex workers in Australia </a></li>
<li><a href= "http://news.qq.com/a/20130111/000993.htm" target= "_blank" > north of India and so cold weather has caused hundreds of people to freeze to death this winter </a ></li>
<li><a href= "http://news.qq.com/a/20130111/001251.htm" target= "_blank" > The Italian police forbid to hang the Chinese red Lantern to be accused of dangerous ignition </a ></li>
<li><a href= "http://news.sina.com.cn/c/2013-01-10/121926003955.shtml" target= "_blank" > Japan denies going to China Cruise Diaoyu Island aircraft </a></li>
<li><a href= "http://news.hf365.com/system/2013/01/10/012875943.shtml" target= "_blank" > Japan's Defense Ministry denies firing warning to Chinese aircraft (figure) </a></li>
<li><a href= "http://news.21cn.com/world/guojisaomiao/2013/01/10/14338977.shtml" target= "_blank" > Japan denied warning shooting in the sea surveillance aircraft fear of China and Japan because of the island war </a></li>
<li><a href= "http://military.people.com.cn/n/2013/0110/c1011-20150261.html" target= "_blank" > Chuan Pla held long Baishan Jun </a></li>
<li><a href= "http://news.21cn.com/world/guojisaomiao/2013/01/10/14335623.shtml" target= "_blank" > Anti-submarine performance of China high-tech 6th antisubmarine is better than American p-3c</a></li>
<li><a href= "http://opinion.huanqiu.com/opinion_world/2013-01/3467875.html" target= "_blank" > Zhang Jiangang: 2030 China will round ocean power dream </a></li>
<li><a href= "http://news.hf365.com/system/2013/01/10/012873928.shtml" target= "_blank" >-20 in flight test center Can replace IL-76 for any features </a></li>
<li><a href= "http://mil.sohu.com/20130110/n362988784.shtml" target= "_blank" > The East China Sea Fleet introduced a large number of drone saturation attacks to make the day difficult to parry </a></li>
</ul>
</div>
</div>
<script>
Jquery.extend ({
Roll:function (Contentcls, Contentparentid, configs) {
var settimeid, totalwidth = 0, totalheight = 0,
Firstcontent, secondcontent, contents;
(function () {
var singlecontent, clonecontent, nodelist;
Singlecontent = $ (contentcls, Contentparentid);
NodeList = Singlecontent.children ();
if (Configs.effect = = ' Scrollx ') {
$.each (nodelist, function (idx, ITM) {
Totalwidth + = $ (ITM). Outerwidth (True);
});
Singlecontent.css ({' width ': totalwidth + ' px '});
}
else if (Configs.effect = = ' scrolly ') {
$.each (nodelist, function (idx, ITM) {
Totalheight + = $ (ITM). Outerheight (True);
});
Singlecontent.css ({' Height ': totalheight + ' px '});
}
Clonecontent = Singlecontent.clone ();
Clonecontent.appendto (Contentparentid);
Contents = $ (contentcls, Contentparentid);
Firstcontent = Contents[0];
Secondcontent = contents[1];
if (Configs.effect = = ' Scrollx ') {
$ (firstcontent). css ({' Left ': 0});
$ (secondcontent). css ({' Left ': totalwidth + ' px '});
}
else if (Configs.effect = = ' scrolly ') {
$ (firstcontent). css ({' Top ': 0});
$ (secondcontent). css ({' top ': Totalheight + ' px '});
}
})()
function Cssanimate () {
if (Configs.effect = = ' Scrollx ') {
$ (firstcontent). css ({left:parseint (firstContent.style.left, 1 + ' px '});
$ (secondcontent). css ({left:parseint (secondContent.style.left, 1 + ' px '});
$.each (contents, function (idx, ITM) {
if (parseint (itm.style.left,10) = =-totalwidth) {
$ (ITM). css ({left:totalwidth + ' px '});
}
});
}
else if (Configs.effect = = ' scrolly ') {
$ (firstcontent). css ({top:parseint (firstContent.style.top, 1 + ' px '});
$ (secondcontent). css ({top:parseint (secondContent.style.top, 1 + ' px '});
$.each (contents, function (idx, ITM) {
if (parseint (itm.style.top,10) = =-totalheight) {
$ (ITM). css ({top:totalheight + ' px '});
}
});
}
Settimeid = settimeout (cssanimate, configs.duration);
}
function Rollrun () {
Settimeid = settimeout (cssanimate, Configs.delay);
return jQuery;
}
function Rollstop () {
Cleartimeout (Settimeid);
return jQuery;
}
Return $.extend ({
Rollrun:rollrun,
Rollstop:rollstop
});
}
});
</script>
<script>
$ (function () {
var roll_jquery, contents;
Roll_jquery = $.roll ('. J_roll_content ', ' #J_Roll_Container ', {effect: ' scrolly ', duration:40, delay:500}). Rollrun ();
Contents = $ ('. J_roll_content ');
Contents.bind (' MouseEnter ', function () {
Roll_jquery.rollstop ();
});
Contents.bind (' MouseLeave ', function () {
Roll_jquery.rollrun ();
});
});
</script>
</body>
