实现marquee滚动（代码示例）
导读：收集整理的这篇文章主要介绍了实现marquee滚动（代码示例），觉得挺不错的，现在分享给大家，也给大家做个参考。本篇文章给大家带来的内容是关于实现marquee滚动（代码示例），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。...
收集整理的这篇文章主要介绍了实现marquee滚动（代码示例），觉得挺不错的，现在分享给大家，也给大家做个参考。本篇文章给大家带来的内容是关于实现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滚动（代码示例）的详细内容，更多请关注其它相关文章！
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： 实现marquee滚动（代码示例）
本文地址： https://pptw.com/jishu/584621.html