<!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>
效果图：
附加知识：
对象的几个的属性：
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();
原文地址：https://www.cnblogs.com/huanghuali/p/8510019.html
时间： 2024-08-25 15:01:18