王雨的JavaScript练习06---js实现动画效果(2)
鼠标移动到链接上,触发onmouseover事件,然后通过函数实现下面的图片轮播。这个demo实现了行为层,表示层,结构层完全分离。
html:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <! DOCTYPE html> < html lang="en"> < head > < meta charset="UTF-8"> < title >Title</ title > < link type="text/css" rel="stylesheet" media="screen" href="css/layout.css" /> </ 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 > < script src="js/addLoadEvent.js"></ script > < script src="js/moveElement.js"></ script > < script src="js/prepareSlideshow.js"></ script > < script src="js/insertAfter.js"></ script > </ body > </ html > |
css:
1 2 3 4 5 6 7 8 9 | #slideshow{ width : 200px ; height : 200px ; position : relative ; overflow : hidden ; } #preview{ position : absolute ; } |
js:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 | function addLoadEvent(func) { var oldonload = window.onload; if ( typeof window.onload != 'function' ) { window.onload = func; } else { window.onload = function () { oldonload(); func(); } } } function insertAfter(newElement,targetElement) { var parent = targetElement.parentNode; if (parent.lastChild == targetElement){ parent.appendChild(newElement); } else { parent.insertBefore(newElement,targetElement.nextSibling); } } function moveElement(elementID,final_x,final_y,interval) { //检查浏览器支持情况 if (!document.getElementById) return false ; if (!document.getElementById(elementID)) return false ; //取得元素ID值并赋值给elem var elem = document.getElementById(elementID); //清除movement已经有的属性,使其复位 if (elem.movement){ clearTimeout(elem.movement); } //检测元素是否有left top值,如果没有添加0px if (!elem.style.left){ elem.style.left = "0px" ; } if (!elem.style.top){ elem.style.top = "0px" ; } //通过parseInt函数把style值转换成number类型 var xpos = parseInt(elem.style.left); var ypos = parseInt(elem.style.top); var dist = 0; //判断xpos ypos是否和最终坐标相等 if (xpos == final_x && ypos == final_y){ return true ; } //不相等时候,xpos ypos进行相应的变化 //每次移动起点与终点距离的十分之一,math.celi函数返回一个不小于dist的整数 //例:math.ceil(0.7)=1,math.ceil(0.1)=1 if (xpos < final_x){ dist = Math.ceil((final_x - xpos)/10); 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; } //把xpos ypos赋值给elem的style.left .right,然后再加上px elem.style.left = xpos + "px" ; elem.style.top = ypos + "px" ; //通过自调用实现重复执行 var repeat = "moveElement('" +elementID+ "'," +final_x+ "," +final_y+ "," +interval+ ")" //movement是elem一个属性 elem.movement = setTimeout(repeat,interval); } function prepareSlideshow() { //检查浏览器支持情况,文档里面是否有ID为linklist的元素 if (!document.getElementsByTagName) return false ; if (!document.getElementById) return false ; if (!document.getElementById( "linklist" )) return false ; //创建一个div,并设置id属性 var slideshow = document.createElement( "div" ); slideshow.setAttribute( "id" , "slideshow" ); //创建一个img,并设置src alt id属性 var preview = document.createElement( "img" ); preview.setAttribute( "src" , "img/toppics.png" ); preview.setAttribute( "alt" , "xxxxxxx" ); preview.setAttribute( "id" , "preview" ); //把img添加到div里面 slideshow.appendChild(preview); var list = document.getElementById( "linklist" ); //把div添加到文档list后面 insertAfter(slideshow,list); var links = list.getElementsByTagName( "a" ); //给a标签添加鼠标事件,事件调用moveelement函数完成图片移动 links[0].onmouseover = function () { moveElement( "preview" ,-200,0,10); } links[1].onmouseover = function () { moveElement( "preview" ,-400,0,10); } links[2].onmouseover = function () { moveElement( "preview" ,-600,0,10); } } addLoadEvent(prepareSlideshow); |
如果你可以成为海盗,为什么要加入海军呢?
分类:
javascript
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 开发中对象命名的一点思考
· .NET Core内存结构体系(Windows环境)底层原理浅谈
· C# 深度学习:对抗生成网络(GAN)训练头像生成模型
· .NET 适配 HarmonyOS 进展
· .NET 进程 stackoverflow异常后,还可以接收 TCP 连接请求吗?
· 本地部署 DeepSeek:小白也能轻松搞定!
· 基于DeepSeek R1 满血版大模型的个人知识库,回答都源自对你专属文件的深度学习。
· 在缓慢中沉淀,在挑战中重生!2024个人总结!
· 大人,时代变了! 赶快把自有业务的本地AI“模型”训练起来!
· Tinyfox 简易教程-1:Hello World!
2016-05-16 JAVA第六次作业