JavaScript笔记之处理图像

全部回答

2023-03-28

0 0

    JavaScript最常见也最显著的用途之一是在网页上添加动画，从而在视觉上更具有吸引力。其中有翻转器效果，广告条应用。记录两个实用的示例：（一）在循环广告条中添加链接这样可以让访问者通过点击链接进入与广告相关的站点。
  广告条所需的HTML[html]<-- 在循环广告中添加链接 --><html xmlns="http://www。  w3。org/1999/xhtml"><head><title>Rotating Banner with Links</title><script type="text/javascript" src="script01。
    js"></script></head><body bgcolor="#FFFFFF"><div align="center"><a href="http://www。
  php1。cn/"> </div></body></html>以下的js脚本(script01。  js)演示如何将循环广告条转换为真正的可点击的广告条[javascript]window。
  onload = initBannerLink;var thisAd = 0;function initBannerLink() {if (document。getElementById("adBanner")。
    parentNode。tagName == "A") {document。getElementById("adBanner")。parentNode。onclick = newLocation;}//检查adBanner对象是否包围在链接标签中，如果是这样，那么当点击链接时，将调用newLocation()函数。
    rotate();}function newLocation() {var adURL = new Array("negrino。com""sun。com""microsoft。
  com");document。location。href = "http://www。  " + adURL[thisAd];//将当前文档窗口设置为文本字符串<a href="http://www。
  php1。cn/">http://www">http://www。加上adURL的</a>的值 return false;//告诉浏览器不要再加载这个href，否则会加载URL两次}function rotate() {var adImages = new Array("images/banner1。
    gif""images/banner2。gif""images/banner3。gif");thisAd++;if (thisAd == adImages。length) {thisAd = 0;}document。
  getElementById("adBanner")。  src = adImages[thisAd];setTimeout(rotate, 3 * 1000);}注意:adURL数组中的成员数量必须与adImages数组相同，这个脚本才能正常工作建一个images文件夹，然后存入banner1。
  gif,banner2。  gif,banner3。gif三张gif格式图片(二)随机开始循环显示图像如果有很多图片需要显示，可能不希望在每次加载页面时都从同样的图像开始显示，下面HTML和js组合可以实现随机开始[html]<html xmlns="http://www。
  w3。org/1999/xhtml"><head><title>Rotating Random Banner</title><script type="text/javascript" src="script02。
    js"></script></head><body bgcolor="#FFFFFF"><div align="center"><img src="images/spacer。
  gif" width="400" height="75" id="adBanner" alt="Ad Banner" /></div></body></html>以下js脚本(script02。
    js)可以从一个随机图像开始显示图像[javascript]window。onload = choosePic;var adImages = new Array("images/reading1。
  gif""images/reading2。gif""images/reading3。  gif");var thisAd = 0;function choosePic() {thisAd = Math。
  floor((Math。random() * adImages。length));document。getElementById("adBanner")。  src = adImages[thisAd];rotate();}function rotate() {thisAd++;if (thisAd == adImages。
  length) {thisAd = 0;}document。getElementById("adBanner")。  src = adImages[thisAd];setTimeout(rotate, 3 * 1000);}。

提交

相关回答

没***

2014-04-09

JavaScript中事件处理的过程有哪三个环节.？

  第一阶段:HTML事件处理阶段。就是在元素里面添加onclick之类的属性来调用某个函数。 1 1 function test() {2 alert(0);3 } 这种写法有2个缺点: 1。
  存在时差问题。用户可能在HTML元素已出现在页面上就出发相应的事件,但是如果事件处理程序可能还没有加载过来,就会引发错误。 2。HTML和javascript紧密耦合,如果要更换事件处理程序,则就要同时修改HTML和jiavascript代码,给维护工作带来了很大的麻烦。
   第二阶段:DOM0级事件处理程序阶段 1 1 var btn = document。getElementById("guoBtn");2 btn。onclick = function () {3 alert("你单击了我");4 } 我现在有一个新的需求就是,我不光想要它在这个事件中弹出"你单击了我",我还要它在相同的事件名下,在弹出"其实你只单击了我一次,但是我却弹出2次"的提示。
   1 btn。onclick = function () {2 alert("其实你只单击了我一次,但是我却弹出2次");3 } 这种情况下,它只执行后面一个提示。
  实际上只执行一次click的事件处理程序。这个问题在第三阶段得到了解决。删除事件处理程序: 1 btn。onclick = null; 现在在单击这个按钮后,就不会再有弹出提示了。第三阶段:DOM2级事件处理程序,addEventListener()和removeEventListener(); 1 1 var btn = document。
  getElementById("guo");2 btn。addEventListener("click", function () { alert(this。value); }, false); 第一个参数:事件名第二个参数:事件的处理程序第三个参数:true表示在事件捕获阶段调用时间处理程序;false表示在冒泡阶段调用事件处理程序。
   给同一个时间添加多个时间处理程序,这是事件处理程序的第二阶段所做不到的。 1 btn。addEventListener("click", function () { alert("同一个单击,第二次执行"); }, false); 这样的写法,是没有办法删除掉事件处理程序的,因为调用的匿名函数没有相应的应用(没有一个变量来接受)所以必须得做一些改动 1 var hander = function () {//将处理程序提取出来2 alert("同一个单击,第二次执行");3 }4 btn。
  addEventListener("click", hander, false);5 btn。removeEventListener("click",hander,false); 现在在单击这个按钮的话,就没有了后面的提示了。
  收起

JavaScript笔记之处理图像

全部回答

相关回答

JavaScript中事件处理的过程有哪三个环节.？

类似问题换一批

热点推荐

热度TOP

热点搜索换一换

JavaScript笔记之处理图像

全部回答

相关回答

JavaScript中事件处理的过程有哪三个环节.？

类似问题换一批

热点推荐

热度TOP

热点搜索 换一换

热点搜索换一换