Heim > Web-Frontend > js-Tutorial > jquery implementiert den Kommentar-Scrolling-Effekt von Sina Weibo_jquery

jquery implementiert den Kommentar-Scrolling-Effekt von Sina Weibo_jquery

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
Freigeben: 2016-05-16 15:46:42
Original
1453 Leute haben es durchsucht

Das Beispiel in diesem Artikel beschreibt die Implementierung des jQuery-ähnlichen Kommentar-Scroll-Effekts von Sina Weibo. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

JQuery wird hier verwendet, um den Kommentar-Scroll-Effekt zu erzielen, der den Text-Scroll-Effekt von Sina Weibo imitiert. Dieser Effekt wurde früher von vielen Menschen verehrt, aber jetzt wird er überall nachgeahmt , mit Kommentaren und Avataren, wird in einer nahtlosen Schleife ein- und ausgeblendet. Wenn Sie es gut finden, drücken Sie es einfach nach unten.

Klicken Sie hier, um eine Vorschau des Effekts anzuzeigen:

http://demo.jb51.net/js/2015/jquery-sina-scroll-pl-codes/

Der Betriebseffekt ist wie folgt:

Der spezifische Code lautet wie folgt:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>漂亮的评论滚动效果,带头像图片一起滚动</title>
<style>
html,body{font-family:Verdana,sans-serif; font-size:12px;}
ul{padding:0;} 
a:link{text-decoration:none;}
.box {padding:30px 0 30px 0;background: #C05732;}
.box_content a {color:#E6E5CC;}
.box_content {clear:both; overflow:hidden; width:287px; padding:0 0 0 30px;}
.r_comments{position:relative; height:262px;}
.r_comments ul{list-style:none outside none; margin-left:0px; border-top:1px dashed #a04524;}
.r_comments ul li{padding:5px 0px; line-height:20px; border-bottom:1px dashed #8C391C; border-top:1px dashed #D08364;}
.r_comments li img{background:#FFF; border:1px solid#999; height:32px; float:left; padding:1px; margin:4px 4px 0 0;}
</style>
</head>
<body>
<div class="box">
 <div class="box_content r_comments">
 <ul style="margin-top: 0px;" id="rcslider">
  <li style="opacity: 0.6;"><img class="avatar avatar-32 photo lazy"  src="/static/imghw/default1.png"  data-src="images/0.png"  alt="jquery implementiert den Kommentar-Scrolling-Effekt von Sina Weibo_jquery"    style="max-width:90%"  style="max-width:90%"> <a href="#">零零零000:<br>
  正在学习wordpress,正好找到这篇</a><br>
  </li>
  <li style="opacity: 0.6;"><img class="avatar avatar-32 photo lazy"  src="/static/imghw/default1.png"  data-src="images/1.png"  alt="大世界壹壹壹111"    style="max-width:90%"  style="max-width:90%"> <a href="#">壹壹壹111:<br>
  谷歌搜了下进来了。大牛。</a><br>
  </li>
  <li style="opacity: 0.6;"><img class="avatar avatar-32 photo lazy"  src="/static/imghw/default1.png"  data-src="images/2.png"  alt="天涯海角22"    style="max-width:90%"  style="max-width:90%"> <a href="#">贰贰贰222:<br>
  嘿嘿,看了你的那篇《漂亮的评论滚动效果》</a><br>
  </li>
  <li style="opacity: 0.6;"><img class="avatar avatar-32 photo lazy"  src="/static/imghw/default1.png"  data-src="images/3.png"  alt="小小少年"    style="max-width:90%"  style="max-width:90%"> <a href="#">打跑小日本-叁叁叁333:<br>
  请教个问题,使用media query后</a><br>
  </li>
  <li style="opacity: 0.6;"><img class="avatar avatar-32 photo lazy"  src="/static/imghw/default1.png"  data-src="images/4.png"  alt="大块头儿郎4"    style="max-width:90%"  style="max-width:90%"> <a href="#">大块头儿郎4:<br>
  吹吧,这还挺不错,这个可以测试一下</a><br>
  </li>
 </ul>
 </div>
</div>
<script src="jquery-1.6.2.min.js" type="text/javascript"></script> 
<script type="text/javascript">
jQuery(function(a) {
 a(function() {
  var b;
  a("#rcslider").hover(function() {
   clearInterval(b)
  },
  function() {
   b = setInterval(function() {
    var b = a("#rcslider"),
    c = b.find("li:last").height();
    b.animate({
     marginTop: c + 3 + "px"
    },
    1e3,
    function() {
     b.find("li:last").prependTo(b),
     b.find("li:first").hide(),
     b.css({
      marginTop: 0
     }),
     b.find("li:first").fadeIn(1e3)
    })
   },
   3e3)
  }).trigger("mouseleave")
 }),
 a(document).ready(function() {
  a("#rcslider li").css({
   opacity: ".6"
  }),
  a("#rcslider li").hover(function() {
   a(this).stop().fadeTo(300, 1)
  },
  function() {
   a(this).stop().fadeTo(300, .6)
  })
 })
});
</script>
</body>
</html>
Nach dem Login kopieren

Ich hoffe, dass dieser Artikel für das JQuery-Programmierungsdesign aller hilfreich sein wird.

Verwandte Etiketten:
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage