外話：實在是鬧不明白頭條是怎么對文章進行推薦的，頭大...

好了，進入今天的主題，利用定時器設計出網站經常會使用到的效果——圖片無縫滾動展示。

圖片無縫滾動效果

一、設計思路

1、設計圖片滾動前的樣式

//這是頁面的內容，用到的圖片大家可以去我的網盤下載

<p>圖片無縫滾動</p>

<div id="img_move">

<ul>

<li><img src="./images/dhb.jpg" alt=""></li>

<li><img src="./images/hnrb.jpg" alt=""></li>

<li><img src="./images/rmrb.jpg" alt=""></li>

<li><img src="./images/jzrb.jpg" alt=""></li>

<li><img src="./images/nmrb.jpg" alt=""></li>

</ul>

</div>

//CSS設計樣式，只是最簡單的展示，大家也可以添加自己喜歡的

<style>

*{margin:0; padding: 0;}

p{

margin:0 auto;

text-align: center;

font-size:30px;

}

#img_move{

width:400px;

height:28px;

background-color: red;

margin:30px auto;

position: relative; //相對定位

overflow: hidden; //表示溢出這個元素大小的內容全部隱藏

}

#img_move ul{

position: absolute; //相對于img_move這個元素進行絕對定位

left:0;

top:0;//距離左為0，上為0，我理解的意思是ul的左上角與img_move這個元素的左上角重合了。

}

#img_move ul li{

width: 80px;

height:28px;

list-style: none;

float:left;

}

</style>

2、讓圖片動起來。這里需要用到offsetLeft（左右滾動用的），當然還有對應的offsetTop（上下滾動用的）。

（1）首先獲取到頁面上的各個元素

var oDiv = document.getElementById("img_move");

var oUl = oDiv.getElementsByTagName("ul")[0];

var aLi = oUl.getElementsByTagName("li");

（2）選擇對oUl這個元素進行滾動（主要是考慮到li過多，如果選擇li滾動會讓問題復雜起來）

function img_move(){

oUl.style.left = oUl.offsetLeft - 2 + "px"; //表示讓oUl元素向左移動2個像素

（3）讓oUl每隔30毫秒向左移動一次。你問我為什么選擇30毫秒，等做完整個例子后你可以修改一下這個毫秒數，看看有什么效果吧^_^

setInterval(img_move, 30);

二、擴展完善

做完上邊的步驟你會發現oUl這個元素動起來了，但是問題又出現了，你會發現oUl在移動過后漏出了img_move的背景色紅色，我們先來分析一下為什么會出現這種情況，看下圖

圖1 目前的布局

這個圖片表示當時了當時的運動場景，當oUl向左移動時，因為它就這么長，往左走后邊沒有東西了自然就意味著要漏出div的紅色。怎么辦？首先想到的肯定是在它后邊繼續加一組圖片，想法是絕對正確的，但下一組也走完了怎么辦？繼續加？O(∩_∩)O哈哈~估計你的網站空間很快就被圖片給用完了。我們只加一組圖片，怎么加？其實就是加了一個oUl自身內部的所有內容。

oUl.innerHTML += oUl.innerHTML

oUl.style.width = aLi[0].offsetWidth * aLi.length + "px"; //修改oUl的寬度

這樣就得到了下面這張圖

圖2 加了一組圖片的布局

接下來怎么辦呢？大家都知道，我們肉眼看東西也是有一定的時間延誤的，小于這個時間延誤大家是看不出來變化的，思路來了。看下圖

圖3 ul左移動到超過一半時

當oUl向左移動超過一半的時候，我們立馬把oUl的left設定為0，這樣oUl就又跳回到圖2的狀態繼續左移動。

function img_move()

{

if(oUl.offsetLeft < -oUl.offsetWidth/2)

{

oUl.style.left = 0;

}

//右移動時候的判斷條件

if(oUl.offsetLeft > 0)

{

oUl.style.left = -oUl.offsetWidth/2 + "px";

}

oUl.style.left = oUl.offsetLeft - 2 + "px"; //表示讓oUl元素向左移動2個像素，向右移動變成+2

}

再看看效果吧。

4、添加鼠標移入、移出效果

oDiv.onmouseover = function()

{

clearInterval(timer);

}

oDiv.onmouseout = function()

{

timer = setInterval(img_move, 30);

}

到此為止，圖片無縫滾動的展示效果就做出來了，是不是很簡單，O(∩_∩)O哈哈~再復雜的問題，你把它拆開來看，其實都很簡單。

家好，這篇文章給大家分享怎么樣設計一個簡單的圖片列表縮放特效頁面

話不多說，直接看效果圖：

html代碼：

<div class="tpt-img">
	<img class="a" src="http://m.jungjaehyung.com/uploadfile/2024/0807/20240807031328794.png">
	<div class="b a">
		<div class="c"></div>
		<div class="d">
			簡單圖片列表縮放特效
		</div>
	</div>
</div>

知識點：

css:hover選擇器是在鼠標移動到對應標簽上的特殊樣式，它可以用于所有元素。

css3 transform屬性應用于元素的2D或3D轉換，如旋轉、縮放、移動、傾斜等。

css3 transition屬性是在一定的時間范圍內平滑地過渡效果，參數為時間，單位為s（秒）或者ms（毫秒）。

注意，以上的css3特效屬性都要考慮瀏覽器的兼容性，如：

div {
	transform: scale(1.2,1.2);
	-webkit-transform: scale(1.2,1.2); /* Safari 和 Chrome */
	-moz-transform: scale(1.2,1.2); /* Firefox */
	-ms-transform: scale(1.2,1.2) /* IE 9 */
	-o-transform: scale(1.2,1.2); /* Opera */
}

CSS代碼：

.tpt-img {
	position: relative;
	overflow: hidden;
	margin: 10px;
	width: 350px;
	height: 250px
}
.tpt-img img {
	z-index: 0;
	float: left;
	height: 100%;
	width: 100%
}
.tpt-img:hover img {
	opacity: 0.8;
	transform: scale(1.2,1.2);
	-webkit-transform: scale(1.2,1.2);
	-moz-transform: scale(1.2,1.2);
	-ms-transform: scale(1.2,1.2);
	-o-transform: scale(1.2,1.2)
}
.tpt-img .a {
 transition: all .40s ease-in-out;
	-webkit-transition: all .40s ease-in-out;
	-moz-transition: all .40s ease-in-out;
	-ms-transition: all .40s ease-in-out;
	-o-transition: all .40s ease-in-out
}
.tpt-img .b {
	opacity: 0;
	cursor: pointer;
	position: absolute;
	top: 250px;
	height: 100%;
	width: 100%;
}
.tpt-img:hover .b {
	opacity: 1;
	transform: translateY(-50px);
	-webkit-transform: translateY(-50px);
	-moz-transform: translateY(-50px);
	-ms-transform: translateY(-50px);
	-o-transform: translateY(-50px)
}
.tpt-img .c {
	z-index: 1;
	background: #8ec1cd;
	position: absolute;
	height: 100%;
	width: 100%
}
.tpt-img .d {
	z-index: 2;
	color: #fff;
	position: absolute;
	line-height: 50px;
	text-align: center;
	height: 100%;
	width: 100%
}

這樣一個簡單的圖片列表縮放特效就完成了，當然，布局的方式有很多種，這只是其中一個方法，也歡迎大家留言分享一下其他的布局方式，謝謝觀看！！！