新闻循环从下往上滚动

最新推荐文章于 2024-09-14 17:29:16 发布

diaoyuzhi7228

最新推荐文章于 2024-09-14 17:29:16 发布

阅读量147

点赞数

文章标签： 5g

原文链接：http://www.cnblogs.com/haixiahuang/p/10208120.html

版权

<!DOCTYPE html>

<head>

<title>新闻循环从下往上滚动</title>

<style>

* {

margin: 0;

padding: 0;

border: 0;

outline: 0;

font-size: 100%;

vertical-align: baseline;

background: transparent;

outline-style: none;

/*FF*/

}

body {

/* line-height: 1; */

}

a {

margin: 0;

padding: 0;

border: 0;

font-size: 100%;

vertical-align: baseline;

background: transparent;

}

a:hover,

a:focus {

text-decoration: none;

bblr: expression(this.onFocus=this.blur());

/*IE*/

outline-style: none;

/*FF*/

}

table {

border-collapse: collapse;

border-spacing: 0;

}

input,

select {

vertical-align: middle;

}

/*css为clearfix，清除浮动*/

.clearfix::before,

.clearfix::after {

content: "";

height: 0;

line-height: 0;

display: block;

visibility: hidden;

clear: both;

}

.clearfix:after {

clear: both;

}

.clearfix {

*zoom: 1;

/*IE/7/6*/

}

/* 内容开始样式start */

.demo {

overflow: hidden;

display: flex;

overflow: hidden;

background-color: rgb(255, 255, 255);

height: 60px;

width: 100%;

place-self: flex-start;

position: relative;

}

.swiper {

width: 100%;

}

.axis {

display: flex;

padding: 5px 0 5px 5px;

height: 100%;

box-sizing: border-box;

margin-top: 1px;

margin-bottom: 1px;

-webkit-box-orient: horizontal;

flex-direction: column;

}

.axis span {

display: flex;

overflow: hidden;

line-height: 19px;

-webkit-box-align: center;

align-items: center;

-webkit-box-orient: horizontal;

}

/* 内容开始样式end */

</style>

</head>

<body>

<span>我是第一行公认最胆小的5种狗狗，连猫都怕！</span>

<span>这2种“毒肥”，不可喂月季，否则出问题</span>

</div>

<span>我是第二行不要着急买手机，支持5G的就要来了</span>

<span>2019款苹果手机曝光：屏幕有新变化！</span>

</div>

<span>我是第33333行为啥很多猫都会得肾衰竭？罪魁祸首是它！</span>

<span>这2种“毒肥”，不可喂月季，否则出问题</span>

</div>

<span>我是第4444行不要着急买手机，支持5G的就要来了</span>

<span>2019款苹果手机曝光：屏幕有新变化！</span>

</div>

<span>我是第55555行不要着急买手机，支持5G的就要来了</span>

<span>2019款苹果手机曝光：屏幕有新变化！</span>

</div>

<span>我是第6666行公认最胆小的5种狗狗，连猫都怕！</span>

<span>这2种“毒肥”，不可喂月季，否则出问题</span>

</div>

<span>我是第一行公认最胆小的5种狗狗，连猫都怕！</span>

<span>这2种“毒肥”，不可喂月季，否则出问题</span>

</div>

<span>我是第二行不要着急买手机，支持5G的就要来了</span>

<span>2019款苹果手机曝光：屏幕有新变化！</span>

</div>

<span>我是第33333行为啥很多猫都会得肾衰竭？罪魁祸首是它！</span>

<span>这2种“毒肥”，不可喂月季，否则出问题</span>

</div>

<span>我是第4444行不要着急买手机，支持5G的就要来了</span>

<span>2019款苹果手机曝光：屏幕有新变化！</span>

</div>

<span>我是第55555行不要着急买手机，支持5G的就要来了</span>

<span>2019款苹果手机曝光：屏幕有新变化！</span>

</div>

<span>我是第6666行公认最胆小的5种狗狗，连猫都怕！</span>

<span>这2种“毒肥”，不可喂月季，否则出问题</span>

</div>

</body>

</html>

var divs = document.getElementsByClassName('swiper');

for (var i = 0; i < divs.length; i++) {

var alone = divs[i];

newScroll(alone)

}

function newScroll(thisDiv) {

var swiperes = thisDiv;

var cyclic = setInterval(scroll, 3000);

var n = 0

function scroll() {

var lenth = swiperes.getElementsByClassName('axis').length - 2;

if (n > lenth * 62) {

n = 0;

swiperes.style.cssText = 'transform: translate3d(0, ' + n + 'px, 0);';

} else {

n = n + 62;

swiperes.style.cssText = 'transform: translate3d(0, ' + -n + 'px, 0);height:100%;transition:transform 250ms ease 0s';

}

swiperes.onmouseout = function() {

cyclic = setInterval(scroll(), 3000);

}

swiperes.onmouseover = function() {

clearInterval(cyclic);

}

</script>

转载于:https://www.cnblogs.com/haixiahuang/p/10208120.html

diaoyuzhi7228

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫