信息发布软件,b2b软件,广告发布软件

标题: JavaScript文字特效让您发现网页的字符可以上下跳舞 [打印本页]
作者: 群发软件    时间: 2017-6-5 23:52
标题: JavaScript文字特效让您发现网页的字符可以上下跳舞
文字滚动特效这种效果在今后的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);
//不间断连续



首先先看一下大致效果图，因为是动态的，在页面无法显示出来。
JavaScript文字特效让您发现网页的字符可以上下跳舞 b2b软件
具体的实现代码如下：
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程序设计有所帮助。



作者: yirenzhuang    时间: 2017-6-8 10:46
酷很霸气哦！服务真的真的很好哟~~赞一个，还会推荐其他商家来的哦~~棒
作者: yiyi2014    时间: 2017-6-20 13:27
，认真负责，我的链接自己弄错了，又给我重做了一个海报，万分感谢，好评奥。
作者: brt02    时间: 2017-6-22 17:24
赞一个，卖家服务部错
作者: chenxue2015    时间: 2017-6-22 19:07
得很好，商家对我各种不懂的问题都很耐心解答，以后还会再合作的
作者: anleey    时间: 2017-6-22 22:04
间做完，还不错，客服态度也好
作者: 武器    时间: 2017-6-23 00:11
我是来刷分的，嘿嘿
作者: c19900420    时间: 2017-6-27 00:02
风格，质量很好，用着很方便，还会再来的
作者: mmgg520    时间: 2017-7-1 12:16
作有些小插曲，通过充分沟通，店家积极用心的帮忙解决了问题。设计是非标准的产品，设计和客户之间的沟通非常重要
作者: cjagl520    时间: 2017-7-2 04:28
号和35号的热情服务，谢谢，下次还会找你们哦



欢迎光临 信息发布软件,b2b软件,广告发布软件 (http://postbbs.com/) Powered by Discuz! X3.2