滚动图片php代码,实现marquee滚动（代码示例）

本篇文章给大家带来的内容是关于实现marquee滚动(代码示例)，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

背景：marquee标签在有些浏览器兼容性不好，就手动用原生js实现了下。

横着滚动效果链接描述

传奇无双1215

(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);

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;

}

888新快币 xk12*****8抽中

88dfdfdfd8新快币 xk1dfdfd2*****8抽中

888新快币 xk12*****8抽中

888新快币 xk12*****8抽中

888新快币 xk12*****8抽中

888新快币 xk12*****8抽中

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()

竖着滚动效果链接描述

万圣节1101

(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);

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

}

888新快币xk12*****8抽中

488新快币xk12*****8抽中

188新快币xk12*****8抽中

88新快币xk12*****8抽中

//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()