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 相关文章推荐
Iframe thickbox2.0使用的方法
Mar 05 Javascript
javascript中全局对象的parseInt()方法使用介绍
Dec 19 Javascript
JS不间断向上滚动效果代码
Dec 25 Javascript
JavaScript操作class和style样式代码详解
Feb 13 Javascript
javascript表单处理具体实现代码(表单、链接、按钮)
May 07 Javascript
JavaScript 函数的定义-调用、注意事项
Apr 16 Javascript
Vue键盘事件用法总结
Apr 18 Javascript
Angular中的interceptors拦截器
Jun 25 Javascript
vue小图标favicon不显示的解决方案
Sep 19 Javascript
angularjs实现天气预报功能
Jun 16 Javascript
VueJs里利用CryptoJs实现加密及解密的方法示例
Apr 29 Javascript
使用Vue CLI创建typescript项目的方法
Aug 09 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中文处理 中文字符串截取(mb_substr)和获取中文字符串字数
2011/11/10 PHP
PHP中基于ts与nts版本- vc6和vc9编译版本的区别详解
2013/04/26 PHP
php下拉选项的批量操作的实现代码
2013/10/14 PHP
thinkphp制作404跳转页的简单实现方法
2016/09/22 PHP
laravel 自定义常量的两种方案
2019/10/14 PHP
使用基于jquery的gamequery插件做JS乒乓球游戏
2011/07/31 Javascript
javascript 进阶篇1 正则表达式,cookie管理,userData
2012/03/14 Javascript
zepto中使用swipe.js制作轮播图附swipeUp,swipeDown不起效果问题
2015/08/27 Javascript
理解JavaScript事件对象
2016/01/25 Javascript
js判断价格,必须为数字且不能为负数的实现方法
2016/10/07 Javascript
js实现符合国情的日期插件详解
2017/01/19 Javascript
微信小程序 开发MAP(地图)实例详解
2017/06/27 Javascript
微信小程序之页面跳转和参数传递的实现
2017/09/29 Javascript
vue异步加载高德地图的实现
2018/06/19 Javascript
Bootstrap标签页(Tab)插件切换echarts不显示问题的解决
2018/07/13 Javascript
cnpm加速Angular项目创建的方法
2018/09/07 Javascript
Flutter 超实用简单菜单弹出框 PopupMenuButton功能
2019/08/06 Javascript
关于vue 结合原生js 解决echarts resize问题
2020/07/26 Javascript
vue-列表下详情的展开与折叠案例
2020/07/28 Javascript
关于Vue中$refs的探索浅析
2020/11/05 Javascript
Python的Django框架中的表单处理示例
2015/07/17 Python
Python使用try except处理程序异常的三种常用方法分析
2018/09/05 Python
Python判断以什么结尾以什么开头的实例
2018/10/27 Python
Python实现的矩阵转置与矩阵相乘运算示例
2019/03/26 Python
Python完成哈夫曼树编码过程及原理详解
2019/07/29 Python
在django中实现页面倒数几秒后自动跳转的例子
2019/08/16 Python
Python %r和%s区别代码实例解析
2020/04/03 Python
python框架flask入门之路由及简单实现方法
2020/06/07 Python
scrapy-redis分布式爬虫的搭建过程(理论篇)
2020/09/29 Python
英国知名化妆品网站:Revolution Beauty(原TAM Beauty)
2018/02/28 全球购物
便利店投资的创业计划书
2014/01/12 职场文书
公司副总经理任命书
2014/06/05 职场文书
医学专业大学生求职信
2014/07/12 职场文书
群众路线查摆问题及整改措施
2014/10/10 职场文书
2015年社区中秋节活动总结
2015/03/23 职场文书
工作时间证明
2015/06/15 职场文书