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 相关文章推荐
JavaScript中“+=”的应用
Feb 02 Javascript
jquery获取URL中参数解决中文乱码问题的两种方法
Dec 18 Javascript
基于jQuery的JavaScript模版引擎JsRender使用指南
Dec 29 Javascript
微信小程序 input输入框控件详解及实例(多种示例)
Dec 14 Javascript
jQuery实现最简单实用的分秒倒计时
Feb 05 Javascript
js css3实现图片拖拽效果
Mar 04 Javascript
基于vue2的table分页组件实现方法
Mar 20 Javascript
详解Vue2.0之去掉组件click事件的native修饰
Apr 20 Javascript
深入浅析javascript继承体系
Oct 23 Javascript
vue实现登录后页面跳转到之前页面
Jan 07 Javascript
vue的style绑定background-image的方式和其他变量数据的区别详解
Sep 03 Javascript
js实现页面导航层级指示效果
Aug 25 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
PHP 5.0对象模型深度探索之绑定
2006/09/05 PHP
基于PHP Socket配置以及实例的详细介绍
2013/06/13 PHP
ThinkPHP中I(),U(),$this-&gt;post()等函数用法
2014/11/22 PHP
php如何执行非缓冲查询API
2016/07/22 PHP
淘宝搜索框效果实现分析
2011/03/05 Javascript
js中的onchange和onpropertychange (onchange无效的解决方法)
2014/03/08 Javascript
JavaScript实现数字数组按照倒序排列的方法
2015/04/06 Javascript
coffeescript使用的方式汇总
2015/08/05 Javascript
javascript瀑布流式图片懒加载实例
2020/06/28 Javascript
JQuery日期插件datepicker的使用方法
2016/03/03 Javascript
Js操作DOM元素及获取浏览器高宽的简单方法
2016/09/08 Javascript
vue多级多选菜单组件开发
2020/09/08 Javascript
Bootstrap3 datetimepicker控件使用实例
2016/12/13 Javascript
微信小程序 Canvas增强组件实例详解及源码分享
2017/01/04 Javascript
js制作可以延时消失的菜单
2017/01/13 Javascript
HTML的select控件美化
2017/03/27 Javascript
vue 项目常用加载器及配置详解
2018/01/22 Javascript
解决Vue中mounted钩子函数获取节点高度出错问题
2018/05/18 Javascript
Vue实现商品分类菜单数量提示功能
2019/07/26 Javascript
layui+jquery支持IE8的表格分页方法
2019/09/28 jQuery
[48:05]2018DOTA2亚洲邀请赛 3.31 小组赛 B组 VGJ.T vs VP
2018/03/31 DOTA
python定时器(Timer)用法简单实例
2015/06/04 Python
python中子类继承父类的__init__方法实例
2016/12/15 Python
python定时关机小脚本
2018/06/20 Python
Python中logging实例讲解
2019/01/17 Python
python实现大文本文件分割
2019/07/22 Python
英国第一的市场和亚马逊替代品:OnBuy
2019/03/16 全球购物
类如何去实现接口
2013/12/19 面试题
自考自我鉴定范文
2013/10/30 职场文书
毕业生自我推荐
2013/11/04 职场文书
幼儿园教研活动总结
2014/04/30 职场文书
小学竞选班长演讲稿
2014/09/09 职场文书
六一儿童节标语
2014/10/08 职场文书
2014年图书馆工作总结
2014/11/25 职场文书
六一儿童节主持开场白
2015/05/28 职场文书
防止web项目中的SQL注入
2021/12/06 MySQL