用JavaScript事件在主页上玩花样

薇儿奇葩

薇儿奇葩

2016-02-19 22:13

今天图老师小编要跟大家分享用JavaScript事件在主页上玩花样,精心挑选的过程简单易学,喜欢的朋友一起来学习吧!

  经常发现有些主页在下载或关闭时,当鼠标点击或移过某些图象时,会产生某些特别的效果,如欢迎词、警告语、状态栏提示等等。这些都是JavaScript的事件响应玩的花样。想不想让你的主页也玩玩花样,给你的主页锦上添花呢?那么看一看下面JavaScript事件的几个具体应用吧。

  一、主页欢迎词或提示通知

  当主页被下载显示时,在主页上浮现一个小小的提示窗口,显示你的欢迎词、主页更新信息、通知等等。实现方法:

  在<head>与</head>之间插入代码:

  <script language=JavaScript〉
  <!--
  window.open(inform1.HTML,welcome,menubar=no,toolbar=no,
  location=no,directories=no,status=no,resizable=0,scrollbars=0,width=300,height=200)
  //-->
  </script>
  其中open()为window对象的方法,其格式为:

  variable=open(url,name,[options])

  options选项有:menubar菜单条,toolbar工具条,location地址栏,directories目录栏,status状态栏,resizable缩放性,scrollbars滚动条,其值为1│0或yes│no。width,height 窗口的大小,值为像素。通过这些设定使窗口尽可能的小。

  如果你的通知比较长,一个窗口容纳不下时,可以将内容分成几个部分,在inform1.HTML的<head>与</head>中加入:<meta http-equiv=″Refresh content=″30;url=inform2.HTML″>,并在inform1.HTML中提示不要立刻关掉通知窗口,那么在30秒后会自动显示下一部分的内容。这个原理就是主页封面的原理,即定时的自动链接。

  二、状态栏的链接说明

  用<a〉的属性“alt=说明”可以给链接标注说明,但这需要鼠标在链接上停留一会儿,而此时的状态栏只显示链接的url。用下列的方法可以实现在状态栏显示链接的提示或说明:

  <a href=../../url onMOuseOver=″window.status=’说明文字’;return true;” onMouseOut=″window.status=’’;″>

  当鼠标移动到链接上时,状态栏出现链接提示。其中status为的一个window属性,用来指定浏览器状态栏出现的临时信息。

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

  同时window还有一个属性defaultStatus用来指定状态栏的缺省状态信息。一般用于首页作为欢迎提示,特别在封面上应用较多。我们知道,主页封面的原理是先下载一页简单页,并指定在几秒后自动链接到主页。在这之间有一? 间状态栏显示“完成”,这就容易给性急的人一个错觉,以为你的主页就那么光秃秃一点儿。这时你可以在封面的代码中加入<body onLoad=″window.defaultStatus=’您正在进入……的主页,请稍候’″>之类的提示语。

  当然,你也可以让这种提示动起来,以便于显示较长的提示,不过这就麻烦一点了,在中加入代码:

  <script language=″JavaScript″>
    var timer1,iPosition=0;
    function showsting()
    {
  sString =″大家好,欢 迎 光 临 本 站 访 问 !:-)您正在进入……的主页,载入中,请稍候 ″
  var i,j,sMsg=sString;
  j=(70/sMsg.length)+1;
  for(i = 0;i < j;i++)
    sMsg += ″ ″ + sMsg;
  window.status=sMsg.substring
    (iPosition,iPosition + 120);
    if (iPosition ++ ==sMsg.length)
     iPosition=0;
  timer1 = setTimeout(″Banner()″,150);
  }
  showstring();
  </script>

  三、活动图标

  某些图像当鼠标移过时会变成一种模样,鼠标移开后复原,单击它时又变成另一种模样,很有趣。这种技术常用于制作活动图标。通常的实现方法比较复杂,这里介绍一种简单的实现方法:

  <a href=../../url target=″_blank″ onMouseOver=″document.images[1].src=../../1.gif″ onMouseOut=″document.images[1].src=../../2.gif″ onClick=″document.images[1].src=../../3.gif″ ><img src=../../″1.gif″></a>

  注:其中图形数组元素images[1]的具体对象是指文档的第二个图形,而且1.gif,2.gif,3.gif的尺寸大小应该相同。

  需要注意的是这种方法是直接改变图标的src来实现活动图标,在网络拥挤时可能会有一点延滞,因此图标的图像不宜过大,否则效果不好。

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

  四、送别词

  给主页做一个送别词,能增加主页的人情味,提高访客的回头率。实现的方法是用事件处理器onUnLoad。虽然也可以像通知那样开一个小窗口,但是送别词应该简洁明了,否则会适得其反、令人生厌。这时可以调用window的方法alert(),即显示一个提示信息框,如:

  <body onUnLoad=″alert(‘来也匆匆去也匆匆一路好走!You are always welcome!’)″>

  当然了,在显示欢迎或通知时也可以调用这种方法,只不过作用和效果就比用小窗口差一些了。

  然而,这种以onLoad 或onUnLoad触发的事件处理有一个副作用,就是每当页面刷新时都会触发事件,有时会令人生厌,因此采用时务必小心谨慎,否则会造成画蛇添足而不是画龙点睛的作用。至于别的事件处理器的用法,各位可研究探索,并恰当用在自己的主页上。如果有什么心得和体会,别忘了与大家分享哦!

展开更多 50%)
分享

猜你喜欢

用JavaScript事件在主页上玩花样

Web开发
用JavaScript事件在主页上玩花样

javascript鼠标事件

Web开发
javascript鼠标事件

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

javascript 事件冒泡

Web开发
javascript 事件冒泡

JavaScript事件驱动及事件处理

Web开发
JavaScript事件驱动及事件处理

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

学习JavaScript的事件

Web开发
学习JavaScript的事件

javascript事件模型代码

Web开发
javascript事件模型代码

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

AJAX中JavaScript类的三种成员

AJAX中JavaScript类的三种成员

Windows 8玩转任务管理器

Windows 8玩转任务管理器
下拉加载更多内容 ↓