實作marquee滾動（程式碼範例）
css
html
html5
javascript
這篇文章帶給大家的內容是關於實現marquee滾動（程式碼範例），有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。
背景：marquee標籤在有些瀏覽器相容性不好，就手動用原生js實作了下。
橫著捲動效果連結描述
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1, minimum-scale=1.0, maximum-scale=1, user-scalable=no" />
<meta content="telephone=no" name="format-detection" />
<title>传奇无双1215</title>
<meta name="keywords" content="传奇无双1215">
<meta name="description" content="传奇无双1215">
<script>
(function (_D) {
var _self = {};
_self.resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
_self.Html = _D.getElementsByTagName("html")[0];
_self.widthProportion = function () {
var p = Number((_D.body && _D.body.clientWidth || _self.Html.offsetWidth) / 720).toFixed(3);
return p > 1.067 ? 1.067 : p < 0.444 ? 0.444 : p;
};
_self.changePage = function () {
_self.Html.setAttribute("style", "font-size:" + _self.widthProportion() * 100 + "px");
};
_self.changePage();
if (!document.addEventListener) return;
window.addEventListener(_self.resizeEvt, _self.changePage, false);
document.addEventListener('DOMContentLoaded', _self.changePage, false);
})(document);
</script>
<style>
body {
overflow-x: hidden;
font: .36rem/1.5 Arial, "Microsoft YaHei", SimSun;
margin: 0;
padding: 0;
font-size: .22rem
}
body,
p {
margin: 0;
padding: 0;
}
em {
font-style: normal;
font-weight: 400
}
img {
font-size: 0;
line-height: 0;
border: 0;
display: block;
width: 100%;
}
.box {
margin: 0 auto;
max-width: 720px;
width: 100%;
background: #260b0c;
}
.pr {
position: relative
}
.marquee {
overflow: hidden;
position: absolute;
bottom: 11.5%;
left: 0;
width: 84%;
margin: 0 8%;
height: .4rem
}
#m em {
float: right;
color: #fff
}
#m {
position: absolute;
height: 0.4rem;
display: block;
line-height: .35rem
}
#m p {
float: left;
line-height: .4rem;
margin-right: 40px;
color: #d4be8d
}
#m span {
margin-right: 30px;
}
</style>
</head>
<body>
<div class="box">
<div class="pr">
<img class="img" src="images/02.jpg" />
<div class="marquee">
<div id="m">
<p>
<em>888新快币</em> <span>xk12*****8抽中</span></p>
<p>
<em>88dfdfdfd8新快币</em> <span>xk1dfdfd2*****8抽中</span></p>
<p>
<em>888新快币</em> <span>xk12*****8抽中</span></p>
<p>
<em>888新快币</em> <span>xk12*****8抽中</span></p>
<p>
<em>888新快币</em> <span>xk12*****8抽中</span></p>
<p>
<em>888新快币</em> <span>xk12*****8抽中</span></p>
</div>
</div>
</div>
</div>
<script>
var timer;
var m = document.getElementById("m")
var init_left = document.querySelector(".box").clientWidth * 0.8;
var m_left = init_left;
var m_width = 0;
function setTimer() {
timer = setInterval(function () {
m_left -= 1;
if (m_left <= -m_width + 20) {
m_left = init_left;
}
m.style.left = m_left + 'px'
}, 10)
}
function marquee() {
var p = m.querySelectorAll("p");
for (var i = 0, l = p.length; i < l; i++) {
m_width += p[i].clientWidth + 48
}
console.log(m_width)
m.style.width = m_width + 'px'
m.style.left = init_left + 'px'
setTimer();
m.addEventListener("mouseover", function () {
clearInterval(timer);
})
m.addEventListener("mouseout", function () {
setTimer();
})
}
marquee()
</script>
</body>
</html>登入後複製
豎起捲動效果連結描述
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1, minimum-scale=1.0, maximum-scale=1, user-scalable=no" />
<meta content="telephone=no" name="format-detection" />
<title>万圣节1101</title>
<meta name="keywords" content="万圣节1101">
<meta name="description" content="万圣节1101">
<script>
(function (_D) {
var _self = {};
_self.resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
_self.Html = _D.getElementsByTagName("html")[0];
_self.widthProportion = function () {
var p = Number((_D.body && _D.body.clientWidth || _self.Html.offsetWidth) / 720).toFixed(3);
return p > 1.067 ? 1.067 : p < 0.444 ? 0.444 : p;
};
_self.changePage = function () {
_self.Html.setAttribute("style", "font-size:" + _self.widthProportion() * 100 + "px");
};
_self.changePage();
if (!document.addEventListener) return;
window.addEventListener(_self.resizeEvt, _self.changePage, false);
document.addEventListener('DOMContentLoaded', _self.changePage, false);
})(document);
</script>
<style>
body {
margin: 0;
padding: 0
}
em {
font-style: normal;
font-weight: 400
}
.pr {
position: relative
}
img {
font-size: 0;
line-height: 0;
border: 0;
width: 100%;
}
.box {
width: 100%;
max-width: 720px;
background: #260b0c
}
.marquee {
overflow: hidden;
position: absolute;
bottom: 17%;
left: 0;
width: 54%;
margin: 0 23%;
height: 1.5rem
}
#m,
#m p {
font-size: .22rem
}
#m em {
float: right
}
#m {
position: absolute;
top: 1.6rem;
width: 100%
}
#m p {
color: #c1d1ff
}
#m em {
color: #ffab2a
}
</style>
</head>
<body>
<div class="box">
<div class="pr">
<img src="images/04.jpg" />
<div class="marquee">
<div id="m">
<p>
<em>888新快币</em>xk12*****8抽中</p>
<p>
<em>488新快币</em>xk12*****8抽中</p>
<p>
<em>188新快币</em>xk12*****8抽中</p>
<p>
<em>88新快币</em>xk12*****8抽中</p>
</div>
</div>
</div>
</div>
<script>
//marquee
var timer, m_height;
var m = document.getElementById("m")
m_height = m.clientHeight;
var marquee_height = document.querySelector(".marquee").clientHeight;
var m_top = marquee_height;
function setTimer() {
timer = setInterval(function () {
m_top -= 1;
if (m_top <= -m_height) {
m_top = marquee_height;
}
m.style.top = m_top + 'px';
}, 10)
}
function marquee() {
setTimer();
m.addEventListener("mouseover", function () {
clearInterval(timer);
})
m.addEventListener("mouseout", function () {
setTimer();
})
}
marquee()
</script>
</body>
</html>登入後複製
以上是實作marquee滾動（程式碼範例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
如何修復KB5055612無法在Windows 10中安裝？
4 週前
By DDD
<🎜>：種植花園 - 完整的突變指南
3 週前
By DDD
<🎜>：泡泡膠模擬器無窮大 - 如何獲取和使用皇家鑰匙
3 週前
By 尊渡假赌尊渡假赌尊渡假赌
北端：融合系統，解釋
4 週前
By 尊渡假赌尊渡假赌尊渡假赌
Mandragora：巫婆樹的耳語 - 如何解鎖抓鉤
3 週前
By 尊渡假赌尊渡假赌尊渡假赌
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
HTML：結構，CSS：樣式，JavaScript：行為
Apr 18, 2025 am 12:09 AM
HTML、CSS和JavaScript在Web開發中的作用分別是：1.HTML定義網頁結構，2.CSS控製網頁樣式，3.JavaScript添加動態行為。它們共同構建了現代網站的框架、美觀和交互性。
HTML的未來：網絡設計的發展和趨勢
Apr 17, 2025 am 12:12 AM
HTML的未來充滿了無限可能。 1)新功能和標準將包括更多的語義化標籤和WebComponents的普及。 2)網頁設計趨勢將繼續向響應式和無障礙設計發展。 3)性能優化將通過響應式圖片加載和延遲加載技術提升用戶體驗。
H5是HTML5的速記嗎？探索細節
Apr 14, 2025 am 12:05 AM
H5不僅僅是HTML5的簡稱，它代表了一個更廣泛的現代網頁開發技術生態：1.H5包括HTML5、CSS3、JavaScript及相關API和技術；2.它提供更豐富、互動、流暢的用戶體驗，能在多設備上無縫運行；3.使用H5技術棧可以創建響應式網頁和復雜交互功能。
HTML：建立網頁的結構
Apr 14, 2025 am 12:14 AM
HTML是構建網頁結構的基石。 1.HTML定義內容結構和語義，使用、、等標籤。 2.提供語義化標記，如、、等，提升SEO效果。 3.通過標籤實現用戶交互，需注意表單驗證。 4.使用、等高級元素結合JavaScript實現動態效果。 5.常見錯誤包括標籤未閉合和屬性值未加引號，需使用驗證工具。 6.優化策略包括減少HTTP請求、壓縮HTML、使用語義化標籤等。
解決 Craft CMS 中的緩存問題：使用 wiejeben/craft-laravel-mix 插件
Apr 18, 2025 am 09:24 AM
在使用CraftCMS開發網站時，常常會遇到資源文件緩存的問題，特別是當你頻繁更新CSS和JavaScript文件時，舊版本的文件可能仍然被瀏覽器緩存，導致用戶無法及時看到最新的更改。這個問題不僅影響用戶體驗，還會增加開發和調試的難度。最近，我在項目中遇到了類似的困擾，經過一番探索，我找到了wiejeben/craft-laravel-mix這個插件，它完美地解決了我的緩存問題。
如何優化網站性能：使用Minify庫的經驗與教訓
Apr 17, 2025 pm 11:18 PM
在開發網站的過程中，提升頁面加載速度一直是我的首要任務之一。曾經，我嘗試使用Minify庫來壓縮和合併CSS及JavaScript文件，以期提升網站的性能。然而，使用過程中遇到了不少問題和挑戰，最終讓我意識到Minify可能不再是最佳選擇。下面我將分享我的使用經驗，以及如何通過Composer安裝和使用Minify的過程。
HTML與CSS和JavaScript：比較Web技術
Apr 23, 2025 am 12:05 AM
HTML、CSS和JavaScript是構建現代網頁的核心技術：1.HTML定義網頁結構，2.CSS負責網頁外觀，3.JavaScript提供網頁動態和交互性，它們共同作用，打造出用戶體驗良好的網站。
了解H5代碼：HTML5的基本原理
Apr 17, 2025 am 12:08 AM
HTML5是構建現代網頁的關鍵技術，提供了許多新元素和功能。 1.HTML5引入了語義化元素如、、等，增強了網頁結構和SEO。 2.支持多媒體元素和，無需插件即可嵌入媒體。 3.表單增強了新輸入類型和驗證屬性，簡化了驗證過程。 4.提供了離線和本地存儲功能，提升了網頁性能和用戶體驗。
