|
|
软件教程首图:
软件教程分类：Java 图文教程
软件图文教程视频教程分类：软件图文教程
软件教程难易程度：软件中级教程
软件教程发布日期：2017-06-05
软件教程关键字：JavaScript文字特效让您发现网页的字符可以上下跳舞
① 本信息收集于网络，如有不对的地方欢迎联系我纠正！
② 本信息免费收录，不存在价格的问题！
③ 如果您的网站也想这样出现在这里，请您加好友情链接，我当天会审核通过！
④友情链接关键字：软件定制网站 网址：http://www.postbbs.com
软件教程详细描述
 | |  |  | 文字滚动特效这种效果在今后的web发展中是不是常用或者是否依然被设计师们所青睐，从技术层面看并不是最重要的，了解它的实现原理，对自身前端技术的提高，会有很大的帮助，世间万物，万变不离其宗，掌握了它的运行规律，你才不会被其花花外表所迷惑，甚至你可以在掌握其规律的前提下，运行相关技术，创造出新的效果来。下面看看它的实现过程：
1.html
复制代码代码如下:
<div class="box" id="marqueebox0">
<ul>
<li style="background:#f8e2ac;">第一行</li>
<li style="background:#f5f5f5;">第二行</li>
<li style="background:#ffe6ec;">第三行</li>
</ul>
</div>
2.css
复制代码代码如下:
.box{
width:150px;
height:25px;
line-height:25px;
border:#bbb 1px solid;
overflow:hidden;
}
.box ul{margin:0; padding:0}
.box li{
height:25px;
line-height:25px;
font-size:12px;
text-align:center;
list-style-type:none;
}
3.js
复制代码代码如下:
function startmarquee(lh,speed,delay,index){
/*
函数startmarquee的参数：
lh：文字一次向上滚动的距离或高度；
speed：滚动速度；
delay：滚动停顿的时间间隔；
index：可以使封装后的函数应用于页面当中不同的元素；
*/
var t;
var p=false;
var o=document.getElementById("marqueebox"+index);
//获取文档中的滚动区域对象，赋值给变量o；
o.innerHTML+=o.innerHTML; //对象中的实际内容被复制了一份，包含了两个ul，当然li标签也
由原来的3行，变为6行；复制的目的在于给文字不间断向上滚动提供过渡。
o.onmouseover=function(){p=true}
//鼠标滑过，停止滚动；
o.onmouseout=function(){p=false}
//鼠标离开，开始滚动；p是true还是false直接影响到下面start()函数的执行；
o.scrollTop = 0;
//文字内容顶端与滚动区域顶端的距离，初始值为0；
function start(){
t=setInterval(scrolling,speed); //每隔一段时间，setInterval便会执行一次
scrolling函数；speed越大，滚动时间间隔越大，滚动速度越慢；
if(!p){ o.scrollTop += 1;}
//滚动停止或开始，取决于p传来的布尔值；
}
function scrolling(){
if(o.scrollTop%lh!=0){
//如果不被整除，即一次上移的高度达不到lh，则内容会继续往上滚动；
o.scrollTop += 1;
if(o.scrollTop>=o.scrollHeight/2) o.scrollTop = 0;
//对象o中的内容之前被复制了一次，所以它的滚动高度，其实是原来内容的两倍高度；
当内容向上滚动到scrollHeight/2的高度时，全部3行文字已经显示了一遍，至此整块内容
scrollTop归0；再等待下一轮的滚动，从而达到文字不间断向上滚动的效果；
}else{
clearInterval(t);
//否则清除t，暂停滚动
setTimeout(start,delay);
//经过delay间隔后，启动start() 再连续滚动
}
}
setTimeout(start,delay);
//第一次启动滚动；setTimeout会在一定的时间后执行函数start()，且只执行一次
}
//传递参数
startmarquee(25,30,3000,0);
//带停顿效果
startmarquee(25,40,0,1);
//不间断连续
首先先看一下大致效果图，因为是动态的，在页面无法显示出来。 具体的实现代码如下： 1.首先是css代码：
<style type="text/css">body,ul,li,a,p,div{padding:0px; margin:0px; font-size:14px;}ul,li{list-style:none;}a{ text-decoration:none; color:#333;} #demo{ overflow:hidden; /*溢出的部分不显示*/ width:290px; height:228px;/*一定要确切，避免demo1与demo2之间的距离过大*/ padding:5px; margin:50px auto; }#express li{ list-style:none; font-size:14px; height:25px; margin:0px 5px; line-height:180%;/*行与行之间的距离*/ letter-spacing:2px;/*字与字之间的距离*/ border-bottom:1px dashed #ccc; cursor:pointer; }</style>
2.内容代码如下：
<div id="demo" > <div id="demo1" > <ul id="express"> <li><a href="#">召开背街小巷综合整治工作调度会</a></li> <li><a href="#">平原街道加大出店经营整治</a></li> <li><a href="#">平原街道召开计生业务培训会</a></li> <li><a href="#">平原街道：干部进村入户宣传促征迁</a></li> <li><a href="#">平原街道：为返乡群众免费孕检</a></li> <li><a href="#">平原街道：狠抓春运道路交通安全</a></li> </ul> </div> <div id="demo2"></div></div>
3.最后是最关键的js代码：
<script type="text/javascript"> //获取id=demo,id=demo1,id=demo2的元素对象，并把id=demo1的内容赋值给id=demo2 var demo=document.getElementById("demo"); var demo1=document.getElementById("demo1"); var demo2=document.getElementById("demo2"); demo2.innerHTML=demo1.innerHTML; //给demo1,demo2加相同的高度 demo1.style.height=demo.offsetHeight+"px"; demo2.style.height=demo.offsetHeight+"px"; //定时器，每隔50毫秒调用一次scrollup()函数，来实现文字的滚动 var timer=window.setInterval("scrollup()",50); //定义函数 function scrollup() { //如果demo滚上去的高度大于demo的高度，重新给demo赋值从0再开始滑动 if(demo.scrollTop>=demo.offsetHeight) { demo.scrollTop=0; }else { demo.scrollTop++; } } //鼠标放上停止滚动，鼠标离开继续滚动 demo.onmouseover=function(){ //清除定时器 clearInterval(timer); } demo.onmouseout=function(){ //添加定时器 timer=window.setInterval("scrollup()",50); }</script>
以上就是本文的全部内容，希望对大家学习javascript程序设计有所帮助。
| |  | |  |
|
unto效果是做出来的JavaScript从天而降的代码这里随便复制过去用吧next群发企业汇网广告帖子自动发帖软件
|
|( 京ICP备09078825号 )
发表于 2017-6-5 23:52:43
收藏
发表于 2017-7-1 12:16:55
