js鼠标悬浮动画:由一个位置移动到另外一个位置,速度由快变慢[修正版2]
2016-05-27 21:36
519 查看
#slideshow{width:100px;height:100px;position:relative; overflow:hidden;}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Web Design</title> <script src="addLoadEvent.js"></script> <link rel="stylesheet" type="text/css" href="10.2.css" > <script src="10.2.js"></script> </head> <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> <div id="slideshow"> <img src="topics.gif" alt="building bolcks of web design" id="preview" /> </div> </body> </html>
function addLoadEvent(func){ //不管在页面加载完毕执行多少个函数,都应付自如 var oldonload = window.onload; if(typeof window.onload != 'function'){ window.onload = func; }else{ window.onload = function(){ oldonload(); func(); } } } //加快速度,距离越远,速度越快,距离越近,速度越慢 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); //进行复位 } var xpos = parseInt(elem.style.left); //parseInt(string)把字符串里面的数值信息提取出来,因为后面要进行很多算术比较操作。 var ypos = parseInt(elem.style.top); //parseFloat(string)可以把带小数的数值(也就是浮点数)提取出来。 var dist = 0; if(xpos == final_x && ypos == final_y){ return true; } if(xpos < final_x){ dist = Math.ceil(( final_x - xpos)/10); //Math.ceil是向上取整函数,它返回的是大于或等于函数参数,并且与之最接近的整数,防止移动距离小于1像素. xpos = xpos + dist; } if(xpos > final_x){ dist = Math.ceil(( xpos - final_x)/10); xpos = xpos - dist; } if(ypos < final_y){ dist = Math.ceil(( final_y - ypos)/10); ypos = ypos + dist; } if(ypos > final_y){ dist = Math.ceil(( ypos - final_y)/10); ypos = ypos - dist; } elem.style.left = xpos + "px"; elem.style.top = ypos + "px"; //var repeat = function() {moveElement(elementID, final_x,final_y,interval)} var repeat = "moveElement('" + elementID + "'," + final_x + "," + final_y + "," + interval + ")"; elem.movement = setTimeout(repeat,interval); //为元素创建属性movement,element.property = value; } function prepareSlideshow(){ //确保浏览器支持DOM方法。 if(!document.getElementsByTagName) return false; if(!document.getElementById) return false; //确保元素存在。 if(!document.getElementById("linklist")) return false; if(!document.getElementById("preview")) return false; //为图片应用样式。 var preview = document.getElementById("preview"); preview.style.position = "absolute"; preview.style.left = "0px"; preview.style.top = "0px"; //取得列表中所有链接。 var list = document.getElementById("linklist"); var links = list.getElementsByTagName("a"); //为mouseover事件添加动画效果。 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); } } addLoadEvent(prepareSlideshow);图片素材:
浏览器效果:
相关文章推荐
- JavaScript笔记(4)作用域与作用域链
- 12个JavaScript技巧【转】
- Extjs gridPanel 小计保存不上
- ajax和js验证用户登录
- 数字时钟的实现
- JavaScript五子棋
- Ajax结合json在web中的应用
- 不可多得的Javascript(AJAX)开发工具 - Aptana
- js和html的结合方式及js的变量声明和数据类型
- 用Aptana调试JavaScript教程
- JavaScript中关于this关键字的详解
- js验证数字
- Javascript中的字符串连接
- 2016年5月27日下午(妙味课堂js基础-3笔记三(事件))
- net.sf.json.JSONException: Found starting '{' but missing '}' at the end. at character 0 of null
- JS判断浏览器
- 修改jsonb的属性
- js动画 从一个位置渐渐移动到另外一个位置 通用
- 根据对象的某一属性进行排序的js代码(如:name,age)
- Jsp之一 WEB应用程序概述