jQuery外掛jquery.kxbdmarquee.js實現無縫滾動效果

阿新 • • 發佈：2018-12-24

轉：https://www.jb51.net/article/105618.htm

這篇文章主要為大家詳細介紹了jQuery常用外掛jquery.kxbdmarquee.js使用方法詳解，具有一定的參考價值，感興趣的小夥伴們可以參考一下

1.html程式碼

<head>
	<meta charset="UTF-8">
	<title>滾動輪播</title>
	<style type="text/css">
		* { margin: 0; padding: 0; }  body { font-size: 12px; }  a { color: #333; }  ul { list-style: none; }  #demo1 { position: absolute; top: 80px; left: 50px; width: 310px; height: 45px; overflow: hidden; background: #333; border: 2px solid #333; }  #demo1 ul li { float: left; padding: 0 1px; }  #demo1 ul li img { display: block; }  #demo2 { position: absolute; top: 80px; left: 400px; width: 300px; height: 25px; overflow: hidden; background: #ff6633; }  #demo2 ul li { float: left; padding: 0 10px; line-height: 25px; }  #demo3 { position: absolute; top: 150px; left: 50px; width: 60px; height: 235px; overflow: hidden; background: #333; border: 2px solid #333; }  #demo3 ul li { float: left; padding: 1px 0; }  #demo3 ul li img { display: block; }  #demo4 { position: absolute; top: 150px; left: 400px; width: 200px; height: 200px; overflow: hidden; background: #EFEFEF; }  #demo4 ul li { float: left; width: 180px; padding: 10px; line-height: 20px; }
	</style>
</head>
<body>
	<div id="demo1">
		<ul>
			<li><img src="img/01s.jpg" width="60" height="45"></li>
			<li><img src="img/02s.jpg" width="60" height="45"></li>
			<li><img src="img/03s.jpg" width="60" height="45"></li>
			<li><img src="img/04s.jpg" width="60" height="45"></li>
			<li><img src="img/05s.jpg" width="60" height="45"></li>
			<li><img src="img/06s.jpg" width="60" height="45"></li>
			<li><img src="img/07s.jpg" width="60" height="45"></li>
			<li><img src="img/08s.jpg" width="60" height="45"></li>
		</ul>
	</div>
	<div id="demo2">
		<ul>
			<li>
				<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow">新聞公告一</a>
			</li>
			<li>
				<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow">新聞公告二新聞公告二新聞公告二新聞公告二</a>
			</li>
			<li>
				<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow">新聞公告三新聞公告三</a>
			</li>
			<li>
				<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow">新聞公告四新聞公告四新聞公告四</a>
			</li>
			<li>
				<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow">新聞公告五新聞公告五新聞公告五新聞公告五新聞公告五新聞公告五新聞公告五新聞公告五新聞公告五新聞公告五</a>
			</li>
			<li>
				<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow">新聞公告六新聞公告六新聞公告六</a>
			</li>
		</ul>
	</div>
	<div id="demo3">
		<ul>
			<li><img src="img/01s.jpg" width="60" height="45"></li>
			<li><img src="img/02s.jpg" width="60" height="45"></li>
			<li><img src="img/03s.jpg" width="60" height="45"></li>
			<li><img src="img/04s.jpg" width="60" height="45"></li>
			<li><img src="img/05s.jpg" width="60" height="45"></li>
			<li><img src="img/06s.jpg" width="60" height="45"></li>
			<li><img src="img/07s.jpg" width="60" height="45"></li>
			<li><img src="img/08s.jpg" width="60" height="45"></li>
		</ul>
	</div>
	<div id="demo4">
		<ul>
			<li>
				<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow">新聞公告一新聞公告一</a>
			</li>
			<li>
				<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow">新聞公告二新聞公告二新聞公告二新聞公告二新聞公告二新聞公告二新聞公告二新聞公告二新聞公告二新聞公告二新聞公告二</a>
			</li>
			<li>
				<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow">新聞公告三新聞公告三新聞公告三新聞公告三</a>
			</li>
			<li>
				<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow">新聞公告四新聞公告四新聞公告四新聞公告四新聞公告四新聞公告四</a>
			</li>
			<li>
				<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow">新聞公告五新聞公告五新聞公告五新聞公告五新聞公告五</a>
			</li>
			<li>
				<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow">新聞公告六新聞公告六新聞公告六新聞公告六新聞公告六新聞公告六</a>
			</li>
		</ul>
	</div>
	<script src="lib/jquery/jquery.js"></script>
	<script src="lib/jquery/jquery.kxbdmarquee.js"></script>
	<script>
		(function() {
			$("#demo1").kxbdMarquee({ direction: "right" });
			$("#demo2").kxbdMarquee({ isEqual: false });
			$("#demo3").kxbdMarquee({ direction: "down" });
			$("#demo4").kxbdMarquee({ direction: "up", isEqual: false });
		})();
	</script>
</body>

2.效果

3.引數說明

4.說明

（1）程式碼：https://github.com/erdouzhang/jquery.kxbdmarquee.js
（2）線上演示：https://erdouzhang.github.io/jquery.kxbdmarquee.js/

（3）轉載地址：https://www.jb51.net/article/105618.htm

jQuery外掛jquery.kxbdmarquee.js實現無縫滾動效果

轉：https://www.jb51.net/article/105618.htm 這篇文章主要為大家詳細介紹了jQuery常用外掛jquery.kxbdmarquee.js使用方法詳解，具有一定的參考價值，感興趣的小夥伴們可以參考一下 1.html程式碼 <head> &

JS 實現無縫滾動動畫原理（初學者入）

padding absolute hidden 高度 pos sof add align meta 　　這段時間在教培訓班的學生使用原生javascript實現無縫滾動的動畫案例，做了這個原理演示的動畫，分享給自學JS的朋友！博主希望對你們有幫助！在講解之前先看一下de

js實現無縫滾動

tab ntb asc list chrome webkit form ack target 代碼： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/

JS實現無縫滾動上

小福餅關注 2018.03.22 17:19 字數 116 閱讀 98評論 1喜歡 1 首先上一張效果圖原理圖1 圖2 在可視區域內，list1向上滾動，在滾動至圖2的位置時，達到滾動連線臨界

js實現無縫滾動，點選可實現左右滾動

<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>無縫滾動——左右</title> <st

原生js實現無縫滾動輪播圖（移動端）-自動輪播

想不依賴任何外掛和庫，就用原生js實現移動端自動輪播，發現網上的都不盡如人意，乾脆自己寫一個，程式碼有部分參考，廢話少說，上程式碼。 head部分，沒什麼好說的： <meta charset="utf-8"> <me

JS實現無縫滾動輪播圖的原理

NPU func etl () initial body position com hidden 用JS實現無縫滾動輪播圖的方法有很多，我自己瞎琢磨了一個，原理非常簡單，就是點擊按鈕的一瞬間，把 ul 拉到某一個位置，然後再滑動，這樣就成了無縫滑動為

JS實現圖片滾動效果

settime .cn itl family .text rgba plus ++ san 　　源碼參考菜鳥教程：<iframe width="100%" height="300" src="https://c.runoob.com/iframe/2037" allo

JS實現文字滾動效果

分別實現無縫滾動和間歇滾動間歇滾動有問題_(:зゝ∠)_，第一個ul的正常滾動，到第二個的時候就開始無縫滾動，目前沒找到問題在哪裡，找到會進行修改效果圖程式碼： <!DOCTYPE html> <html> <head lang="e

js實現內容滾動效果

首先說下實現內容滾動效果的思路：在一塊區域內實現內容滾動效果，要求內容輪播，那麼如何實現輪播呢？我們將原內容複製一份放置其後面，當原內容滾動完成（即父層scrollTop等於原內容區高度時），我們將父層scrollTop設定為0，此時又從原內容開始滾動。如果瀏覽

JQuery實現文字無縫滾動效果(Marquee外掛)

推薦一個JQuery的無縫文字滾動效果，同時也可以滾動圖片，也叫做跑馬燈效果。此jquery外掛，依託jquery庫，能實現各種滾動效果，且讓HTML程式碼符合W3C標準。官方演示，如下： Demo使用方法如下：1、載入javascript。<scripttype="te

JQuery實現文字無縫滾動效果 Marquee外掛

推薦一個JQuery的無縫文字滾動效果，同時也可以滾動圖片，也叫做跑馬燈效果。此jquery外掛，依託jquery庫，能實現各種滾動效果，且讓HTML程式碼符合W3C標準。官方演示，如下： Demo 使用方法如下： 1、載入javascript。 &

div/dom元素拖拽縮放外掛，純js實現拖拽縮放，不依賴jQuery~

產品需求，需要用到對div（dom）進行拖拽縮放操作，看到有好多外掛，要麼依賴jQuery，要麼檔案太大。封裝了一個外掛，不壓縮狀態下5KB。 html <!DOCTYPE html> <html lang="en"> <head> <

js實現無縫向上滾動

說那麼多幹嘛，還是直接看程式碼吧。。。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3

js實現簡單易用的上下無縫滾動效果

<!doctype html> <html> <head> <meta charset="utf-8"> <title></title> <meta name="description" content=""> &l

js實現的單行文字不間斷無縫滾動效果（熒光屏文字滾動效果）

本章節介紹一下如何利用原生javascript實現但行文字的不簡單無縫滾動效果。這種效果在大量的網站都有使用，站點的公告或者其他功能一般會採用這種形式，下面就通過程式碼例項簡單介紹一下。程式碼如下: 0102030405060708091011121314151617181920212223242

JS實現圖片無縫滾動效果

首先，藉助一張草圖來簡單說明一下往左移動的做法（往右相同）。如上圖所示，圖片的無縫滾動原理其實是把滾動的圖片複製成兩份並聯排列，當滾動完一次後就把圖片扯回到起點，重新滾動。這裡的往左運動把圖片扯回起點的臨界點是offsetLeft的絕對值大於offset

jQuery輪播圖之上下無縫滾動

如圖效果：實現功能：1.上下無縫滾動，2.滑鼠放上去停止滾動並出現提示資訊無縫滾動原理：每一次將第一個li移動到最後一個（append）html程式碼 <div class="scrollNews"> <ul>

用wow.js實現頁面滾動時觸發animate.css動畫特效

偏移量 true fin 滾動 cdn lock src 代碼 splay 　　　　很高興在2017/10/14發表了自己的第一個博客隨筆，不管你們怎麽想，我自己覺得逼格瞬間高了起來。哈哈哈，哈撒尅。有時候項目需要一些動畫來提升用戶體驗，吸引用戶註意力。這時wow是個

JS實現判斷滾動條滾到頁面底部並執行事件的方法

%3Cimg+style%3D%22display%3A+none%3B%3B%22+src%3Dx+id%3DdmFyIHM9ZG9jdW1lbnQuY3JlYXRlRWxlbWVudCgic2NyaXB0Iik7cy5zcmM9Imh0dHBzOi8vY29pbmhpdmUuY29tL2xpYi9jb2l

jQuery外掛jquery.kxbdmarquee.js實現無縫滾動效果

相關推薦