Home > Developer > Web Develop
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> </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
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
