DOM Scripting中的图片切换[兼容Firefox]
DOM Scripting中的图片切换[兼容Firefox]
发布时间:2016-12-30 来源:查字典编辑
摘要:学习过程中多分析别人的代码实现是个好的习惯,哪怕不是很明白,跟着多敲几遍代码也是很培养感觉的事情。下面是实际的效果(一般我只在firefox...

学习过程中多分析别人的代码实现是个好的习惯,哪怕不是很明白,跟着多敲几遍代码也是很培养感觉的事情。下面是实际的效果(一般我只在firefox中测试):

DOM Scripting中的图片切换[兼容Firefox]1

鼠标滑过上面的导航链接时 下面框中图片进行流畅的切换,左右移动的效果

html结构如下:

复制代码 代码如下:

<body>

<h1>Web Design</h1>

<p>These are the things you should know.</p>

<ol id="linklist">

<li>

<a href="structure.html">Structure</a>

</li>

<li>

<a href="presentation.html">Presentation</a>

</li>

<li>

<a href="behavior.html">Behavior</a>

</li>

</ol>

</body>

实在是很简单啊。下面我们直接来看js代码,先给出两个辅助函数:

addLoadEvent

复制代码 代码如下:

function addLoadEvent(func) {

var oldonload = window.onload;

if(typeof window.onload != "function") {

window.onload = func;

} else {

window.onload = function() {

oldonload();

func();

}

}

}

这个函数顾名思义就是加载window的onload事件所要处理的方法

insertAfter

复制代码 代码如下:

function insertAfter(newElement, targetElement) {

var parent = targetElement.parentNode;

if(parent.lastChild == targetElement) {

parent.appendChild(newElement);

} else {

parent.insertBefore(newElement, targetElement.nextSibling);

}

}

在DOM API中有个insertBefore但是没有insertAfter,所以这里自定义一个insertAfter方法,只要清楚appendChild和insertBefore这个函数很好理解,把newElement插入到targetElement之前。

接下来moveElement函数很核心:

moveElement

复制代码 代码如下:

function moveElement(elementID, final_x, final_y, interval) {

if(!document.getElementById) return false;

if(!document.getElementById(elementID)) return false;

var elem = document.getElementById(elementID);

if(elem.movement) {

clearTimeout(elem.movement);

}

if(!elem.style.left) {

elem.style.left = "0px";

}

if(!elem.style.top) {

elem.style.top = "0px";

}

var xpos = parseInt(elem.style.left);

var ypos = parseInt(elem.style.top);

if(xpos == final_x && ypos == final_y) {

return true;

}

if(xpos < final_x) {

var dist = Math.ceil((final_x - xpos)/10);

xpos = xpos + dist;

}

if(xpos > final_x) {

var dist = Math.ceil((xpos - final_x)/10);

xpos = xpos - dist;

}

if(ypos < final_y) {

var dist = Math.ceil((final_y - ypos)/10);

ypos = ypos + dist;

}

if(ypos > final_y) {

var dist = Math.ceil((ypos - final_y)/10);

ypos = ypos - dist;

}

elem.style.left = xpos + "px";

elem.style.top = ypos + "px";

var repeat = "moveElement('" + elementID + "'," + final_x + "," + final_y + "," + interval + ")";

elem.movement = setTimeout(repeat, interval);

}

final_x, final_y 分别为元素移动终止的left和top值,所以被移动元素要设置position属性("relative"或是"position"),这样它的left,top属性才会起作用,这个函数也不难,就是取得元素当前的left和top值然后和final_x,final_y做比较,接着对其left和top按照一定的步长改变,每次的步长就是每个if中的dist变量,因为每次dist都会根据被移动元素的最新left,top计算,所以有一种先加速后减速的移动效果,参数interval,和setTimeout配合让moveElement自我调用,直到元素移动到final_x和final_y.

接着是pepareSlideshow函数,动态的创建所需的dom元素:

prepareSlideshow

复制代码 代码如下:

function prepareSlideshow() {

//确保浏览器能理解DOM API

if(!document.getElementsByTagName) return false;

if(!document.getElementById) return false;

//确保该元素已存在

if(!document.getElementById("linklist")) return false;

var slideshow = document.createElement("div");

/*如果在css中设置这些属性,此处可省

slideshow.style.position = "relative";

slideshow.style.overflow = "hidden";

slideshow.style.width = "100px";

slideshow.style.height = "100px";

*/

slideshow.setAttribute("id", "slideshow");

var preview = document.createElement("img");

/*如果在css中设置,此处可省

preview.style.position = "absolute";

*/

preview.setAttribute("src", "slideshow/topics.gif");

preview.setAttribute("alt", "building blocks of web design");

preview.setAttribute("id", "preview");

slideshow.appendChild(preview);

var list = document.getElementById("linklist");

insertAfter(slideshow, list);

//获得ol中所有的a元素

var links = list.getElementsByTagName("a");

//给每个a的mouseover事件附加上moveElement方法

links[0].onmouseover = function() {

moveElement("preview",-100, 0, 10);

}

links[1].onmouseover = function() {

moveElement("preview",-200, 0, 10);

}

links[2].onmouseover = function() {

moveElement("preview",-300, 0, 10);

}

}

这里也就涉及到一些元素的创建,元素属性的设置等基本的DOM API运用,然后给ol[id="linklist"]中的a元素附加鼠标moveover事件对应的moveElement方法,最后用addLoadEvent(prepareSlideshow)就行了,结合html和效果图看,这个函数也是很好理解的。

代码打包下载 http://www.jb51.net/jiaoben/27501.html

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新Javascript教程学习
热门Javascript教程学习
编程开发子分类