网页“状态栏”文字特殊效果全攻略

2008-02-23 07:41:09来源:互联网 阅读 ()

新老客户大回馈,云服务器低至5折

  在上网时我们注意往往是网站页面内容,而状态栏不会被人太多注意,如果我们给页面的状态栏加一些特效,肯定会使你的网站增添一道风景,下面就给大家介绍7种常见的状态栏特效的Javascript代码。

  特效一:滚动显示

  第一步:把如下代码加入< head>区域中

  < script language="Javascript">

  < !--

  function scrollit(seed) {

  var m1 = "HI:你好! ";

  var m2 = "欢迎访问网页教学网";

  var m3 = "请多提意见,谢谢! ";

  var m4 = "欢迎您下次再来!";

  var m5 = "www.webjx.com ";

  var msg=m1 m2 m3 m4 m5;

  var out = " ";

  var c = 1;

  if (seed > 100) {

  seed--;

  cmd="scrollit(" seed ")";

  timerTwo=window.setTimeout(cmd,100);

  }

  else if (seed < = 100 && seed > 0) {

  for (c=0 ; c < seed ; c ) {

  out =" ";

  }

  out =msg;

  seed--;

  window.status=out;

  cmd="scrollit(" seed ")";

  timerTwo=window.setTimeout(cmd,100);

  }

  else if (seed < = 0) {

  if (-seed < msg.length) {

  out =msg.substring(-seed,msg.length);

  seed--;

  window.status=out;

  cmd="scrollit(" seed ")";

  timerTwo=window.setTimeout(cmd,100);

  }

  else {

  window.status=" ";

  timerTwo=window.setTimeout("scrollit(100)",75);

  }

  }

  }

  //-->

  < /script>

  第二步:把如下代码加入< body>区域中

  < body background=bag.gif onLoad="scrollit(100)">

  特效二:文字从状态栏的右边循环弹出

  把如下代码加入< head>区域中

  < script language="Javascript">

  var MESSAGE = "欢迎来到网页教学网,请多提意见。谢谢! "

  var POSITION = 150

  var DELAY = 10

  var scroll = new statusMessageObject()

  function statusMessageObject(p,d) {

  this.msg = MESSAGE

  this.out = " "

  this.pos = POSITION

  this.delay = DELAY

  this.i = 0

  this.reset = clearMessage}

  function clearMessage() {

  this.pos = POSITION}

  function scroller() {

  for (scroll.i = 0; scroll.i < scroll.pos; scroll.i ) {

  scroll.out = " "}

  if (scroll.pos >= 0)

  scroll.out = scroll.msg

  else scroll.out = scroll.msg.substring(-scroll.pos,scroll.msg.length)

  window.status = scroll.out

  scroll.out = " "

  scroll.pos--

  if (scroll.pos < -(scroll.msg.length)) {

  scroll.reset()}

  setTimeout ('scroller()',scroll.delay)}

  function snapIn(jumpSpaces,position) {

  var msg = scroll.msg

  var out = ""

  for (var i=0; i< position; i )

  {out = msg.charAt(i)}

  for (i=1;i< jumpSpaces;i )

  {out = " "}

  out = msg.charAt(position)

  window.status = out

  if (jumpSpaces < = 1) {

  position

  if (msg.charAt(position) == ' ')

  {position }

  jumpSpaces = 100-position

  } else if (jumpSpaces > 3)

  {jumpSpaces *= .75}

  else

  {jumpSpaces--}

  if (position != msg.length) {

  var cmd = "snapIn(" jumpSpaces "," position ")";

  scrollID = window.setTimeout(cmd,scroll.delay);

  } else { window.status=""

  jumpSpaces=0

  position=0

  cmd = "snapIn(" jumpSpaces "," position ")";

  scrollID = window.setTimeout(cmd,scroll.delay);

  return false }

  return true}

  snapIn(100,0);

  < /script>

  特效三:title弹出效果

  把如下代码加入< head>区域中

  < script language="javascript">

  < !-- Hide me

  var index_count = 0;

  var title_string = "欢迎光临网页教学网,(www.webjx.com)这里有许多电脑应用方面的文章

  ,是您学习网页制作技术的好去处!希望您能够常来!";

  var title_length = title_string.length;

  var cmon;

  var kill_length = 0;

  function loopTheScroll()

  {

  scrollTheTitle();

  if(kill_length > title_length)

  {

  clearTimeout(cmon);

  }

  kill_length ;

  cmon = setTimeout("loopTheScroll();",100)

  }

  function scrollTheTitle()

  {

  var doc_title = title_string.substring((title_length - index_count - 1),title_length);

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:妙用JavaScript实现网页的任意缩放

下一篇:使用Javascript制作连续滚动字幕