テキストスクロール効果を実現
8165 ワード
<html>
<head>
<meta charset="UTF-8">
<title>title>
<script src="../zk1/js/jquery.min.js" type="text/javascript" charset="utf-8">script>
<style type="text/css">
#tbheadline li{
list-style: none;
height: 40px;
position: relative;
top: 10px;
left: 10px;
line-height: 20px;
}
#tbheadline li span{
width: 40px;
display: block;
border: 1px solid red;
border-radius: 10px;
font-size: 13px;
float: left;
text-align: center;
color: tomato;
}
#tbheadline li p{
margin-left: 20px;
float: left;
}
style>
head>
<body>
<ul id="tbheadline">
<li><span> span> <p> top p>li>
<li><span> 11span> <p> 11 p>li>
<li><span> span> <p>2016 p>li>
<li><span> 11span> <p>TFboys ！p>li>
<li><span> span> <p> MAX F ！p>li>
ul>
body>
<script type="text/javascript">
function textScroll(){
$(function(){
$('#tbheadline li').eq(1).fadeOut(100,function(){
// alert($(this).clone().html());
// : ，remove() 。
$(this).clone().appendTo($(this).parent()).fadeIn(100).siblings().hide();
$(this).remove();
});
});
}
setInterval('textScroll()',2000);
script>
html>