外话：实在是闹不明白头条是怎么对文章进行推荐的，头大...

好了，进入今天的主题，利用定时器设计出网站经常会使用到的效果——图片无缝滚动展示。

图片无缝滚动效果

一、设计思路

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://www.hmttv.cn/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%
}

这样一个简单的图片列表缩放特效就完成了，当然，布局的方式有很多种，这只是其中一个方法，也欢迎大家留言分享一下其他的布局方式，谢谢观看！！！