| <! 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=utf-8 "/>
<title> Untitled Document </title>
<style type= "Text/css" >
<!--
body,td,th {
font-size:12px;
}
A
font-size:12px;
Color: #09C;
}
a:link {
Text-decoration:none;
}
a:visited {
Text-decoration:none;
Color: #09C;
}
a:hover {
Text-decoration:underline;
Color: #930;
}
a:active {
Text-decoration:none;
Color: #09C;
}
*{margin:0; padding:0;}
. header{
height:60px;
Background-color: #666;
Color: #FFF;
}
. Header h1{
PADDING:6PX 0;
}
. demo{
width:300px;
height:100px;
Overflow:hidden;
Float:left;
margin:100px 0 0 100px;
border:1px solid #09F;
padding:10px;
}
. Demo ul{
List-style:none;
Height:auto;
}
. Demo UL li{
height:24px;
line-height:24px;
} -->
</style>
<script type=text/javascript src= "Http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" ></ Script>
<script type= "Text/javascript" >
(function ($) {
$.fn.myscroll = function (options) { Default configuration
var defaults = {
SPEED:40,
Scrolling speed, the greater the value, the slower the speed
ROWHEIGHT:24//height of each line
}; var opts = $.extend ({}, defaults, options),
IntId = []; function Marquee (obj, step) {
obj.find ("ul"). Animate ({
& nbsp; margintop: '-=1 '
}, 0, function () {
& nbsp; var s = Math.Abs (parseint ($ (this). CSS ("Margin-top"));
if (s >= step) {
$ (this). Find ("Li"). Slice (0, 1). Appendto ($ (this));
$ (this). CSS ("Margin-top", 0);
}
});
}
This.each (function (i) {
var sh = opts["RowHeight"],
Speed = opts["Speed"],
_this = $ (this);
Intid[i] = setinterval (function () {
Marquee (_this, SH);
}, speed); _this.hover (function () {
Clearinterval (Intid[i]);
}, function () {
Intid[i] = setinterval (function () {
Marquee (_this, SH);
}, speed);
}); }); }
}) (JQuery);
$ (function () {
$ ("Div.demo"). Myscroll ({
speed:40,
rowheight:24
});
});
</script>
<body>
<div class= "header"
</div>
<div class= "Demo"
<ul>
<li><a title= "One of the webOS desktop effects of imitation webqq" Href= "" > Imitation webqq do a webOS desktop effect </a></li>
<li><a title= "Picture scrolling plug-in Myscroll" "> Picture scrolling plug-in Myscroll</a></li>
<li><a title= "using jquery to implement the middle mouse button wheel effect" href= "> Using jquery to implement the middle mouse button wheel effect </a></li>
<li><a title= "How to become a Web design expert" href= "> How to Become a Web design expert </a ></li>
<li><a title= "javascript--to find the maximum minimum value of an array" href= ">javascript--to find the maximum minimum value of an array </a ></li>
<li><a title= "jquery Plugin---picture adaptive container size plugin" href= "" >jquery Plugin---picture adaptive container size plugin </a ></li>
<li><a title= "use css3-pie so that IE can also support CSS3" href= "" > Use Css3-pie so IE can also support css3</a ></li>
</ul>
</div>
<div class= "Demo"
<ul>
<li><a title= "a webOS Desktop effect WEBQQ" > Imitation webqq do a webOS desktop effect </a></li>
<li><a title= "Picture scrolling plug-in Myscroll" "> Picture scrolling plug-in Myscroll</a></li>
<li><a title= "using jquery to implement the middle mouse button wheel effect" href= "> Using jquery to implement the middle mouse button wheel effect </a></li>
<li><a title= "How to become a Web design expert" href= "> How to Become a Web design expert </a ></li>
<li><a title= "javascript--to find the maximum minimum value of an array" href= ">javascript--to find the maximum minimum value of an array </a ></li>
<li><a title= "jquery Plugin---picture adaptive container size plugin" href= "" >jquery Plugin---picture adaptive container size plugin </a ></li>
<li><a title= "use css3-pie so that IE can also support CSS3" href= "" > Use Css3-pie so IE can also support css3</a ></li>
</ul>
</div>
</body>
|
