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

jquery implementiert den Kommentar-Scrolling-Effekt von Sina Weibo_jquery

WBOYOriginal: 2016-05-16 15:46:421315Durchsuche

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 alt="jquery implementiert den Kommentar-Scrolling-Effekt von Sina Weibo_jquery" src="images/0.png" class="avatar avatar-32 photo"    style="max-width:90%"  style="max-width:90%"> <a href="#">零零零000：<br>
  正在学习wordpress，正好找到这篇</a><br>
  </li>
  <li style="opacity: 0.6;"><img alt="大世界壹壹壹111" src="images/1.png" class="avatar avatar-32 photo"    style="max-width:90%"  style="max-width:90%"> <a href="#">壹壹壹111：<br>
  谷歌搜了下进来了。大牛。</a><br>
  </li>
  <li style="opacity: 0.6;"><img alt="天涯海角22" src="images/2.png" class="avatar avatar-32 photo"    style="max-width:90%"  style="max-width:90%"> <a href="#">贰贰贰222：<br>
  嘿嘿，看了你的那篇《漂亮的评论滚动效果》</a><br>
  </li>
  <li style="opacity: 0.6;"><img alt="小小少年" src="images/3.png" class="avatar avatar-32 photo"    style="max-width:90%"  style="max-width:90%"> <a href="#">打跑小日本-叁叁叁333：<br>
  请教个问题，使用media query后</a><br>
  </li>
  <li style="opacity: 0.6;"><img alt="大块头儿郎4" src="images/4.png" class="avatar avatar-32 photo"    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>

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

Stellungnahme：

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

Vorheriger Artikel：JavaScript-Methode zum Ein- und Ausblenden von Bildern in regelmäßigen Abständen. Javascript-KenntnisseNächster Artikel：JavaScript-Methode zum Ein- und Ausblenden von Bildern in regelmäßigen Abständen. Javascript-Kenntnisse

In Verbindung stehende Artikel

Mehr sehen