JS for news scrolling-single-line scrolling or multi-line scrolling

Source: Internet
Author: User
Tags add time

Note: All are reproduced.

First, one-line scrolling:

--------Copy the following code directly to test reprint http://www.3lian.com/edu/2011/06-30/4986.html-----------

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<title> Web Effects-text effects-very good progressive news scrolling effect </title>
<fck:meta http-equiv= "Content-type" content= "text/html;charset=gb2312"/>
<!--Add the following code between <style type= "Text/css" >
a{
Display:block;
font-size:12px;
line-height:18px;
Text-decoration:none;
Color: #333;
font-family:arial;
}
. shell{
Background:url (/effectimages/xml.gif) no-repeat 4px 5px;
border:1px solid #aaa;
width:400px;
padding:3px 2px 2px 20px;
}
#div1 {
height:18px;
Overflow:hidden;
}
</style>
<body>
<!--Add the following code between <body> and </body>--
<div class= "Shell" >
<div id= "Div1" >
<a href= "javascript:" _fcksavedurl= "javascript:" > Consult a master to help me see this code: Flash display </a>
<a href= "javascript:" _fcksavedurl= "javascript:" > Ask for symbol display issues under UTF-8 edit </a>
<a href= "javascript:" _fcksavedurl= "javascript:" >jquery do a sliding effect, do not know how to increase the delay, now too sensitive </a>
<a href= "javascript:" _fcksavedurl= "javascript:" > Technical Research: QQ2009 version of the button fade the origin of the Fade </a>
<a href= "javascript:" _fcksavedurl= "javascript:" >javascript reading JSON data and pagination display, support keyboard and scroll wheel </a>
<a href= "javascript:" _fcksavedurl= "javascript:" > Strange png files, for the purpose of confusion </a>
<a href= "javascript:" _fcksavedurl= "javascript:" > Update lhgdialog-ver2.0.1 pop-up widgets </a>
</div>
</div>
<script language= "JavaScript" >
var Box=document.getelementbyid ("Div1"), can=true;
box.innerhtml+=box.innerhtml;
Box.onmouseover=function () {can=false};
Box.onmouseout=function () {can=true};
New function () {
var stop=box.scrolltop%18==0&&!can;
if (!stop) box.scrolltop==parseint (BOX.SCROLLHEIGHT/2)? box.scrolltop=0:box.scrolltop++;
SetTimeout (arguments.callee,box.scrolltop%18?10:1500);
};
</script>
</body>

--------------------------------------------

------------Multi-line scrolling, copy the code to achieve----------------------------

Reprint http://www.cnblogs.com/dearxinli/p/3770803.html

-----------------------------------------------------------------------------

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "/>
<title> Untitled Document </title>

<style type= "Text/css" >
. Inform {
border:1px solid #E5E5E5;
padding:1px;
}
. inform H2 {
Background:none Repeat scroll 0 0 #015198;
Font-weight:normal;
line-height:30px;
}
. Inform H2 span {
Color: #FFFFFF;
font-size:16px;
padding-left:10px;
}
. Inform H2 a {
Color: #FFFFFF;
Float:right;
font-size:14px;
padding-right:3px;
}
. Inform UL {
height:170px;
margin-top:7px;
Overflow:hidden;
}
. Inform UL Li {
line-height:26px;
padding-left:12px;
}
</style>

<body>
<div class= "Inform" >
<div style= "height:170px; Overflow:hidden ">
<ul id= "marquee" style= "height:285px" >
<li><a title= "Add Time: 2014-06-05 clicks: 139" href= "/index.php?r=archives/default/new&id=6044&t= 1401953184 "target=" _blank ">
...</a></li> of special funds for clinical medical Research in China Medical Association
<li><a title= "Add Time: 2014-06-05 clicks: 192" href= "/index.php?r=archives/default/new&id=6043&t= 1401953184 "target=" _blank ">
The activity plan of the Staff Culture and Arts Festival of the four </a></li>
<li><a title= "Add Time: 2014-06-04 clicks: 154" href= "/index.php?r=archives/default/new&id=6040&t= 1401953184 "target=" _blank ">
On the development of national technical standard resource Service ...</a></li>
<li><a title= "Add Time: 2014-06-04 clicks: 145" href= "/index.php?r=archives/default/new&id=6038&t= 1401953184 "target=" _blank ">
Ministry of Science and Technology on organizational declaration of basic ...</a></li>
<li><a title= "Add Time: 2014-06-03 clicks: 203" href= "/index.php?r=archives/default/new&id=6032&t= 1401953184 "target=" _blank ">
About the issue of the National Natural Science Fund, excellent ...</a></li>
<li><a title= "Add Time: 2014-06-03 clicks:" Href= "/index.php?r=archives/default/new&id=6031&t= 1401953184 "target=" _blank ">
UpToDate Database Training Seminar </a></li>
<li><a title= "Add Time: 2014-05-29 clicks: 288" href= "/index.php?r=archives/default/new&id=6015&t= 1401953184 "target=" _blank ">
Hand Hygiene Work Newsletter </a></li>
<li><a title= "Add Time: 2014-05-26 clicks: 675" href= "/index.php?r=archives/default/new&id=5831&t= 1401953184 "target=" _blank ">
2014 "Dragon Boat Festival" door emergency medical ...</a></li>
<li><a title= "Add Time: 2014-05-21 clicks: 736" href= "/index.php?r=archives/default/new&id=5671&t= 1401953184 "target=" _blank ">
National Natural Science Foundation Committee on ...</a></li>
<li><a title= "Add Time: 2014-05-21 clicks: 622" href= "/index.php?r=archives/default/new&id=5669&t= 1401953184 "target=" _blank ">
UpToDate Database Trial Notification </a></li>

<li>&nbsp;</li>
</ul>
</div>

<script type= "Text/javascript" >
Window.onload = function () {
SetTimeout ("StartMarquee, 0, ' marquee ')", 1000);
}
function StartMarquee (lh,speed,delay,id) {

var T;
var p = false;
var o = document.getElementById (ID);
o.innerhtml + = o.innerhtml + o.innerhtml + o.innerhtml;
O.onmouseover = function () {
P = true;
}
O.onmouseout = function () {
p = false;
}
o.scrolltop = 0;

function Start () {
t = setinterval (scrolling,speed);
if (!p) o.scrolltop + = 2;
}

function scrolling () {
if (O.SCROLLTOP%LH! = 0) {
O.scrolltop + = 2;
if (o.scrolltop >= o.scrollheight/2) o.scrolltop = 0;
} else {
Clearinterval (t);
SetTimeout (Start,delay);
}
}
SetTimeout (Start,delay);
}

</script>
</div>
</body>

-----------------------------

JS for news scrolling-single-line scrolling or multi-line scrolling

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.