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


Posted in Javascript onJune 12, 2010

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

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

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

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和效果图看,这个函数也是很好理解的。
代码打包下载 https://3water.com/jiaoben/27501.html
Javascript 相关文章推荐
jquery attr 设定src中含有&amp;(宏)符号问题的解决方法
Jul 26 Javascript
分享精心挑选的12款优秀jQuery Ajax分页插件和教程
Aug 09 Javascript
javascript 三种方法实现获得和设置以及移除元素属性
Mar 20 Javascript
地址栏传递中文参数乱码在js里用escape转码
Aug 28 Javascript
JavaScript的jQuery库插件的简要开发指南
Aug 12 Javascript
Angular中$compile源码分析
Jan 28 Javascript
JavaScript 不支持 indexof 该如何解决
Mar 30 Javascript
Ajax高级笔记 JavaScript高级程序设计笔记
Jun 22 Javascript
Javascript 编码约定(编码规范)
Mar 11 Javascript
javascript设计模式 ? 装饰模式原理与应用实例分析
Apr 14 Javascript
js获取图片的base64编码并压缩
Dec 05 Javascript
详解node.js创建一个web服务器(Server)的详细步骤
Jan 15 Javascript
由JavaScript技术实现的web小游戏(不含网游)
Jun 12 #Javascript
ASP.NET中使用后端代码注册脚本 生成JQUERY-EASYUI的界面错位的解决方法
Jun 12 #Javascript
jquery form表单提交插件asp.net后台中文解码
Jun 12 #Javascript
JavaScript中yield实用简洁实现方式
Jun 12 #Javascript
EasySlider 基于jQuery功能强大简单易用的滑动门插件
Jun 11 #Javascript
JavaScript 开发规范要求(图文并茂)
Jun 11 #Javascript
cnblogs TagCloud基于jquery的实现代码
Jun 11 #Javascript
You might like
一个用于MySQL的PHP XML类
2006/10/09 PHP
PHP的面试题集,附我的答案和分析(一)
2006/11/19 PHP
php中变量及部分适用方法
2008/03/27 PHP
PHP数组实例总结与说明
2011/08/23 PHP
PHP基于GD库的图像处理方法小结
2016/09/27 PHP
php array_chunk()函数用法与注意事项
2019/07/12 PHP
浅谈Laravel模板实体转义带来的坑
2019/10/22 PHP
农历与西历对照
2006/09/06 Javascript
JavaScript性能陷阱小结(附实例说明)
2010/12/28 Javascript
in.js 一个轻量级的JavaScript颗粒化模块加载和依赖关系管理解决方案
2011/07/26 Javascript
javascript动态加载二
2012/08/22 Javascript
JQuery+CSS实现图片上放置按钮的方法
2015/05/29 Javascript
javascript去掉代码里面的注释
2015/07/24 Javascript
推荐阅读的js快速判断IE浏览器(兼容IE10与IE11)
2015/12/13 Javascript
JS随机洗牌算法之数组随机排序
2016/03/23 Javascript
JS实现的类似微信聊天效果示例
2019/01/29 Javascript
详解微信小程序scroll-view横向滚动的实践踩坑及隐藏其滚动条的实现
2019/03/14 Javascript
jQuery 筛选器简单操作示例
2019/10/02 jQuery
基于html+css+js实现简易计算器代码实例
2020/02/28 Javascript
Pycharm2017版本设置启动时默认自动打开项目的方法
2018/10/29 Python
python实现抽奖小程序
2020/04/15 Python
PyQt5根据控件Id获取控件对象的方法
2019/06/25 Python
TENSORFLOW变量作用域(VARIABLE SCOPE)
2020/01/10 Python
使用Django xadmin 实现修改时间选择器为不可输入状态
2020/03/30 Python
Python Django form 组件动态从数据库取choices数据实例
2020/05/19 Python
利用HTML5绘制点线面组成的3D图形的示例
2015/05/12 HTML / CSS
苹果台湾官网:Apple台湾
2019/01/05 全球购物
宗教学大学生职业生涯规划范文
2014/02/08 职场文书
毕业论文评语大全
2014/04/29 职场文书
伊索寓言教学反思
2014/05/01 职场文书
花坛标语大全
2014/06/30 职场文书
学生党员检讨书范文
2014/12/27 职场文书
三好学生评语大全
2014/12/29 职场文书
风雨哈佛路观后感
2015/06/03 职场文书
python基础详解之if循环语句
2021/04/24 Python
python神经网络编程之手写数字识别
2021/05/08 Python