jquery實現仿新浪微博評論滾動效果_jquery
本文實例講述了jquery實現仿新浪微博評論滾動效果。分享給大家供大家參考。具體如下：
這裡使用jquery實現評論滾動效果，仿新浪微博大廳文字滾動效果，以前有不少人膜拜的效果，現在被模仿的到處都是啦，呵呵，今天這個仍是模仿的，評論和頭像一起向下滾動，最新的一條帶有漸變淡入淡出，無縫循環向下滾動，覺得不錯的就頂下。
點此預覽效果：
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 class="avatar avatar-32 photo lazy" src="/static/imghw/default1.png" data-src="images/0.png" alt="jquery實現仿新浪微博評論滾動效果_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>希望本文所述對大家的jquery程式設計有所幫助。
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
為什麼小紅書最新的評論在最下面？小紅書如何讓自己的評論第一？
Mar 21, 2024 pm 06:21 PM
小紅書作為一個受歡迎的社群電商平台，用戶評論是其中一個重要的互動環節。許多用戶發現，在小紅書上，最新的評論往往出現在留言區的最下面。這是為什麼呢？本文將深入探討小紅書評論區的排序機制，並分享一些讓評論排在前面的技巧。一、為什麼小紅書最新的評論在最下面？小紅書評論區的預設排序方式是依照時間順序顯示評論，即最新評論會顯示在評論區底部。這種排序方式有助於用戶輕鬆查看最新評論，獲取即時資訊。小紅書鼓勵用戶之間的互動，透過將最新的評論置於頁面底部，激勵用戶積極參與評論。這種設計讓用戶能夠瀏覽其他用戶的評論，
自己在抖音留言怎麼刪除？自己在抖音評論別人怎麼查到？
Mar 21, 2024 pm 10:41 PM
人們在抖音上發布影片、瀏覽影片、評論互動，樂此不疲。但在評論互動中，有時我們可能會發表一些不當言論或誤操作，想要刪除這些評論，那麼如何在抖音上刪除自己的評論呢？一、自己在抖音評論怎麼刪除？ 1.登入抖音App，找到你想要刪除的留言所在的影片。 2.在影片頁面下方，找到所有評論清單。 3.找到你的評論，點擊評論右側的心形圖示（按讚），然後點擊刪除圖示（垃圾桶），確認刪除。 4.如果你在評論中@了其他人，刪除評論時會收到提示：「刪除這條評論後，@的人將不會收到通知。」如果你想讓@的人收到通知，可以先取消@，
為什麼小紅書自己的評論在最下面？如何在小紅書上修改評論？
Mar 21, 2024 pm 10:46 PM
小紅書是一款備受歡迎的社群電商平台，使用者可以分享購物心得、推薦商品並交流購物經驗。一些用戶發現他們在小紅書上發布的評論總是被顯示在最底部，這讓他們感到困惑。本文將探討為什麼小紅書的評論排列方式會使使用者的評論顯示在底部，並介紹如何在小紅書上修改評論的位置。一、為什麼小紅書自己的評論在最下面？小紅書上評論的顯示順序通常是根據評論的時間順序來排列的。如果你的評論是在其他用戶評論之後發表的，那麼它就會顯示在最下面。這是小紅書預設的評論排序方式，旨在保持評論區的秩序和清晰度。小紅書可能會根據評論的內
為什麼在小紅書評論別人看不到？它評論別人看不到是怎麼回事？
Mar 21, 2024 pm 07:51 PM
小紅書作為一個流行的社群媒體平台，用戶可以在這裡分享生活、交流心得。有些用戶會發現，自己評論別人的貼文後，對方卻看不到。那麼，為什麼在小紅書評論別人看不到呢？本文將詳細探討這個問題，幫助大家解決困惑。一、為什麼在小紅書評論別人看不到？延遲審核：小紅書評論內容經過審核，可能因包含敏感詞彙或違規內容而暫時隱藏。在此情況下，評論發布後，對方可能暫時無法看到。一般而言，審核完成後，這些評論將會重新顯示。帳號異常可能導致評論者發布的評論無法被對方看到，即使評論已成功發布。這種異常情況包括帳號被封鎖或功能限
為什麼小紅書評論顯示不出來圖片？為什麼小紅書IP位址不更新？
Mar 21, 2024 pm 09:00 PM
小紅書是一款備受歡迎的社群電商平台，用戶可以在這裡分享購物體驗、推薦商品。有些用戶反映在評論中上傳的圖片無法正常顯示，這讓他們感到困擾。本文將協助您找出小紅書評論中圖片無法顯示的原因，並提供解決方法。一、為什麼小紅書評論顯示不出來圖片？圖片格式可能不被支援：小紅書評論功能僅支援有限的圖片格式。如果您上傳的圖片格式不受支持，可能會導致圖片無法顯示。建議您嘗試使用其他格式，如JPG、PNG等。評論中上傳的圖片大小可能會受到小紅書的限制，如果您的圖片尺寸過大，可能會導致無法正常顯示。建議您嘗試壓
小紅書電腦端怎麼置頂評論？電腦端私訊在哪？
Mar 28, 2024 pm 12:36 PM
在小紅書上，用戶可以瀏覽各種美妝、時尚、旅行等內容，同時也能表達自己的觀點和評論。有些用戶在使用小紅書電腦端時，遇到如何置頂評論的問題。一、小紅書電腦端怎麼置頂評論？ 1.打開小紅書電腦端，進入你想要評論的貼文或動態。 2.在評論區，找到你想要置頂的評論。 3.點擊該評論，然後你會看到一個「置頂」按鈕。 4.點選「置頂」按鈕，該評論就會出現在留言區的最上方，成為置頂評論。需要注意的是，目前小紅書電腦端只支援置頂自己的評論，而且置頂評論的功能只在帖子或動態的評論區有效，不能在話題頁或全局評論區置頂。二、
小紅書把別人評論刪了怎麼找回來？把別人留言刪了會有顯示嗎？
Mar 21, 2024 pm 10:46 PM
小紅書作為一款熱門的社群電商平台，用戶之間的互動評論是平台中不可或缺的溝通方式。有時候，我們可能會發現自己的評論被其他人刪除，這種情況可能會讓我們感到困惑。一、小紅書把別人評論刪了怎麼找回來？當發現自己的評論被刪除時，首先可以嘗試在平台上直接搜尋相關的貼文或商品，查看是否還能找到該評論。如果評論被刪除後仍然顯示，那麼可能是被原帖主刪除的，這時候可以嘗試聯絡原帖主，詢問其刪除評論的原因，並要求恢復評論。如果評論已經被完全刪除且無法在原始貼文上找到，那麼在平台上恢復評論的機會相對較小。可以嘗試使用其他途徑
小紅書評論被部落客刪了會被提醒嗎？在小紅書裡面發的留言被刪除怎麼辦？
Mar 28, 2024 am 11:46 AM
小紅書是一個內容豐富、互動性強的社群平台，用戶可以在上面發布和評論各種內容。有時候我們可能會遇到自己的評論被部落客刪除的情況。那麼，小紅書評論被部落客刪了會被提醒嗎？如果被刪了，我們該怎麼辦呢？一、小紅書留言被部落客刪了會被提醒嗎？小紅書評論被部落客刪除後，系統會向使用者提供通知。用戶可以在小紅書的訊息中心查看通知，以了解自己的評論被刪除的原因。用戶也可以在個人主頁的評論記錄中找到自己被刪除的評論，並查看相關情況。二、在小紅書裡面發的評論被刪除怎麼辦？ 1.保持冷靜：首先，我們要保持冷靜，不要慌張或生氣。博
