html
<div class="data_bottom_list" id="data_bottom_list">
<ul class="data_bottom_ul">
<li></li>
<li></li>
</ul>
</div>
第一種JS袱蜡，視覺(jué)效果為一點(diǎn)點(diǎn)的緩慢移動(dòng)
$(document).ready(function () {
var marginTop = 0;
var bool = false;
// 判斷有多少個(gè)li
var lengli = $(".data_bottom_ul li").length - 2;
setInterval(function () {
if (bool) return;//判斷運(yùn)行和停止
$(".data_bottom_ul li:first").animate({ marginTop: marginTop-- }, 1, 'linear', function () {
if (!($(this).is(":animated"))) { //判斷是否有一個(gè)動(dòng)畫節(jié)點(diǎn)
if ((-marginTop) >= $(this).height() * lengli) { //判斷移出位置是否超過(guò)高度
$(this).css("margin", "0");
$(this).appendTo($(".data_bottom_list")); //把第一個(gè)節(jié)點(diǎn)移到ul后面
marginTop = 0; //重新設(shè)置移動(dòng)數(shù)值
}
}
});
}, 100);
$(".data_bottom_ul").mouseover(function () { //li鼠標(biāo)移入逻炊，停止移動(dòng)
bool = true;
});
$(".data_bottom_ul").mouseout(function () {
bool = false;
});
});
---------------------------------------------------------------------------------
$(function () {
var marginTop = 0;
var bool = false;
// 判斷有多少個(gè)li
var lengli = $(".c_left_content div").length - 2;
var step = 1; // 步長(zhǎng)
var speed = 100; // 速率
var temp = $(".c_left_content div:first");
var margin = temp.outerHeight(true) - temp.outerHeight() - 7;
setInterval(function () {
if (bool) return;//判斷運(yùn)行和停止
var first = $(".c_left_content div:first");
var height = first.outerHeight() + margin
marginTop += step
if (marginTop >= height) {
marginTop = 0;
first.css('margin-top', -marginTop + 'px');
first.appendTo($(".c_left_content"))
} else {
first.css('margin-top', -marginTop + 'px');
}
}, speed);
$(".c_left_content").mouseover(function () { //li鼠標(biāo)移入互亮，停止移動(dòng)
bool = true;
}).mouseout(function () {
bool = false;
});
});
第二種JS，視覺(jué)效果為一列一列的滾動(dòng)
var bool = false;
function autoScroll(obj) {
if (bool) return;//判斷運(yùn)行和停止
$(obj).find("ul").animate({ marginTop: "-50px" }, 500, function () { // margin高度為li高度
$(this).css({ marginTop: "0px" }).find("li:first").appendTo(this);
})
}
$(function () {
setInterval('autoScroll("#data_bottom_list")', 2000);
})
$("#data_bottom_list").mouseover(function () { //li鼠標(biāo)移入余素，停止移動(dòng)
bool = true;
});
$("#data_bottom_list").mouseout(function () {
bool = false;
});
兩種方法豹休，鼠標(biāo)移入皆會(huì)停止?jié)L動(dòng)
參考文章：https://blog.csdn.net/qq_37914074/article/details/127805906
js 文字上下無(wú)限滾動(dòng)
https://blog.csdn.net/qq_39045645/article/details/100099316
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=yes,viewport-fit=cover">
<title>title</title>
<meta name="keywords" content="title" />
<meta name="description" content="title" />
<link href="css/css_zsy.css" rel="stylesheet" type="text/css" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
<style>
.rdwd {
width: 90%;
margin: 0 auto;
margin-top: 1rem;
}
.rdwd_title {
text-align: center;
color: #00c8aa;
font-weight: bold;
font-size: 0.7rem;
}
.rdwd_box {
width: 100%;
height: 10rem;
overflow-y: auto;
margin-top: 0.5rem;
}
.rdwd_box::-webkit-scrollbar {
display: none;
}
.rdwd_box01 {
overflow: hidden;
}
.rdwd_box02 {
overflow: hidden;
}
.rdwd_box1 {
margin-top: 0.5rem;
}
.rdwd_box2 {
margin-top: 0.5rem;
}
.rdwd_box3 {
margin-top: 0.5rem;
}
.rdwd_box1 p:nth-child(1) {
color: #fd9c2b;
margin-bottom: 0.2rem;
}
.rdwd_box1 p:nth-child(2) {
color: #666666;
text-align: justify;
font-size: 0.55rem;
}
.rdwd_box2 p:nth-child(1) {
color: #fd9c2b;
margin-bottom: 0.2rem;
}
.rdwd_box2 p:nth-child(2) {
color: #666666;
text-align: justify;
font-size: 0.55rem;
}
.rdwd_box3 p:nth-child(1) {
color: #fd9c2b;
margin-bottom: 0.2rem;
}
.rdwd_box3 p:nth-child(2) {
color: #666666;
text-align: justify;
font-size: 0.55rem;
}
</style>
</head>
<body>
<!-- 熱點(diǎn)問(wèn)答 -->
<div class="rdwd">
<div class="rdwd_title">
熱點(diǎn)問(wèn)答
</div>
<div class="rdwd_box" id="rdwd_box">
<div class="rdwd_box01" onMouseOut="Up()" onMouseOver="Stop()" id="rdwd_box_1">
<div class="rdwd_box1">
<p><span style="color:#fd9c2b;font-weight:bold;margin-right:0.2rem; ">Q:</span>先天性心臟病治療費(fèi)用是多少嗎？可以報(bào)銷嗎桨吊？
</p>
<p>
<span
style="color:#666666;font-weight:bold;margin-right:0.2rem;">A:</span>泰安市婦幼保健院是泰安市唯一一家三級(jí)甲等婦幼保健
院威根，收費(fèi)與其他醫(yī)院一致凤巨，符合收費(fèi)規(guī)定。此外洛搀，泰安市
婦幼保健院是醫(yī)保醫(yī)院敢茁，與新農(nóng)合、城鎮(zhèn)醫(yī)療保險(xiǎn)留美、國(guó)際
保險(xiǎn)均有合作彰檬，符合條件者可按一定比例報(bào)銷。
</p>
</div>
<div class="rdwd_box2">
<p><span style="color:#fd9c2b;font-weight:bold;margin-right:0.2rem;">Q:</span>先天性心臟病治療效果如何谎砾？</p>
<p>
<span
style="color:#666666;font-weight:bold;margin-right:0.2rem;">A:</span>先心病患兒的治療方法有很多逢倍，治療效果要根據(jù)病情嚴(yán)
重程度和治療是否及時(shí)決定。隨著醫(yī)療技術(shù)的發(fā)展景图，房間
隔缺損较雕、室間隔缺損等簡(jiǎn)單先心病基本可恢復(fù)與正常人一
樣，而復(fù)雜先心病患者治療及時(shí)生活質(zhì)量大大提高症歇。
</p>
</div>
<!-- <div class="rdwd_box3">
<p><span style="color:#fd9c2b;font-weight:bold;margin-right:0.2rem;">Q:</span>先天性心臟病會(huì)遺傳嗎郎笆？</p>
<p>
<span
style="color:#666666;font-weight:bold;margin-right:0.2rem;">A:</span>先心病不是一個(gè)明確的遺傳性疾病，但具有一定的家族
傾向忘晤。先天性心臟病可由環(huán)境因素和遺傳因素或兩者共同
作用而引起宛蚓，建議懷孕時(shí)做好遺傳咨詢和孕期保健。
</p>
</div> -->
<!-- <div class="rdwd_box3">
<p><span style="color:#fd9c2b;font-weight:bold;margin-right:0.2rem;">Q:</span>先天性心臟病會(huì)遺傳嗎设塔？</p>
<p>
<span
style="color:#666666;font-weight:bold;margin-right:0.2rem;">A:</span>先心病不是一個(gè)明確的遺傳性疾病凄吏，但具有一定的家族
傾向。先天性心臟病可由環(huán)境因素和遺傳因素或兩者共同
作用而引起闰蛔，建議懷孕時(shí)做好遺傳咨詢和孕期保健痕钢。
</p>
</div>
<div class="rdwd_box3">
<p><span style="color:#fd9c2b;font-weight:bold;margin-right:0.2rem;">Q:</span>先天性心臟病會(huì)遺傳嗎？</p>
<p>
<span
style="color:#666666;font-weight:bold;margin-right:0.2rem;">A:</span>先心病不是一個(gè)明確的遺傳性疾病序六，但具有一定的家族
傾向任连。先天性心臟病可由環(huán)境因素和遺傳因素或兩者共同
作用而引起，建議懷孕時(shí)做好遺傳咨詢和孕期保健例诀。
</p>
</div>
<div class="rdwd_box3">
<p><span style="color:#fd9c2b;font-weight:bold;margin-right:0.2rem;">Q:</span>先天性心臟病會(huì)遺傳嗎随抠？</p>
<p>
<span
style="color:#666666;font-weight:bold;margin-right:0.2rem;">A:</span>先心病不是一個(gè)明確的遺傳性疾病，但具有一定的家族
傾向繁涂。先天性心臟病可由環(huán)境因素和遺傳因素或兩者共同
作用而引起拱她，建議懷孕時(shí)做好遺傳咨詢和孕期保健。
</p>
</div> -->
</div>
<div class="rdwd_box02" id="rdwd_box_2"></div>
</div>
</div>
</body>
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/viewport.js" type="text/javascript"></script>
<script src="js/js.js" type="text/javascript"></script>
<script src="./jquery-3.2.1.min.js"></script>
<script>
var box = document.getElementById("rdwd_box");
var con1 = document.getElementById("rdwd_box_1");
var con2 = document.getElementById("rdwd_box_2");
var speed = 10;
console.log(con1.scrollHeight);
console.log(box.scrollHeight);
// 內(nèi)容不超過(guò)高度不需要滾動(dòng)
if (con1.clientHeight >= box.clientHeight) {
con2.innerHTML = con1.innerHTML;
}
function ScrollUp() {
if (box.scrollTop >= con1.scrollHeight) {
box.scrollTop = 0;
} else
box.scrollTop++;
}
var i = setInterval("ScrollUp()", speed);
function Stop() {
clearInterval(i);
}
function Up() {
i = setInterval("ScrollUp()", speed);
}
// 適應(yīng)iphonex
// ********************************************************************************
// if ($(window).width() === 375 && $(window).height() === 812 && window.devicePixelRatio === 3) {
// $("body").css("padding-bottom", "34px");
// }
// ************************************************************************************
</script>
</html>
左右循環(huán)滾動(dòng)
.viewBox{
width: 100%;
overflow: hidden;
}
.scrollBox{
display: flex;
width: max-content;
}
.c_center_content_imgList {
display: block;
float: left;
width: max-content;
margin-top: 1vw;
}
.c_center_content_img {
display: flex;
flex-direction: column;
align-items: center;
float: left;
margin: 0 0 0 1vw;
}
.c_center_content_img img {
width: 5vw;
height: 5.6vw;
object-fit: scale-down;
margin-bottom: 0.46vw;
}
<div class="viewBox" id="viewBox" onMouseOut="vUp()" onMouseOver="vStop()">
<div class="scrollBox">
<div class="c_center_content_imgList" id="c_center_content_imgList">
<div class="c_center_content_img">
<img src="${a.featureFile}" alt="">
<span>${a.title}</span>
</div>
<div class="c_center_content_img">
<img src="${a.featureFile}" alt="">
<span>${a.title}</span>
</div>
</div>
<div class="c_center_content_imgList" id="c_center_content_imgList_01"></div>
</div>
</div>
var Lbox = document.getElementById("viewBox");
var Lcon1 = document.getElementById("c_center_content_imgList");
var Lcon2 = document.getElementById("c_center_content_imgList_01");
var Lspeed = 20;
//內(nèi)容未超出時(shí)不滾動(dòng)
if (Lcon1.clientWidth >= Lbox.clientWidth) {
Lcon2.innerHTML = Lcon1.innerHTML;
}
function scrollToLeft() {
if (Lbox.scrollLeft >= Lcon1.offsetWidth) {
Lbox.scrollLeft -= Lcon1.offsetWidth;
} else
Lbox.scrollLeft++;
}
var Lscroll = setInterval("scrollToLeft()", speed);
function vStop() {
clearInterval(Lscroll);
}
function vUp() {
Lscroll = setInterval("scrollToLeft()", speed);
}
//以上使用 scrollLeft 移動(dòng)時(shí)扔罪，頁(yè)面不斷重繪會(huì)造成界面閃爍秉沼，下面使用 動(dòng)畫 實(shí)現(xiàn) 滾動(dòng)
//css
.scroll-container {
width: 500px;
overflow: hidden;
}
.scroll-content {
white-space: nowrap;
position: relative;
animation: scroll 20s linear infinite;
display: flex;
width: max-content;
float: left;
}
.scroll-content:hover {
animation-play-state: paused;
}
@keyframes scroll {
0% {
left: 0;
}
100% {
left: -100%;
}
}
.item {
flex: 0 0 100px;
height: 100px;
float: left;
}
// html
<div class="scroll-container">
<div class="scroll-content">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
<div class="item">Item 5</div>
<div class="item">Item 11</div>
<div class="item">Item 21</div>
<div class="item">Item 31</div>
<div class="item">Item 41</div>
<div class="item">Item 51</div>
</div>
</div>
// js
var containerWidth = $('.scroll-container').outerWidth();
var contentWidth = $('.scroll-content').outerWidth();
if (containerWidth> contentWidth ) {
$('.scroll-content').css('animation-play-state', 'paused')
}
