內容滾動效果
HTML部分
<div class="biao"> <p class="qy" style="color: goldenrod;">最新簽約商家</p> <ul class="js-slide-list"> <li class="ds"> <p class="qy" style="color: #fff;">***旗艦店2018-03-19</p> <p class="qy" style="color: #fff;">***旗艦店2018-03-19</p> <p class="qy" style="color: #fff;">***旗艦店2018-03-19</p> </li> <li class="ds"> <p class="qy" style="color: #fff;">***旗艦店2018-03-18</p> <p class="qy" style="color: #fff;">***旗艦店2018-03-18</p> <p class="qy" style="color: #fff;">***旗艦店2018-03-18</p> </li> <li class="ds"> <p class="qy" style="color: #fff;">***旗艦店2018-03-17</p> <p class="qy" style="color: #fff;">***旗艦店2018-03-17</p> <p class="qy" style="color: #fff;">***旗艦店2018-03-17</p> </li> </ul> </div>
css部分
.js-slide-list{ overflow: hidden; width: 60%; height: 80px; } .ds{ width: 100%; height: 80px; } .biao{width: 100%; height: 80px; background: rgba(0,0,0,0.5); position: absolute; top:495px; left: 0; z-index: 9; } .qy{ width: 25%; height: 80px; text-align: center; line-height: 80px; float: left; }
js部分
<script> var doscroll = function(){ var $parent = $('.js-slide-list'); var $first = $parent.find('.ds:first'); var height = $first.height(); $first.animate({ height: 0 }, 500, function() { $first.css('height', height).appendTo($parent); }); }; setInterval(function(){doscroll()}, 2000); </script>
效果展示
相關推薦
內容滾動效果
HTML部分<div class="biao"> <p class="qy" style="color: goldenrod;">最新簽約商家</p> <ul class="js-slide-list"> &
js實現內容滾動效果
首先說下實現內容滾動效果的思路:在一塊區域內實現內容滾動效果,要求內容輪播,那麼如何實現輪播呢?我們將原內容複製一份放置其後面,當原內容滾動完成(即父層scrollTop等於原內容區高度時),我們將父層scrollTop設定為0,此時又從原內容開始滾動。如果瀏覽
swiper實現區域性內容滾動效果
先看一下效果圖: 在藍色的背景裡面文字可以上下滾動,這個就是我們需要的效果。 具體程式碼如下: <!DOCTYPE html> <!-- saved from u
JQuery實現頁面隨滾動條滾動而動態載入內容的效果
新浪微博有這個功能,剛才思考一下 ,簡單的寫了一下實現方法,程式碼是Js的. 無可否認,這種方式應該算是web2.0的產物,在使用者體驗上具備很好的感受,除了微博在使用該方式外,另外我還發現有幾個其他性質的網站也在用這種方式,原因是他們的網站頁面比較長,所以使用者在瀏覽的時候隨著滾動條的
HTML文字滾動效果<marquee>
spa down 開始 一次 alternate 設置 離開 rec sta <marquee></marquee> 屬性:(1)behavior:設置滾動方式 a)alternate:在邊框之間來回滾動 b)Scroll:循
marquee實現滾動效果
har 一段 對齊方式 頁面 head 發現 vsp 包括 org 頁面的自動滾動效果,可由javascript來實現,但是今天無意中發現了一個html標簽 - <marquee></marquee>可以實現多種滾動效果,無需js控制。 使用marq
JavaScript-html標題滾動效果
charset 設置 script split dsm ctype java title document <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w
圖片的無縫滾動效果
-- adding margin image left offset mage lang cti 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <met
制作滾動表格,表格頭不動,內容滾動
header bgcolor xhtml images mouse es2017 str www 內容 有這個需求,其實也不難,就是弄兩個表格組合,結合marquue標簽就行了,代碼如下: 1 <!DOCTYPE html PUBLIC "-//W3C//DT
JS實現圖片滾動效果
settime .cn itl family .text rgba plus ++ san 源碼參考菜鳥教程:<iframe width="100%" height="300" src="https://c.runoob.com/iframe/2037" allo
純css3實現文字間歇滾動效果
vue gin span 需要 display () app counter happy 場景: 假設有4條數據或者標題,視口中只顯示兩條,采用每次向上滾動一條數據來展示所有的數據。效果如圖: 用JavaScript也很容易實現,但是需要操作DOM,可以參考這篇博客。考慮
css3 內容掉落效果
posit sel 子元素 float elements get 範圍 5% [0 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl
jq封裝-無縫滾動效果
over == line tac 表示 動效 dir app timer <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <
【2018-01-23】HTML-插入視頻、音樂,簡單滾動效果
視頻 embed blog 默認 loop alternate idt 方向 範圍 插入視頻:在優酷等視頻網站,找到分享位置,復制html代碼,貼入網頁中自動播放:swf後面?VideoIDS=XNDA3OTM4NA=&isAutoPlay=true&isS
AngularJS 指令 實現文本水平滾動效果
inner 滾動效果 dom對象 定時任務 oot 水平 ack -i .org <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR
HTML標簽marquee實現滾動效果
int pro return set gin 緩存 wip select lex <?phpinclude "../library/mFunction.php"; /**************選取商品一級分類**********/$result=mysql_que
全屏背景視覺差滾動效果
get resize ans 滾動條 效果 mas city eight 視覺 <div class="wrap"> <div class="one item"> <di
27.jquery模擬滾動效果
頁面 light 一次 win 定時 request slide asc created <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"
客服菜單上下滾動效果實現
saas on() div config jid function IV fig shai 這是html結構 <!-- 客服 --> <div class="service" id="service"> <img src="./ima
文本框內容提示效果
element blur js實現 () 文本框 ext 消失 由於 顯示 文本內容提示效果,未輸入內容時顯示文本內容,點擊輸入時內容後消失,由於是IE8,所以無法利用placeholder實現效果:<input placeholder="提示語"/>,利用j