外話:實在是鬧不明白頭條是怎么對文章進行推薦的,頭大...
好了,進入今天的主題,利用定時器設計出網站經常會使用到的效果——圖片無縫滾動展示。
圖片無縫滾動效果
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% }
這樣一個簡單的圖片列表縮放特效就完成了,當然,布局的方式有很多種,這只是其中一個方法,也歡迎大家留言分享一下其他的布局方式,謝謝觀看!!!
<svg width="0" height="0">
<defs>
<filter id="goo">
<feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 19 -9" result="goo" />
<feComposite in="SourceGraphic" in2="goo" operator="atop" />
</filter>
</defs>
</svg>
<div class="target">
<div>
<i id="ball1" class="ball"></i>
<i id="ball2" ref="ball2" class="ball"></i>
</div>
</div>
<div class="menu">
<div class="menu-item" @click="updageMenuItem(0)">
首頁
<span :class="{'menu-item-bg': menuActive == 0}">
<i class="iconfont"></i>
</span>
</div>
<div class="menu-item" @click="updageMenuItem(1)">
發現
<span :class="{'menu-item-bg': menuActive == 1}">
<i class="iconfont"></i>
</span>
</div>
<div class="menu-item" @click="updageMenuItem(2)">
消息
<span :class="{'menu-item-bg': menuActive == 2}">
<i class="iconfont"></i>
</span>
</div>
<div class="menu-item" @click="updageMenuItem(3)">
我的
<span :class="{'menu-item-bg': menuActive == 3}">
<i class="iconfont"></i>
</span>
</div>
</div>
<script>
updageMenuItem(index) {
this.menuActive = index;
let ball2 = this.$refs.ball2;
Array(4)
.fill(0)
.map((item, it) => {
ball2.classList.remove('active' + it);
});
setTimeout(()=>{
ball2.classList.add('active' + index);
},100)
}
</script>
<style lang="less" scoped>
.profile {
height: 100%;
background: #aaaa7f;
font-size: 14px;
.menu,
.target {
position: absolute;
bottom: 0;
width: 100%;
height: 50px;
left: 0;
}
.target > div {
filter: url('#goo');
}
.menu {
display: flex;
z-index: 5;
background: #fff;
.menu-item {
flex: 1;
color: #333;
display: flex;
justify-content: center;
align-items: flex-end;
padding-bottom: 10px;
position: relative;
span {
position: absolute;
height: 35px;
width: 35px;
background: #aaaa7f;
border-radius: 50%;
left: 0;
right: 0;
margin: auto;
top: 0;
opacity: 0;
display: flex;
align-items: center;
justify-content: center;
i {
color: #fff;
font-size: 20px;
}
&.menu-item-bg{
animation: menuItemBg .5s .2s forwards;
}
}
}
}
.ball {
width: calc(100% + 60px);
height: 50px;
border-radius: 0;
background-color: #fff;
position: absolute;
left: -30px;
margin: auto;
z-index: 1;
}
#ball2 {
left: 0;
top: 0px;
width: 50px;
height: 50px;
margin: auto;
border-radius: 50%;
&.active0 {
left: calc(((100% / 4) - 50px) / 2);
animation: ballUp .5s forwards;
}
&.active1 {
left: calc(((100% / 4) - 50px) / 2 + 100% / 4);
animation: ballUp .5s forwards;
}
&.active2 {
left: calc(((100% / 4) - 50px) / 2 + (100% / 4) * 2);
animation: ballUp .5s forwards;
}
&.active3 {
left: calc(((100% / 4) - 50px) / 2 + (100% / 4) * 3);
animation: ballUp .5s forwards;
}
}
}
@keyframes ballUp {
from {
top: 0;
}
to {
top: -25px;
}
}
@keyframes menuItemBg {
from {
top: 0;
opacity: 0;
}
to {
top: -15px;
opacity: 1;
}
}
*請認真填寫需求信息,我們會在24小時內與您取得聯系。