Perfectly compatible with the major browsers jQuery copy sina text fade in and out of intermittent scrolling effect
- 2020-03-30 04:19:32
- OfStack
1, effect and function description copy sina weibo picture text list up and down fade intermittently scroll up and down
2, implementation principle must first set within the div can only display four pictures so much out of the picture hidden automatically and then add images in an animation event they can roll playing out scroll effect is li tags inside the content of the text and images to each li as a whole when rolling play into the div displayed at the time of the last to leave the div hidden in the entire animation set a time can complete the operation.
3. Operating environment
IE6 IE7 IE8 and above Firefox and Google Chrome browser are available
After creating a new file, unzip the package into the folder. The folder of the picture can be seen at the bottom of the page and you don't need to change the folder name after downloading, because it has already been written and matches the path in html5
5. Change the encoding type to (utf-8 has signature) when creating HTML file to save, so as to make part of the Chinese normal display, change the save type (T) to (all files (*
6, code,
<!DOCTYPE HTML">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif, " The new song typeface ";}
.demo{width:500px;margin:30px auto 0 auto;}
.demo h2{font-size:16px;color:#333;height:52px;line-height:24px;}
#sidebar{color:#AFB0B1;background:#0D171A;float:left;margin:0 0 24px;padding:15px 10px 10px;width:300px;}
#sidebar li{height:90px;overflow:hidden;}
#sidebar li h5{color:#A5A9AB;font-size:1em;margin-bottom:0.5em;}
#sidebar li h5 a{color:#fff;text-decoration:none;}
#sidebar li img{float:left;border:solid 3px #fff;margin-right:8px;display:inline;}
#sidebar li .info{color:#B1B1B1;font-size:1em;}
#sidebar .spyWrapper{height:100%;overflow:hidden;position:relative;}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
(function($){
$.fn.simpleSpy = function (limit, interval){
limit = limit || 4;
interval = interval || 4000;
return this.each(function(){
var $list = $(this),
items = [],
currentItem = limit,
total = 0,
height = $list.find('> li:first').height();
$list.find('> li').each(function(){
items.push('<li>' + $(this).html() + '</li>');
});
total = items.length;
$list.wrap('<div class="spyWrapper" />').parent().css({height : height * limit});
$list.find('> li').filter(':gt(' + (limit - 1) + ')').remove();
function spy(){
var $insert = $(items[currentItem]).css({height : 0,opacity : 0,display : 'none'}).prependTo($list);
$list.find('> li:last').animate({ opacity : 0}, 1000, function(){
$insert.animate({ height : height }, 1000).animate({ opacity : 1 }, 1000);
$(this).remove();
});
currentItem++;
if(currentItem >= total){
currentItem = 0;
}
setTimeout(spy, interval)
}
spy();
});
};
})(jQuery);
</script>
<script type="text/javascript">
$(document).ready(function(){
$('ul.spy').simpleSpy();
});
</script>
</head>
<body>
<div class="demo">
<h2>jquery Copy sina weibo picture text list between scrolling in and out of the scroll </h2>
<div id="sidebar">
<ul class="spy">
<li>
<a href="//www.jb51.net/" title="View round"><img width="70" height="70" src="images/1.png" title="" /></a>
<h5><a href="//www.jb51.net/" title="View round">round</a></h5>
<p class="info">Nov 29th 2008 by neue</p>
</li>
<li>
<a href="//www.jb51.net/" title="View reflet"><img width="70" height="70" src="images/2.png" title="" /></a>
<h5><a href="//www.jb51.net/" title="View reflet">reflet</a></h5>
<p class="info">Nov 29th 2008 by neue</p>
</li>
<li>
<a href="//www.jb51.net/" title="View Kate Moross Little Big Planet"><img width="70" height="70" src="images/3.png" title="" /></a>
<h5><a href="//www.jb51.net/" title="View Kate Moross Little Big Planet">Kate Moross Little Big Planet</a></h5>
<p class="info">Nov 29th 2008 by neue</p>
</li>
<li>
<a href="//www.jb51.net/" title="View Untitled"><img width="70" height="70" src="images/4.png" title="" /></a>
<h5><a href="//www.jb51.net/" title="View Untitled">Untitled</a></h5>
<p class="info">Nov 29th 2008 by mike1052</p>
</li>
<li>
<a href="//www.jb51.net/" title="View My Tutorial's Library"><img width="70" height="70" src="images/5.png" title="" /></a>
<h5><a href="//www.jb51.net/" title="View My Tutorial's Library">My Tutorial's Library</a></h5>
<p class="info">Nov 29th 2008 by FrancescoOnAir</p>
</li>
<li>
<a href="//www.jb51.net/" title="View Sandy — your free personal email assistant - Log in"><img width="70" height="70" src="images/6.png" title="" /></a>
<h5><a href="//www.jb51.net/" title="View Sandy — your free personal email assistant - Log in">Sandy — your free</a></h5>
<p class="info">Nov 29th 2008 by John Doe</p>
</li>
<li>
<a href="//www.jb51.net/" title="View Sandy — your free personal email assistant - Log in"><img width="70" height="70" src="images/7.png" title="" /></a>
<h5><a href="//www.jb51.net/" title="View Sandy — your free personal email assistant - Log in">Sandy — your free</a></h5>
<p class="info">Nov 29th 2008 by John Doe</p>
</li>
<li>
<a href="//www.jb51.net/" title="View Sandy — your free personal email assistant"><img width="70" height="70" src="images/8.png" title="" /></a>
<h5><a href="//www.jb51.net/" title="View Sandy — your free personal email assistant">Sandy — your free</a></h5>
<p class="info">Nov 29th 2008 by John Doe</p>
</li>
<li>
<a href="//www.jb51.net/" title="View Values of n Blog"><img width="70" height="70" src="images/9.png" title="" /></a>
<h5><a href="//www.jb51.net/" title="View Values of n Blog">Values of n Blog</a></h5>
<p class="info">Nov 29th 2008 by John Doe</p>
</li>
</ul>
</div>
</div>
</body>
</html>
Well, it's pretty good.