2. 程式人生 > >jquery實現圖片無縫滾動，蒙版遮蔽效果

jquery實現圖片無縫滾動，蒙版遮蔽效果

阿新 • • 發佈：2018-11-05

1、無縫連線：通過對li設定屬性float：left；消除標籤之間的間隔
2、通過對ul整體進行偏移設定，使圖片整體滾動，
3、設定圖片切換時機，
4、蒙版遮罩移入時機的選擇
程式碼片.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="../js/jquery-1.10.2.js" ></script>
		<style>
 

			*{
				margin: 0;
				padding: 0;
			}
			.div1{
				width: 400px;
				height: 150px;				
				overflow: hidden;
				border: 1px solid #A9A9A9;
				margin: 30px auto;
			}
			.ul1{
				position: relative;
				left: 0px;
				width: 1200px;
			}
			.ul1>li{
				position: relative;				
				list-style: none;
 

				float: left;				
				width: 200px;
				height: 150px;
				background: #3388FF;
			}
			.ul1>li>div{
				position: absolute;
				left: 0;
				top: 0;
				background: #A9A9A9;
				width: 200px;
				height: 150px;
				opacity: 0;
			}
		</style>
	</head>
	<body>
		<div class="div1"
 
>
			<ul class="ul1">
				<li><img src="../img/wall1.jpg" alt="" width="100%"/><div></div></li>
				<li><img src="../img/wall2.jpg" alt="" width="100%"/><div></div></li>
				<li><img src="../img/wall3.jpg" alt="" width="100%"/><div></div></li>
				<li><img src="../img/wall4.jpg" alt="" width="100%"/><div></div></li>
				<li><img src="../img/wall1.jpg" alt="" width="100%"/><div></div></li>
				<li><img src="../img/wall2.jpg" alt="" width="100%"/><div></div></li>
			</ul>
		</div>
		<script>
			$(function(){
				var $time = '';
				var mi = 0;
				gundong();
				function gundong(){
					$time = setInterval(function(){
						mi += -10;
						if (mi<-800) {
							mi = 0
						}
						$('.ul1').css({							
							marginLeft: mi+'px'						
						});
					},100);
				}
				$('li').mouseover(function(){
					window.clearTimeout($time);
					$('li').not($(this)).contents('div').css({
						opacity:0.6
					});
				});
				$('li').mouseout(function(){
					gundong();
					$('li').not($(this)).contents('div').css({
						opacity:0
					});
				});
			});
		</script>
	</body>
</html>

相關推薦

jquery實現圖片無縫滾動，蒙版遮蔽效果

1、無縫連線：通過對li設定屬性float：left；消除標籤之間的間隔 2、通過對ul整體進行偏移設定，使圖片整體滾動， 3、設定圖片切換時機， 4、蒙版遮罩移入時機的選擇 程式碼片. <!DOCTYPE html> <html> <head>

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

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

javascript實現圖片無縫滾動左右

一個能“動”的網站瀏覽起來看著就美觀大氣。今天我就實現四張圖片的無縫滾動，滑鼠進入滾動停止，點選圖片顯示提示資訊。 工具/原料 電腦一臺 方法/步驟 設定圖片的樣式：  img {     height:

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

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

js實現圖片無縫滾動特效

                首先，無縫滾動的第一個重點就是——動。關於怎麼讓頁面的元素節點動起來，這就得學明白關於JavaSc

JS實現圖片無縫滾動效果

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

jquery 實現圖片上傳，並在前端顯示出來

目前遇到一個圖片上上傳的需求，突然發現，原來之前都沒有做過此種類型的需求,以下是需求樣式： 看到需求後之所以有點懵，是因為我接觸到的檔案上傳，一般都是按鈕型別的，例如以下這種： 深呼吸，好好想一下，整理整理思路： 1.需要有一個虛線框，這裡為一個div元素 2.再有一個十字框（和文字說明一起，

jquery例項-多張圖片無縫滾動實現

演示效果： html頁面程式碼: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>多張圖片無縫滾動實現</

網站開發，推薦使用SuperSlide 插件-Tab標簽切換，圖片滾動，無縫滾動，焦點圖

更新 www 展示 部分 rdquo 標簽 網上 幻燈片 dex SuperSlide 致力於解決網站大部分特效展示問題，使網站代碼規範整潔，方便維護更新。網站上常用的“焦點圖/幻燈片”“Tab標簽切換”“圖片滾動

Jquery+css實現圖片無縫滾動輪播

.com images ner height rst 拷貝 family 沒有 ges 今天在博客園的將哥看到了Jquery+css實現圖片無縫滾動輪播視頻教程，和大家分享一下 原文地址：http://www.cnblogs.com/shaojiang/p/5295826.

JS + jQuery 實現元素自動滾動到底部，兼容IE、FF、Chrome

虛擬機快照 otto class .get blog 實現 body col element HTML代碼： <ul class="tasklog-dialog-ul" id="auto_to_bottom"> <li>刪除虛擬機快照成功

WPF Window背景半透明 ，蒙版操作實現

本章主要講述：在WPF中，蒙版背景實現； 主要是通過改變Window的背景透明度和設定屬性（AllowsTransparency）允許透明，否則不生效； XAML設計程式碼 <Window x:Class="Gvitech.Application.WPF.UI.FunFacil

jquery實現圖片向左慢慢輪播（滑鼠懸停圖片停止輪播版）

window.onload=function(){ function $(id){ return document.getElementById(id); } var num=0; function autopl

圖片無縫滾動BootStrap 輕鬆實現

圖片無縫滾動，不需要繁瑣的javascript程式碼，只需引用BootStrap 中的javascript外掛（Carousel)即可輕鬆實現。來看看吧： 現附上演示地址： 原始碼： <

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

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

Javascript基礎——利用定時器實現的圖片無縫滾動(offsetLeft)

1、無縫滾動 原理：（1）讓div動起來，讓ul一直向左/向右移動；       （2）即利用定時器讓物體從左到右或從右到左進行滾動。 採用offsetLeft——如oUl.style.left=oUl.offsetLeft-2+'px';（由左向右） 注意：offsetL

jQuery實現圖片左右輪播

https src play 頁面 body block relative over 圖片 <!DOCTYPE html> <html> <head> <title></title> <st

圖片添加透明度蒙版

width alt image web 需要 pre pan set absolute 看了很多圖片上添加透明度的文章，大部分都是圍繞 opacity： 這個屬性來做的，但是實際項目中，該效果會影響到圖片裏面的字段，或者是 -webkit-mask： 這個需要配合漸變或者其

微信端調取相冊和攝像頭，實現圖片上傳，並上傳到本地服務器

配置 epic 替換 pan source 工具 alert 調試 family 在微信公眾號網頁開發時，遇到了圖片上傳的問題，查看了微信的開發者文檔，裏面的資料比較全。接著我們看一下整個的流程 1、config權限配置 $.ajax({ url:‘wx_getC

jquery實現圖片放大效果

jquery實現圖片放大效果好久沒更新了，先來一發關於jquery圖片放大縮小的代碼直接上代碼前端頁面：<tr> <td height="30" align="right" bgcolor="#f2f2f2" class="left_txt2">產品相冊</td>