吕梦扬
2014013452
lmy1229@126.com
document.getElementById
,document.getElementsByTagName
和document.getElementsByClassName
即可.但是对于IE 8,不支持document.getElementsByTagName
和document.getElementsByClassName
函数,因此采用Polyfill的方法为旧的浏览器实现这两个函数.document.getElementsByTagName
和document.getElementsByClassName
函数,如果没有,那么就使用document.querySelectorAll
来实现这两个函数..attr
attr
使用JavaScript内置的getAttribute
和setAttribute
实现. 首先判断参数类型, 决定是访问属性还是设置属性.然后分别调用getAttribute
和setAttribute
来实现功能. 在设置属性时,attr
函数将this
返回,于是就可以类似jQuery一样,使用链式调用,如$("...").attr('a1','v1').attr('a2','v2')...
goToTop
函数.该函数每隔10ms计算当前显示的窗口和整个页面的最顶部的距离,然后将窗口向上移动这个距离的0.9倍.如果距离小于1px,则停止计时器.于是,返回顶部就有了逐渐减速的效果.通过捕获document.onkeypress
时间来顶部不显示按钮
在window.onscroll
时间中判断当前显示的窗口和整个页面的最顶部的距离,如果等于0,则将按钮设为display: none
.否则将display
设空.
展示页面
请见backToTop_demo.html
(请创建本地服务器),或访问我的github主页
源代码在backToTop.js
popAlert.init()
,popAlert.show()
和popAlert.close()
.popAlert.init()
函数接受一个object参数param
,其中规定了用户想要的效果. 目前支持包括
在popAlert.init()
首先判断在popAlert
中是否已经创建过一个背景popAlert.shadow
,如果没有创建一个. 然后新创建一个popAlert.box
作为弹窗(由于每次提供的参数可能不同,因此要重新创建), 将传进的param保存进入popAlert.param
.记录当前的弹窗左上角的位置 .
popAlert.show()
将创建好的弹窗和背景阴影显示出来,然后为弹窗的标题div(因为我设计必须拖动弹窗的标题才有效)设置事件监视. 首先设置标题的onmousedown
事件, 在设置这个事件的内部设置document.onmousemove
和document.onmouseup
. 设置document而不是标题div的事件是为了防止鼠标拖动过快出了弹窗的标题范围,导致事件捕获失败. 然后记录原本的document.onkeydown
事件,并将其附一个新的处理函数. 这个函数在closekey对应的键按下后调用popAlert.close()
.
popAlert.close()
首先将popAlert.shadow
和popAlert.box
从body中删除,然后将原本的document.onkeydown
换回去.Animate.move(obj, from, to, duration)
.该函数可以通过使用JavaScript的setInterval
或setTimeout
函数将物体一步一步移动过去.
setInterval
,每隔一段时间将图片通过动画移动一段距离即可mousedown
,mousemove
,mouseup
事件.document.onmousemove
事件来追踪鼠标的位移,将位移加入所有图片中(比如5张),于是所有图片均会有一个位移.