站内搜索: 请输入搜索关键词

当前页面: 开发资料首页Javascript 专题网页“状态栏”文字特殊效果全攻略

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

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


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

  特效一:滚动显示

<table cellSpacing=5 cellPadding=0 align=left border=0> <tr> <td></td></tr></table>

  第一步:把如下代码加入< 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);

  document.title = doc_title;

  index_count++;

  }

  loopTheScroll();

  //

  < /script>

   

  特效四:文字组合弹出

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

  < script language="javascript">

  < !-- Hide this script from old browsers --

  var speed = 10

  var pause = 1500

  var timerID = null

  var bannerRunning = false

  var ar = new Array()

  ar[0] = "欢迎来到网页教学网!"

  ar[1] = "它是您学校网页制作技术的好帮手!"

  ar[2] = "请多提意见,谢谢! "

  var message = 0

  var state = ""

  clearState()

  function stopBanner() {

  if (bannerRunning)

  clearTimeout(timerID)

  bannerRunning = false

  }

  function startBanner() {

  stopBanner()

  showBanner()

  }

  function clearState() {

  state = ""

  for (var i = 0; i < ar[message].length; ++i) {

  state += "0"

  }

  }

  function showBanner() {

  if (getString()) {

  message++

  if (ar.length < = message)

  message = 0

  clearState()

  timerID = setTimeout("showBanner()", pause)

  bannerRunning = true

  } else {

  var str = ""

  for (var j = 0; j < state.length; ++j) {

  str += (state.charAt(j) == "1") ? ar[message].charAt(j) : " "

  }

  window.status = str

  timerID = setTimeout("showBanner()", speed)

  bannerRunning = true

  }

  }

  function getString() {

  var full = true

  for (var j = 0; j < state.length; ++j) {

  if (state.charAt(j) == 0)

  full = false

  }

  if (full)

  return true

  while (1) {

  var num = getRandom(ar[message].length)

  if (state.charAt(num) == "0")

  break

  }

  state = state.substring(0, num) + "1" + state.substring(num + 1, state.length)

  return false

  }

  function getRandom(max) {

  return Math.round((max - 1) * Math.random())

  }

  // -- End Hiding Here

  < /script>

   

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

  < body bgcolor="#fef4d9" onLoad="startBanner()">

  特效五:文字不停闪烁

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

  < script language="">

  < !--

  var yourwords = "欢迎光临网页教学网(www.webjx.com)!!!";

  var speed = 700;

  var control = 1;

  function flash()

  {

  if (control == 1)

  {

  window.status=yourwords;

  control=0;

  }

  else

  {

  window.status="";

  control=1;

  }

  setTimeout("flash()",speed);

  }

  //

  < /script>

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

  < body bgcolor="#fef4d9" onLoad="flash()">

  特效六:文字来回出现

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

  < script LANGUAGE="Javascript">

  < !-- Begin

  var Message="欢迎光临网页教学网(www.webjx.com)!!!!!";

  var place=1;

  function scrollIn() {

  window.status=Message.substring(0, place);

  if (place >= Message.length) {

  place=1;

  window.setTimeout("scrollOut()",300);

  } else {

  place++;

  window.setTimeout("scrollIn()",50);

  }

  }

  function scrollOut() {

  window.status=Message.substring(place, Message.length);

  if (place >= Message.length) {

  place=1;

  window.setTimeout("scrollIn()", 100);

  } else {

  place++;

  window.setTimeout("scrollOut()", 50);

  }

  }

  // End

  < /script>

  第二步:把< body>中的内容改为:

  < body bgcolor="#fef4d9" onLoad="scrollIn()">

  特效七:状态栏固定信息

  < body bgcolor="#fef4d9" onmouseover="self.status='欢迎光临“网页教学网”--http://www.webjx.com';return">

</td> </tr> <tr> <td vAlign=top align=left height="100%">
↑返回目录
前一篇: 妙用JavaScript实现网页的任意缩放
后一篇: 使用Javascript制作连续滚动字幕