怎么用原生JS达成marquee滚动的效果
导读：这篇文章给大家分享的是“怎么用原生JS达成marquee滚动的效果”，文中的讲解内容简单清晰，对大家学习和理解有一定的参考价值和帮助，有这方面学习需要的朋友，接下来就跟随小编一起学习一下“怎么用原生JS达成marquee滚动的效果”吧。...
这篇文章给大家分享的是“怎么用原生JS达成marquee滚动的效果”，文中的讲解内容简单清晰，对大家学习和理解有一定的参考价值和帮助，有这方面学习需要的朋友，接下来就跟随小编一起学习一下“怎么用原生JS达成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>
以上就是关于“怎么用原生JS达成marquee滚动的效果”的相关知识，感谢各位的阅读，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注网络，小编每天都会为大家更新不同的知识。
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： 怎么用原生JS达成marquee滚动的效果
本文地址： https://pptw.com/jishu/654454.html