限輪播圖效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>50-jquery無限循環滾動圖片</title>
<style type="text/css">
*{
margin: 0; /*外邊距:0*/
padding: 0; /*內邊距:0*/
}
div{
width: 600px; /*寬:600*/
height: 160px; /*高:160*/
border: #000000 solid 1px; /*邊框:黑色 實線 1像素*/
margin: 100px auto; /*外邊距:上100像素 左右自動居中*/
position: relative; /*定位:相對定位*/
overflow: hidden; /*溢出:隱藏*/
}
ul{
list-style: none; /*列表樣式:無點*/
width: 2100px; /*寬:2100*/
height: 160px; /*高:160*/
}
ul>li{
float: left; /*浮動布局:左浮動*/
}
</style>
<script src="../static/js/jquery-3.6.0.js"></script>
<script>
$(function(){
var pianyi=0; // 定義一個偏移量為0
var timer=setInterval(function(){ // 定義一個定時器 50毫秒調用一次
if(pianyi>-1500){ // 如果偏移量大于 -1500
$('ul').css('margin-left', pianyi) // 把ul的樣式的左邊距設置成偏移量
pianyi -=5 // 偏移量每次減5
}else{pianyi=0} // 否則(偏移量等于0)
}, 50)
})
</script>
</head>
<body>
<div>
<ul class="ul1">
<li><img src="../static/image/1.jpeg" width="300px" height="160px"></li>
<li><img src="../static/image/2.jpeg" width="300px" height="160px" ></li>
<li><img src="../static/image/3.jpeg" width="300px" height="160px" ></li>
<li><img src="../static/image/4.jpeg" width="300px" height="160px" ></li>
<li><img src="../static/image/5.jpeg" width="300px" height="160px" ></li>
<li><img src="../static/image/1.jpeg" width="300px" height="160px"></li>
<li><img src="../static/image/2.jpeg" width="300px" height="160px" ></li>
</ul>
</div>
</body>
</html>
這個方法理論上是最簡單效果也最好的方法。
CSS中有個background-attachment屬性,當我們設置屬性值為fixed的時候,背景圖片相對于窗體定位,不受滾動影響。
于是,我們的實現就很簡單:信息流列表HTML中插入個廣告<a>鏈接,然后廣告圖作為背景圖呈現,設置background-attachment:fixed效果就可以實現了,就這么簡單。
HTML和CSS代碼示意:
<div class="list">信息流列表1</div> <div class="list">信息流列表2</div> <a href="#" class="ad" target="_blank">廣告</a> <div class="list">信息流列表3</div> <div class="list">信息流列表4</div> .ad { display: block; height: 600px; background: url(./ad.jpg) no-repeat top fixed; background-size: 100%; }
iOS Safari很早時候position:fixed也不支持,后來妥協了,支持了;但是background-attachment:fixed還是老樣子,不支持,怕是嫌棄background-attachment:fixed燒性能,對于一個連IE6,IE7瀏覽器都支持良好的CSS聲明,Safari不支持(包括iOS微信),我也無力說些什么。
因此,我們還需要額外做些功夫,兼容下iPhone手機瀏覽器。
我的做法是如果是iPhone手機,廣告圖片postion:fixed定位,配合JS實時clip剪裁。核心JS如下:
// ele就是廣告元素DOM對象 window.addEventListener('scroll', function () { var bound=ele.parentElement.getBoundingClientRect(); var clip='rect('+ [bound.top + 'px', ele.parentElement.clientWidth + 'px', bound.bottom + 'px', 0].join() +')'; ele.style.clip=clip; });
查了下瀏覽器兼容性資料,發現Android4.4+版本開始,放棄了對background-attachment:fixed的支持,但是Android Chrome瀏覽器卻支持,這有些令人不解(見下圖)。
?
我用家里人的Android手機測試,背景效果表現為scroll,看來JS補丁要多個Android設備。
position:fixed也可以實現藏在后面的信息流廣告,實現原理就是藏在其他信息流元素的背后,以及頭部或者底部元素(如果有)的底部,關鍵就是z-index層級控制了。雖然原理簡單,但是實際操作還是有些啰嗦的,通常信息流頁面的HTML結構都比較復雜,此時再z-index屬性各種設置,很容易造成z-index混亂。
效果大致如下GIF截屏:
?
HTML和CSS代碼原理示意:
<div class="list">信息流列表1</div> <div class="list">信息流列表2</div> <a href="#" class="ad" target="_blank"> <img src="./ad.jpg"> </a> <div class="list">信息流列表3</div> <div class="list">信息流列表4</div>
.list { background-color: #fff; position: relative; z-index: 1; } .ad { display: block; height: 576px; } .ad img { position: fixed; top: 0; width: 400px; }
優點和不足
基于position:fixed實現的優點在于:
1. 我們的廣告內容可以支持復雜HTML,而不僅僅是一張圖片;
2. 所有瀏覽器都兼容,包括iPhone Safari瀏覽器。
不足在于:
1. 需要其他元素進行層級配合,相互耦合增加了CSS的復雜度。
如果實際開發時候發現z-index層級控制比較麻煩,可以試試第一個demo中使用的CSS clip剪裁,直接只顯示當前廣告區域內容,不過需要JS配合,不是純CSS實現了,自己權衡。
采用position:fixed固定定位實現的時候,我們還可以把廣告元素從信息流列表中抽離,直接放在整個容器的后面,然后借助visibility屬性實現點擊穿透,如下示意:
<a href="#" class="ad">廣告</a> <ul> <li>信息流列表1</li> <li>信息流列表2</li> <li></li> <!-- 撐開高度 --> <li>信息流列表3</li> <li>信息流列表4</li> </ul>
.ad { position: fixed; } ul { position: relative; visibility: hidden; } li:empty { /* 撐開高度,實際開發請使用類名控制,這里精簡HTML才使用:empty */ height: 576px; } li:not(:empty) { visibility: visible; }
具體就不展開了。
英格蘭涼了,比利時很強。
希望本文內容可以幫助需要的人。
然后,如果你有更好地實現方法,歡迎不吝賜教!
在Firefox中單獨設置滾動條樣式,你可以使用?@-moz-document??規則。這個規則允許你為特定的瀏覽器或瀏覽器引擎應用樣式。
下面是一個例子,演示如何在Firefox中隱藏滾動條:
@-moz-document url-prefix() {
/* 在這里添加只對Firefox生效的樣式 */
body {
scrollbar-width: none;
}
}
在上面的例子中,??@-moz-document url-prefix()??表示只有在URL以空字符串(即所有URL)為前綴的情況下,才會應用其中的樣式。在??body??元素中,??scrollbar-width: none;??將隱藏滾動條。
請注意,這樣的規則只在Firefox中生效,而在其他瀏覽器中會被忽略。確保在使用這樣的規則時進行測試,以確保所需的效果在目標瀏覽器中按預期工作。
在CSS中,??*???(星號)和 ??body?? 分別選擇不同的元素或元素集合。
* {
margin: 0;
padding: 0;
}
上述代碼會將頁面中所有元素的內外邊距設置為零。
body {
font-family: 'Arial', sans-serif;
background-color: #f0f0f0;
}
上述代碼會將文檔主體部分的字體設置為 Arial,并將背景顏色設置為 #f0f0f0。
所以,??*??? 是一個通用的選擇器,匹配所有元素,而 ??body??? 是特定于文檔主體的選擇器,用于選擇文檔主體元素并應用樣式。在某些情況下,你可能希望使用 ??body?? 選擇器,以更有針對性地影響文檔的主要內容區域。
在最新的 Firefox 版本中,??-moz-scrollbar-thumb?? 偽類選擇器已被棄用,取而代之的是使用更通用的 CSS Scrollbar 模塊規范。為了在 Firefox 中優化滾動條并使其變細,你可以使用新的規范中的屬性。
以下是一個簡單的示例,可以使 Firefox 中的滾動條變細:
/* Firefox 滾動條樣式 */
* {
scrollbar-width: thin;
scrollbar-color: #999999 #f0f0f0;
}
/* Webkit 滾動條樣式(Chrome, Safari等)*/
*::-webkit-scrollbar {
width: 12px;
}
*::-webkit-scrollbar-thumb {
background-color: #999999;
}
*::-webkit-scrollbar-track {
background-color: #f0f0f0;
}
上述樣式包含兩部分:
請注意,滾動條樣式在不同瀏覽器中可能會有所不同,因此上述樣式在 Firefox 中有效,而 Webkit 樣式在 Chrome 和 Safari 中有效。在實際使用中,你可能需要根據需要進行調整和測試,以確保在不同瀏覽器中都能達到預期的效果。
*請認真填寫需求信息,我們會在24小時內與您取得聯系。