共计 4781 个字符，预计需要花费 12 分钟才能阅读完成。
背景：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>
