js、jQuery实现文字上下无缝轮播、滚动效果
2021-02-14 23:20
标签：mat numbers ice article oat doctype time document height js、jQuery实现文字上下无缝轮播、滚动效果 标签：mat numbers ice article oat doctype time document height 原文地址：https://www.cnblogs.com/xiewangfei123/p/12989325.html原生JS版本
DOCTYPE html>
html lang="en">
head>
meta charset="UTF-8">
title>文字上下无缝轮播title>
head>
style>
* {
margin: 0;
padding: 0;
}
#container{
width: 60%;
margin: 100px auto;
position: relative;
height: 200px;
overflow: hidden;
}
#list-wrapper{
position: relative;
}
ul {
list-style: none;
background: #f8f8f8;
text-align: center;
padding: 0 20px;
}
li{
height: 35px;
line-height: 35px;
color: #fff;
}
li:nth-child(odd){
background: #5077aa;
}
li:nth-child(even){
background: #fb6b06;
}
style>
body>
div id="container">
div id="list-wrapper" style="top: 0">
ul class="notice-list" id="notice-list">
li>富强、民主、文明、和谐、自由1li>
li>富强、民主、文明、和谐、自由2li>
li>富强、民主、文明、和谐、自由3li>
li>富强、民主、文明、和谐、自由4li>
li>富强、民主、文明、和谐、自由5li>
li>富强、民主、文明、和谐、自由6li>
ul>
ul class="notice-list" id="notice-list-2">
ul>
div>
div>
script>
var ROLL_SPEED = 100
var noticeList1 = document.getElementById(‘notice-list‘);
var noticeList2 = document.getElementById(‘notice-list-2‘);
var listWrapper = document.getElementById(‘list-wrapper‘);
noticeList2.innerHTML=noticeList1.innerHTML;
var timer = setInterval(rollStart, ROLL_SPEED);
function rollStart() {
if (Math.abs(_subStr(listWrapper.style.top)) >= noticeList1.clientHeight) {
listWrapper.style.top = ‘0px‘
} else {
var top = listWrapper.style.top
listWrapper.style.top = _subStr(top)-1+‘px‘
}
}
// 截取px前数值
function _subStr(str) {
var index = str.indexOf(‘px‘);
if (index > -1) {
return parseFloat(str.substr(0, index + 1))
}
}
script>
body>
html>
jQuery版本
DOCTYPE html>
html lang="en">
head>
meta charset="UTF-8">
title>文字上下无缝轮播title>
head>
style>
* {
margin: 0;
padding: 0;
}
#container{
width: 60%;
margin: 100px auto;
position: relative;
height: 200px;
overflow: hidden;
}
#list-wrapper{
position: relative;
top: 0;
}
ul {
list-style: none;
background: #f8f8f8;
text-align: center;
padding: 0 20px;
}
li{
height: 35px;
line-height: 35px;
color: #fff;
}
li:nth-child(odd){
background: #5077aa;
}
li:nth-child(even){
background: #fb6b06;
}
style>
body>
div id="container">
div id="list-wrapper">
ul class="notice-list" id="notice-list">
li>富强、民主、文明、和谐、自由1li>
li>富强、民主、文明、和谐、自由2li>
li>富强、民主、文明、和谐、自由3li>
li>富强、民主、文明、和谐、自由4li>
li>富强、民主、文明、和谐、自由5li>
li>富强、民主、文明、和谐、自由6li>
ul>
ul class="notice-list" id="notice-list-2">
ul>
div>
div>
script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js">script>
script>
var ROLL_SPEED = 100
var noticeList1 = $(‘#notice-list‘);
var noticeList2 = $(‘#notice-list-2‘);
var listWrapper = $(‘#list-wrapper‘);
noticeList2.html(noticeList1.html())
listWrapper.css(‘top‘, 0)
var timer = setInterval(rollStart, ROLL_SPEED);
function rollStart() {
if (Math.abs(_subStr(listWrapper.css(‘top‘))) >= noticeList1.height()) {
listWrapper.css(‘top‘, 0)
} else {
var top = listWrapper.css(‘top‘);
listWrapper.css(‘top‘, _subStr(top) - 1)
}
}
// 截取px前数值
function _subStr(str) {
var index = str.indexOf(‘px‘);
if (index > -1) {
return parseFloat(str.substr(0, index + 1))
}
}
script>
body>
html>
文章标题：js、jQuery实现文字上下无缝轮播、滚动效果
文章链接：http://soscw.com/index.php/essay/55393.html