In diesem Artikel wird hauptsächlich der von jQuery implementierte intermittierende Bildlaufeffekt von Text Zeile für Zeile vorgestellt und die Betriebsfähigkeiten im Zusammenhang mit der dynamischen Transformation von Seitenelementstilen basierend auf Zeitfunktionen durch jQuery erläutert Artikel
Der spezifische Code lautet wie folgt:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>www.php.cn jQuery文字逐行向上滚动代码</title>
<link href="css/index.css" rel="external nofollow" rel="stylesheet" type="text/css">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<style>
*{ margin:0px; padding:0px; font-family:'微软雅黑'; -webkit-tap-highlight-color:rgba(0,0,0,0); }
li{ list-style:none }
img{ border:none}
a{text-decoration:none;}
/* -------------------------摇奖排行榜----------------------------------- */
.Top_Record{}
.record_Top{width:90%; height:50px; text-align:center; line-height:50px; margin:30px auto 0px; color:#000;}
.topRec_List dl,.maquee{ width:90%; overflow:hidden; margin:0 auto; color:#7C7C7C}
.topRec_List dd{ float:left; text-align:center; border-bottom:1px solid #1B96EE; color:#1B96EE;}
.topRec_List dl dd:nth-child(1){ width:17%; height:40px; line-height:40px; }
.topRec_List dl dd:nth-child(2){ width:18%; height:40px; line-height:40px; }
.topRec_List dl dd:nth-child(3){ width:25%; height:40px; line-height:40px; }
.topRec_List dl dd:nth-child(4){ width:40%; height:40px; line-height:40px; }
.maquee{ height:195px;}
.topRec_List ul{ width:100%; height:195px;}
.topRec_List li{ width:100%; height:38px; line-height:38px; text-align:center; font-size:12px; border-bottom: 1px dashed #aaa;}
/*.topRec_List li:nth-child(2n){ background:#077cd0}*/
.topRec_List li p{ float:left;}
.topRec_List li p:nth-child(1){ width:17%;}
.topRec_List li p:nth-child(2){ width:18%;}
.topRec_List li p:nth-child(3){ width:25%;}
.topRec_List li p:nth-child(4){ width:40%;}
.apple a{display:block; text-decoration:none;}
.apple,.aa{ width:90%; height:50px; overflow:hidden; margin:30px auto; border:1px solid #1B96EE;}
.apple a,.aa a{ width:100%; height:50px; line-height:50px; text-indent:20px; color:#1B96EE;}
.aa {word-wrap:break-word;line-height:50px; color:#1B96EE;}
</style>
</head>
<body>
<p class="Top_Record">
<p class="record_Top">摇奖排行榜</p>
<p class="topRec_List">
<dl>
<dd>编号</dd>
<dd>姓名</dd>
<dd>奖项</dd>
<dd>时间</dd>
</dl>
<p class="maquee">
<ul>
<li>
<p>1</p>
<p>王**</p>
<p>中了30元</p>
<p>2014/12/30 14:20</p>
</li>
<li>
<p>2</p>
<p>王**</p>
<p>中了30元</p>
<p>2014/12/30 14:20</p>
</li>
<li>
<p>3</p>
<p>王**</p>
<p>中了30元</p>
<p>2014/12/30 14:20</p>
</li>
<li>
<p>4</p>
<p>王**</p>
<p>中了30元</p>
<p>2014/12/30 14:20</p>
</li>
<li>
<p>5</p>
<p>王**</p>
<p>中了30元</p>
<p>2014/12/30 14:20</p>
</li>
<li>
<p>6</p>
<p>王**</p>
<p>中了30元</p>
<p>2014/12/30 14:20</p>
</li>
<li>
<p>7</p>
<p>王**</p>
<p>中了30元</p>
<p>2014/12/30 14:20</p>
</li>
<li>
<p>8</p>
<p>王**</p>
<p>中了30元</p>
<p>2014/12/30 14:20</p>
</li>
</ul>
</p>
</p>
</p>
<script type="text/javascript">
function autoScroll(obj){
$(obj).find("ul").animate({
marginTop : "-39px"
},1000,function(){
$(this).css({marginTop : "0px"}).find("li:first").appendTo(this);
})
}
$(function(){
var scroll=setInterval('autoScroll(".maquee")',1500);
$(".maquee").hover(function(){
console.log("aaa");
clearInterval(scroll);
},function(){
scroll=setInterval('autoScroll(".maquee")',1500);
});
});
</script>
</body>
</html>Freunde, die sich für diesen Artikel interessieren, können auf den Quellcode verweisen wird für Ihr Studium hilfreich sein! Willkommen auf der chinesischen PHP-Website!
Verwandte Empfehlungen:
Das Auf- und Abrunden von jQuery eignet sich für Paging-Abfragen.
jQuery durchläuft die übergeordneten Elemente des DOM Baum nach oben ( ), Eltern(), Nächstes()
Das obige ist der detaillierte Inhalt vonBeispiel für einen von jQuery implementierten, intermittierenden Textzeilen-nach-oben-Scrolleffekt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
