PHP知识、源码、教程、框架、程序分享! -- PHP社区 关于我们 联系我们 联系电话 联系QQ

实例:WYSIWYG JavaScript 翻转图

发表时间:2013-08-28 点击:

[本文摘要]:实例:WYSIWYG JavaScript 翻转图 在深入讨论在学习的 JavaScript 对象模型和的DOM之前,我们先来看一个实际的例子,通过这个例子你将切实体会到遵循本章介绍的最佳实践和忠告,会节省很...

实例:WYSIWYG JavaScript 翻转图

在深入讨论在学习的JavaScript对象模型和的DOM之前,我们先来看一个实际的例子,通过这个例子你将切实体会到遵循本章介绍的最佳实践和忠告,会节省很多项目开发时间。

在你们给我大发邮件抱怨下面JavaScript翻转图的例子应该使用CSS实现(这一点我完全赞同)之前,我要解释一下。之所以选择这个例子,是因为大多数(差不多是全部)Web开发者对它都很熟悉,而且这个例子也非常适合说明本章的诸多要点。

除非这是你第一次尝试进行Web设计和开发,否则你很可能对在WYSIWYG编辑器中使用JavaScript实现多状态按钮时,必需而又混乱的鼠标事件比较熟悉。一般来说,WYSIWYG都会生成如下所示的代码:

	<a href="http://phpapache.com"
	    onmouseover="swapImage(...)"
	    onmouseout="swapImage(...)"
	    onmousedown="swapImage(...)"
	    onmouseup="swapImage(...)">
	<img src="images/button.gif" width="10" height="40" border="0" alt="Click Me!"></a>

问题是这样一来在一个包含许多锚的大型文档中,标记中的主要部分都将是嵌入的JavaScript代码,并且最终使得结构化标记被"淹没"在嵌入式的代码中。

作为一个例子,可以看一下图1-8所示的页面。

图1-8 带两个翻转按钮的简单网页
图1-8 带两个翻转按钮的简单网页

如果使用Adobe ImageReady生成图1-8所示的页面,那么页面中可能会包含如下标记和代码:

	<html>
	<head>
	<title>ImageReady Example</title>
	  <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
	  <script type="text/javascript">
	  <!--
	  function newImage(arg) {
	    if (document.images) {
	      rslt = new Image();
	      rslt.src = arg;
	      return rslt;
	    }
	  }
	  function changeImages() {
	    if (document.images && (preloadFlag == true)) {
	      for (var i=0; i<changeImages.arguments.length; i+=2) {
	        document[changeImages.arguments[i]].src =
	          changeImages.arguments[i+1];
	      }
	    }
	  }
	  var preloadFlag = false;
	  function preloadImages() {
	    if (document.images) {
	      button1_over = newImage("images/button1-over.png");
	      button1_down = newImage("images/button1-down.png");
	button2_over = newImage("images/button2-over.png");
	    button2_down = newImage("images/button2-down.png");
	    preloadFlag = true;
	  }
	}
	// -->
	</script>
	</head>
	<body onload="preloadImages();">
	<h1>Multi State Anchor Example</h1>
	  <div>
	  <a href="http://advanceddomscripting.com"
	    onmouseover="changeImages('button1',
	'images/button1-over.png'); return true;"
	    onmouseout="changeImages('button1',
	'images/button1.png'); return true;"
	    onmousedown="changeImages('button1',
	'images/button1-down.png'); return true;"
	    onmouseup="changeImages('button1',
	'images/button1-over.png'); return true;">
	    <img name="button1" src="images/button1.png"
	      width="113" height="67" alt="button1"></a>
	  <a href="http://advanceddomscripting.com"
	    onmouseover="changeImages('button2',
	'images/button2-over.png'); return true;"
	    onmouseout="changeImages('button2',
	'images/button2.png'); return true;"
	    onmousedown="changeImages('button2',
	'images/button2-down.png'); return true;"
	    onmouseup="changeImages('button2',
	'images/button2-over.png'); return true;">
	    <img name="button2" src="images/button2.png"
	width="113" height="67" alt="button2"></a>
	  </div>
	</body>
	</html>

类似地,使用Adobe(原Macromedia)Dreamweaver将生成如下代码:

	<html>
	<head>
	<title>Dreamweaver Example</title>
	  <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
	  <script type="text/JavaScript">
	  <!--
	  function MM_preloadImages() { //v3.0
	    var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
	    var i,j=d.MM_p.length,a=MM_preloadImages.arguments;
	    for(i=0; i<a.length; i++)
	    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image;
	    d.MM_p[j++].src=a[i];}}
	  }
	    anchorImage.src = imageMouseOver.src;
	  });
	  //  当鼠标移出时将图像变换为原始文件
	  ADS.addEvent(anchor, 'mouseout', function (W3CEvent) {
	    anchorImage.src = path + extension;
	  });
	  //  载入鼠标按下时的图像
	  var imageMouseDown = new Image()
	  imageMouseDown.src = path + '-down' + extension;
	  //  当鼠标按下时将图像变换为按下状态的源文件
	  ADS.addEvent(anchor, 'mousedown', function (W3CEvent) {
	    anchorImage.src = imageMouseDown.src;
	  });
	  //  当鼠标放开时将图像变换为原始文件
	  ADS.addEvent(anchor, 'mouseup', function (W3CEvent) {
	    anchorImage.src = path + extension;
	  });
	}
	function initMultiStateAnchors(W3CEvent) {
	  //  查找页面中所有的锚
	  var anchors = ADS.getElementsByClassName('multiStateAnchor', 'a', document);
	  //  循环遍历列表中的所有锚元素
	  for (var i=0; i<anchors.length ; i++) {
	    //  找到锚中的第一个子图像元素
	    var anchorImage = anchors[i].getElementsByTagName('img')[0];
	    if(anchorImage) {
	      //  如果存在图像元素,解析其源路径
	      var extensionIndex = anchorImage.src.lastIndexOf('.');
	      var path= anchorImage.src.substr(0, extensionIndex);
	      var extension= anchorImage.src.substring(
	        extensionIndex,
	        anchorImage.src.length
	      );
	      //  添加各种鼠标处理程序
	      //  同时预先加载图像
	      registerMultiStateAnchorListeners(
	        anchors[i],
	        anchorImage,
	        path,
	        extension
	      );
	    }
	  }
	}
	//  当文档载入完成时修改具有特定标记的锚
	ADS.addEvent(window,'load',initMultiStateAnchors);

自下而上地分析前面的代码,可以看出该文件所做的几件事。首先,脚本使用initMulti-StateAnchors()函数和本章前面讨论的ADS.addEvent()函数注册了window的load事件侦听器:

	ADS.addEvent(window,'load',initMultiStateAnchors);

其中的initMultiStateAnchors()函数负责查找带有multiStateAnchor类的所有链接,然后在每个链接上注册相应的鼠标事件侦听器。为此,initMultiStateAnchors()函数使用本站前面讨论的ADS.getElementsByClassName()函数,相对于文档取得了<a>标签的class属性中带有multiStateAnchor类名的所有锚元素的列表:

	var anchors = ADS.getElementsByClassName('multiStateAnchor', 'a', document);

然后,循环遍历这个列表并解析每个锚元素中的第一个<img>标签的src属性就很简单了:

	  //  循环遍历列表中的所有锚元素
	  for (var i=0; i<anchors.length ; i++) {
	    //  找到锚中的第一个子图像元素
	    var anchorImage = anchors[i].getElementsByTagName('img')[0];
	    if(anchorImage) {
	      //  如果存在图像元素,解析其源路径
	      var extensionIndex = anchorImage.src.lastIndexOf('.');
	      var path= anchorImage.src.substr(0, extensionIndex);
	      var extension= anchorImage.src.substring(
	        extensionIndex,
	        anchorImage.src.length
	      );
	      //  添加各种鼠标处理程序并预先加载图像
	      registerMultiStateAnchorListeners(
	        anchors[i],
	        anchorImage,
	        path,
	        extension
	      );
	    }
	  }

这里,我们使用了由ADS.getElementsByTagName('img')返回的数组中的第一个元素,该元素引用的是包含在相应锚元素中的图像元素。当然 ,可以通过对以上源文件进行简单的修改来影响包含在锚元素中的多个图像元素,或者其他关联的标签组——这就取决于你的需要了。

最后,预先加载了mousedown和mouseover状态的图像,而且使用"第三方"函数register-MultiStateAnchorListeners()为每个锚注册了事件侦听器,并维护了每个锚的适当的作用域和值:

	  function registerMultiStateAnchorListeners
	  (anchor,anchorImage,path,extension) {
	    var imageMouseOver = new Image()
	    imageMouseOver.src = path + '-over' + extension;
	    ADS.addEvent(anchor, 'mouseover', function (W3CEvent) {
	      anchorImage.src = imageMouseOver.src;
	    });
	    省略的代码
	  }

运行以上组合的脚本也会得到与WYSIWYG编辑器生成的脚本相同的行为,但只要能够遵守我们在开始时设置的命名约定,那么通过手工编码的方案就会更容易维护,而且百分之百可以重用。

假如你想添加更多带有翻转效果的链接,只要像往常一样添加带有适当类的链接,并确保你的图像在服务器上可用就行了。

版权声明:本文系技术人员研究整理的智慧结晶,转载勿用于商业用途,并保留本文链接,侵权必究!

本文链接:http://php.aixc.cn/web/js/56.html

声明:本站技术及源码均为原创,转载请勿用于商业用途,并注明出处及原文链接,侵权必究。