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实现的浮动层框架用法实例分析
Oct 10 Javascript
js判断空对象的实例(超简单)
Jul 26 Javascript
javascript验证手机号和实现星号(*)代替实例
Aug 16 Javascript
JS实现旋转木马式图片轮播效果
Jan 18 Javascript
Bootstrap中glyphicons-halflings-regular.woff字体报404错notfound的解决方法
Jan 19 Javascript
JS模拟实现ECMAScript5新增的数组方法
Mar 20 Javascript
JavaScript html5 canvas实现图片上画超链接
Oct 20 Javascript
ionic2中使用自动生成器的方法
Mar 04 Javascript
webpack打包js的方法
Mar 12 Javascript
利用npm 安装删除模块的方法
May 15 Javascript
微信小程序HTTP请求从0到1封装
Sep 09 Javascript
swiper实现导航滚动效果
Dec 13 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中MD5函数使用实例代码
2008/06/07 PHP
PHP 命令行参数详解及应用
2011/05/18 PHP
php输入流php://input使用浅析
2014/09/02 PHP
laravel解决迁移文件一次删除创建字段报错的问题
2019/10/24 PHP
利用js判断浏览器类型(是否为IE,Firefox,Opera浏览器)
2013/11/22 Javascript
jquery表单验证框架提供的身份证验证方法(示例代码)
2013/12/27 Javascript
js限制文本框只能输入数字方法小结
2014/06/16 Javascript
VS2008中使用JavaScript调用WebServices
2014/12/18 Javascript
AngularJS Bootstrap详细介绍及实例代码
2016/07/28 Javascript
浅谈js内置对象Math的属性和方法(推荐)
2016/09/19 Javascript
JavaScript优化以及前段开发小技巧
2017/02/02 Javascript
seajs模块压缩问题与解决方法实例分析
2017/10/10 Javascript
switchery按钮的使用方法
2017/12/18 Javascript
让webpack+vue-cil项目不再自动打开浏览器的方法
2018/09/27 Javascript
前端Electron新手入门教程详解
2019/06/21 Javascript
9种方法优化jQuery代码详解
2020/02/04 jQuery
[02:30]DOTA2英雄基础教程 暗影恶魔
2013/12/17 DOTA
[02:47]3.19DOTA2发布会 国服成长历程回顾
2014/03/25 DOTA
[01:08]DOTA2次级职业联赛 - Wings 战队宣传片
2014/12/01 DOTA
[02:28]DOTA2 2015国际邀请赛中国区预选赛首日现场百态
2015/05/26 DOTA
Python挑选文件夹里宽大于300图片的方法
2015/03/05 Python
在Pycharm中使用GitHub的方法步骤
2019/06/13 Python
python中pip的使用和修改下载源的方法
2019/07/08 Python
python基于socket实现的UDP及TCP通讯功能示例
2019/11/01 Python
python3 字符串知识点学习笔记
2020/02/08 Python
Talbots官网:美国成熟女装品牌
2019/11/15 全球购物
Tessabit日本:集世界奢侈品和设计师品牌的意大利精品买手店
2020/01/07 全球购物
施华洛世奇新加坡官网:SWAROVSKI新加坡
2020/10/06 全球购物
高中毕业自我鉴定
2013/12/22 职场文书
中文专业学生自我评价范文
2014/02/06 职场文书
励志演讲稿500字
2014/08/21 职场文书
机关班子查摆问题及整改措施
2014/10/28 职场文书
婚前保证书范文
2015/02/28 职场文书
小王子读书笔记
2015/06/29 职场文书
2016年寒假见闻
2015/10/10 职场文书
Python 中的单分派泛函数你真的了解吗
2021/06/22 Python