집 >웹 프론트엔드 >JS 튜토리얼 >jquery는 Sina Weibo 댓글 스크롤 효과를 구현합니다.

jquery는 Sina Weibo 댓글 스크롤 효과를 구현합니다.

WBOY원래의: 2016-05-16 15:46:421368검색

이 기사의 예에서는 jquery와 유사한 Sina Weibo 댓글 스크롤 효과의 구현을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 세부 내용은 다음과 같습니다.

여기서 JQuery를 사용하여 댓글 스크롤 효과를 구현했는데, 이는 Sina Weibo 로비 텍스트 스크롤 효과를 모방한 것입니다. 과거에는 많은 사람들이 숭배했던 효과였지만 지금은 어디에서나 모방되고 있습니다. 하하. , 댓글과 아바타가 함께 아래로 스크롤됩니다. 괜찮다고 생각되면 아래로 밀어보세요.

효과를 미리 보려면 여기를 클릭하세요.

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

작동 효과는 아래와 같습니다.

구체적인 코드는 다음과 같습니다.

<!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는 Sina Weibo 댓글 스크롤 효과를 구현합니다." 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>

이 기사가 모든 사람의 jquery 프로그래밍 설계에 도움이 되기를 바랍니다.

성명：

이전 기사：일정한 간격으로 그림을 숨기고 표시하는 JavaScript 방법_javascript 기술다음 기사：일정한 간격으로 그림을 숨기고 표시하는 JavaScript 방법_javascript 기술

jquery는 Sina Weibo 댓글 스크롤 효과를 구현합니다.

관련 기사