文字横向滚动
Posted 前端HL
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了文字横向滚动相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" /> <meta name="format-detection" content="telephone=no,email=no,date=no,address=no"> <title>js实现文字超过显示宽度每间隔1s自动向左滚动显示</title> <style type="text/css"> * { margin: 0; padding: 0; } body { max-width: 640px; margin: 0 auto; } .pad_right { padding-right: 2em; } #scroll_div { height: 26px; overflow: hidden; white-space: nowrap; width: 535px; margin-left: 10px; } #scroll_begin, #scroll_end { display: inline; } </style> </head> <body> <div id="scroll_div" class="fl"> <div id="scroll_begin"> 恭喜793765***获得 <span class="pad_right">50元巨人点卡奖励</span> 恭喜793765***获得 <span class="pad_right">50元巨人点卡奖励</span> 恭喜793765***获得 <span class="pad_right">50元巨人点卡奖励</span> 恭喜793765***获得 <span class="pad_right">50元巨人点卡奖励</span> 恭喜793765***获得 <span class="pad_right">50元巨人点卡奖励</span> 恭喜793765***获得 <span class="pad_right">50元巨人点卡奖励</span> 恭喜793765***获得 <span class="pad_right">50元巨人点卡奖励</span> </div> <div id="scroll_end"></div> </div> <script type="text/javascript"> //文字横向滚动 function ScrollImgLeft() { var speed = 50; var MyMar = null; var scroll_begin = document.getElementById("scroll_begin"); var scroll_end = document.getElementById("scroll_end"); var scroll_div = document.getElementById("scroll_div"); scroll_end.innerHTML = scroll_begin.innerHTML; function Marquee() { if (scroll_end.offsetWidth - scroll_div.scrollLeft <= 0) scroll_div.scrollLeft -= scroll_begin.offsetWidth; else scroll_div.scrollLeft++; } MyMar = setInterval(Marquee, speed); scroll_div.onmouseover = function() { clearInterval(MyMar); } scroll_div.onmouseout = function() { MyMar = setInterval(Marquee, speed); } } ScrollImgLeft(); </script> </body> </html>
效果图：
原链接：http://www.jb51.net/article/74683.htm
二、垂直滚动：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>垂直滚动</title> <style type="text/css"> #gongao { width: 1000px; height: 110px; overflow: hidden; line-height: 30px; font-size: 13px; font-family: \'宋体\'; background: #DDE5ED; color: #0C77CF; font-weight: bold; } </style> </head> <body> <script type="text/javascript"> //要想滑动不停 scroll_begin的内容高度必须大于scroll_div的高度 function ScrollImgLeft() { var speed = 50; var scroll_begin = document.getElementById("scroll_begin"); var scroll_end = document.getElementById("scroll_end"); var scroll_div = document.getElementById("scroll_div"); scroll_end.innerHTML = scroll_begin.innerHTML; function Marquee() { //scrollTop滑动条起点向下滑动的距离 当滑动条滑动的距离为一个div的高度时 即一个div显示完后 //迅速重置滑动条的起点为最上端 重新显示第一个div内容 视觉上达到滚动的效果 if (scroll_end.offsetHeight - scroll_div.scrollTop <= 0) scroll_div.scrollTop -= scroll_begin.offsetHeight; else scroll_div.scrollTop++; } var MyMar = setInterval(Marquee, speed); scroll_div.onmouseover = function() { clearInterval(MyMar); } scroll_div.onmouseout = function() { MyMar = setInterval(Marquee, speed); } } </script> <div id="gongao"> <div style="width:200px;height:100px;margin:0 auto;white-space: nowrap;overflow:auto;" id="scroll_div" class="scroll_div"> <div id="scroll_begin"> <table> <tr> <td>1.111jjdkkdl经典款进口</td> </tr> <tr> <td>2.222kdal经济快递就经济快递来</td> </tr> <tr> <td>3.333jjdkkdl经典款进口</td> </tr> <tr> <td>4.444kdal经济快递就经济快递来</td> </tr> <tr> <td>5.555jjdkkdl经典款进口</td> </tr> <tr> <td>6.666kdal经济快递就经济快递来</td> </tr> </table> </div> <div id="scroll_end"></div> </div> <script type="text/javascript"> ScrollImgLeft(); </script> </div> </body> </html>
效果图：
第三个例子，垂直向上滚动：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>jQuery实现消息列表循环垂直向上滚动</title> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> <script type="text/javascript"> $(function () { movedome(); }); function movedome() { var margintop = 0;//上边距的偏移量 var stop = false; setInterval(function () { if (stop == true) { return; } $("#notice").children("li").first().animate({ "margin-top": margintop-- }, 0, function () { var $li = $(this); if (!$li.is(":animated")) {//第一个li的动画结束时 if (-margintop > $li.height()) { $li.css("margin-top", "0px").appendTo($("#notice")); margintop = 0; } } }); }, 50); //鼠标放到快递信息(ul)上时 $("#notice").hover(function () { $(this).css("cursor", "pointer"); stop = true;//停止动画 }, function () { stop = false;//开始动画 }); } </script> </head> <body> <style> ul { list-style: none; margin: 0; height: 30px; overflow: hidden; } li { height: 30px; line-height: 30px } </style> <ul id="notice"> <li>这是一条消息0</li> <li>这是一条消息1</li> <li>这是一条消息2</li> </ul> </body> </html>
垂直向上滚动，停顿3秒显示一条
let scrollListWrap = $("#scrollListWrap");
var objHeight = scrollListWrap.height();
setInterval(function () {
scrollListWrap.children(\'ul\').animate({
top: -objHeight
}, 500, function () {
$(this).css(\'top\', 0).children(\'li:first\').appendTo($(this))
})
}, 3000)
附加知识：
对象的几个的属性：
innerHTML:设置或获取位于对象起始和结束标签内的 HTML
scrollHeight: 获取对象的滚动高度。
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth:获取对象的滚动宽度
offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
offsetWidth:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的宽度
1.向左滚动
if(scroll_end.offsetWidth-scroll_div.scrollLeft
向左滚动
ScrollImgLeft();
2.向上滚动
if(scroll_end.offsetTop-scroll_div.scrollTop
向上滚动
ScrollImgTop();
css3无缝滚动
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>css3无缝滚动</title> <style> * { margin: 0; padding: 0; } .wrap { overflow: hidden; width:以上是关于文字横向滚动的主要内容，如果未能解决你的问题，请参考以下文章