Dieser Artikel stellt jQuery hauptsächlich vor, um den Scroll-Effekt der Werbeleiste zu erzielen. Ich hoffe, dass er jedem helfen kann.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{padding: 0px;margin: 0px;}
#list{width: 150px;height: 310px;margin: 0px auto;border: 1px solid #ccc;overflow: hidden;}
#list li{list-style: none;height: 30px;line-height: 30px;border-bottom: 1px dashed #999;}
</style>
<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
<script>
var marginTop = 0;//注意命名
var scroll = true;
//定时函数，每150毫秒执行一次函数
setInterval(function(){
if(scroll){
$("#list li:first").animate( //第一个li开始执行动画
{marginTop:marginTop--}, //设置上面的外边距自减
0,
function(){ //动画之后执行的函数
if( -marginTop==$(this).height()+1){ //判断li移动的距离是否超过自身的高度
var $f = $(this); //复制一个li
$(this).remove(); //把第一个移除。第一个移除之后，第二个就自动变为第一个
marginTop=0;
$f.css("margin-top","0px");
$("ul").append($f); //把第一个追加加到列表的最后，变成一个无缝连接
}
}
);
}
},150);
$(function(){
$("ul").hover(function(){scroll = false;},function(){scroll = true;});
});
</script>
</head>
<body>
<p id="list">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
</ul>
</p>
</body>
</html>Verwandte Empfehlungen:
Javascript-Tutorial zur Erzielung kreisförmiger Werbestreifeneffekte
HTML+CSS-Floating-Werbestreifen-Implementierung, Zerlegung_HTML/XHTML_Webseitenproduktion
Das obige ist der detaillierte Inhalt vonBeispiel für die gemeinsame Nutzung der jQuery-Implementierung des Werbebanner-Scrolling-Effekts. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
