<!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{font:12px/1 '微软雅黑';}
.wrapper{font-size: 0.85rem; color: #333; padding-top: 0.75rem; margin: 0 0.75rem; white-space: nowrap; overflow: hidden;width: 300px;}
.inner{ width:1000px;overflow:hidden;}
.inner p{ display:inline-block;}
</style>
</head>
<body>
<div id="wrapper" class="wrapper">
<div class="inner">
<p class="txt">文字如果超出了宽度自动向左滚动文字如果超出了宽度自动向左滚动。</p>
</div>
</div>
<script>
var wrapper = document.getElementById('wrapper');
var inner = wrapper.getElementsByTagName('div')[0];
var p = document.getElementsByTagName('p')[0];
var p_w = p.offsetWidth;
var wrapper_w = wrapper.offsetWidth;
window.οnlοad=function fun(){
if(wrapper_w > p_w){ return false;}
inner.innerHTML+=inner.innerHTML;
setTimeout("fun1()",2000);
};
function fun1(){
if(p_w > wrapper.scrollLeft){
wrapper.scrollLeft++;
setTimeout("fun1()",30);
}
else{
setTimeout("fun2()",2000);
}
}
function fun2(){
wrapper.scrollLeft=0;
fun1();
}
</script>
</body>
</html>桌面平台的开发中，内容超出设定区域的大小时，我们常用的操作有三种，一个是显示，一个是隐藏，一个是出现滚动条。
在手机平台的开发中，我们常用的操作也有三种，第一是隐藏，第二是显示“。。。”，第三种是滚动显示。这篇文章主要介绍后两种的用法。
现阶段做手机开发，针对的智能手机主要是iPhone和Android，用的浏览器分别是safari和chrome。都是webkit内核，所以下面的实例代码也会针对webkit内核来写。(同时要注意一点，在浏览器和虚拟机内webview引入html时的展现效果是不同的)
第一：超出显示“...”
用到命令 text-overflow ： clip | ellipsis 文本超出：截断|省略
但这一条命令是看不到效果的，需要另外两条命令配合使用，让文本能够溢出，第一个是强制一行内显示，white-space:nowrap；第二个是溢出内容隐藏，overflow:hidden;
<!DOCTYPE html> <html > <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>process msmj</title> <style> h1 {color:rgba(250,100,100,0.7);height:40px;line-heihgt:40px;width:500px; overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} </style> </head> <body> <h1>梨花院落溶溶月，柳絮池塘淡淡风。</h1> </body> </html>
第二：超出跑马等效果
老的前端开发人员对于marquee标签肯定不陌生，一个被淘汰的标签，被刚入门的新手所喜爱，因为能通过一个简单的标签做出动态的效果。但是在实际应用上的局限性和效果的过时，使这个标签退出历史舞台，大家纷纷改用js来实现无间断滚动等效果。
新的CSS3 marquee设置，可以说功能强大了很多，更加易操作，用简单的代码解决了js中比较纠结的字符长度判断等难题。强烈推荐大家使用。
对于这个属性的定义，W3C标准用法和webkit内核浏览器的支持用法并不相同，由于我们立足实战实用，所以这里只介绍好用的。可用的。
我们需要四句常用命令：
overflow:-webkit-marquee;//指定溢出时滚动。
-webkit-marquee-style:scroll | slide | alternate; //跑马灯样式，分三种。scroll，从一端滚动到另一端，内容完全滚入（消失）时重新开始。slide，从一端滚到另一端，内容接触到另一端后，立马重新开始。alternate，内容不跑到显示区域外，在里面来回碰壁反弹。这里主要用第一种。
-webkit-marquee-repetition:infinite | number;// 跑马灯跑的次数，infinite 为无限多次，不结束。或者可以用正整数设置滚动的次数。
-webkit-marquee-direction:up | down | left | right; //跑动的方向，这个要注意结合实际情况，即实际你操作的标签文本流溢出在哪个方向溢出。
-webkit-marquee-speed:slow | normal | fast;//跑动的速度设置。
实例：
<!DOCTYPE html> <html >可是我测试的时候没有效果！！！<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>process msmj</title> <style> h1 {color:rgba(250,100,100,0.7);height:40px;line-heihgt:40px;width:400px; overflow: -webkit-marquee; -webkit-marquee-style: scroll; -webkit-marquee-repetition: infinite; -webkit-marquee-direction: up; -webkit-marquee-speed:slow; border:1px #ccc solid; } </style> </head> <body> <h1>梨花院落溶溶月，柳絮池塘淡淡风。</h1> </body> </html>
这里的例子是竖向超出，竖向滚动的。不用判断文本是否超出，超出多少，比用js控制简洁方便的多。推荐大家使用。
在桌面浏览器中时，当marquee-style为scroll时，不管是不是超出都会滚动，类似与之前的marquee标签。而实用alternate时，只有超出是才会滚动。但是在iPhone和iPad上开发，当系统为为5.0以下的，效果同桌面平台。当系统为5.0时，只有超出才会滚动。所以在做移动平台的开发上，这个效果还是非常实用的。
然后我使用这个标签就可以，代码如下：
<marquee direction="up" scrollamount="1" style="width: 210px;height: 100px" id="">
<a href="#">纤云弄巧，飞星传恨，银汉迢迢暗度。</a><br />
<a href="#">金风玉露一相逢，便胜却、人间无数。</a><br />
<a href="#">柔情似水，佳期如梦。忍顾鹊桥归路！</a><br />
<a href="#">两情若是久长时，又岂在、朝朝暮暮。</a><br />
<a href="#">千重劫，百世难，亘古匆匆，弹指间！</a><br />
<a href="#">不死躯，不灭魂，震古烁今，无人敌！</a><br />
<a href="#">待到阴阳逆乱时，以我魔血染青天！</a><br />
</marquee>
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
247
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
