实现marquee滚动（代码示例）
程序员文章站
2022-03-02 21:54:20
...
本篇文章给大家带来的内容是关于实现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滚动（代码示例）的详细内容，更多请关注其它相关文章！