来自 关于计算机 2019-12-25 12:09 的文章
当前位置: 澳门太阳娱乐手机登录 > 关于计算机 > 正文

Scripting中的图片切换

学学进度中多分析外人的代码完成是个好的习于旧贯,哪怕不是很领悟,跟着多敲一次代码也是很培育认为的业务。上边是实际的成效:

鼠标滑过地点的领航链接时 上边框中图纸举行流畅的切换,左右平移的机能

html构造如下:复制代码 代码如下:

Web Design

These are the things you should know.

  1. Structure
  2. Presentation
  3. Behavior

实乃很简短啊。下边我们直接来看js代码,先交由七个援助函数: addLoadEvent 复制代码 代码如下: function addLoadEvent { var oldonload = window.onload; if(typeof window.onload != "function"卡塔尔 { window.onload = func; } else { window.onload = function; func(卡塔尔(英语:State of Qatar); } } } 这么些函数从名称想到所包蕴的意义便是加载window的onload事件所要管理的情势insertAfter 复制代码 代码如下: function insertAfter(newElement, targetElement卡塔尔 { var parent = targetElement.parentNode; if(parent.lastChild == targetElement卡塔尔国 { parent.appendChild; } 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 return false; var elem = document.getElementById; if { clearTimeout; } if { elem.style.left = "0px"; } if { elem.style.top = "0px"; } var xpos = parseInt; var ypos = parseInt; if(xpos == final_x && ypos == final_y) { return true; } if { var dist = Math.ceil; xpos = xpos + dist; } if { var dist = Math.ceil; xpos = xpos - dist; } if { var dist = Math.ceil; ypos = ypos + dist; } if { var dist = Math.ceil; 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; } 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 return false; var slideshow = document.createElement; /*大器晚成旦在css中安装这几个属性,此处可省 slideshow.style.position = "relative"; slideshow.style.overflow = "hidden"; slideshow.style.width = "100px"; slideshow.style.height = "100px"; */ slideshow.setAttribute; var preview = document.createElement; /*假诺在css中装置,此处可省 preview.style.position = "absolute"; */ preview.setAttribute("src", "slideshow/topics.gif"卡塔尔国; preview.setAttribute("alt", "building blocks of web design"卡塔尔(قطر‎; preview.setAttribute; slideshow.appendChild; var list = document.getElementById; insertAfter; //得到ol中保有的a成分 var links = list.getElementsByTagName; //给每一个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[]中的a成分附加鼠标moveover事件对应的moveElement方法,最后用addLoad伊芙nt就能够了,结合html和功用图看,那一个函数也是很好精通的。 代码打包下载 //www.jb51.net/jiaoben/27501.html

本文由澳门太阳娱乐手机登录发布于关于计算机,转载请注明出处:Scripting中的图片切换

关键词: