跪求JS动态改变层的style.left属性使其水平移动的例子

JavaScript014

跪求JS动态改变层的style.left属性使其水平移动的例子,第1张

层滑动出来,的效果

把层对象传到这几个函数调用就行

function initMoveDiv( style ) {

block1 = style

block1.x = block1.top

block1.left = -500

}

function OpenMoveDiv() {

//alert(block1.x)

if (block1.x <5) {

block1.x += 10

block1.right = block1.x

setTimeout("OpenMoveDiv", 2)

}

}

function CloseMoveDiv() {

//block1.x = -200

//block1.left = block1.x

if (block1.x >-200) {

block1.x -= 10

block1.top = block1.x

setTimeout("CloseMoveDiv()", 2)

}

}

或这个 ,也是类似的效果 ,还有点注释

//记录最后一个打开的DIV

var oldDiv = ""

/*显示DIV*/

function showDIV(obj)

{

var myDIV = document.getElementById(obj)

//alert(obj)

//如果有打开的,先关闭老的DIV

if(oldDiv != "")

{

closeDiv(oldDiv)

}

oldDiv = obj//记录当前打开的DIV

/*获取当前鼠标左键按下后的位置,据此定义DIV显示的位置*/

var leftedge= document.body.clientWidth-event.clientX

var bottomedge = document.body.clientHeight-event.clientY

/*如果从鼠标位置到窗口右边的空间小于DIV的宽度,就定位DIV的左坐标(Left)为当前鼠标位置向左一个DIV宽度*/

if (leftedge <myDIV.offsetWidth)

{

myDIV.style.left = document.body.scrollLeft + event.clientX - myDIV.offsetWidth

}

else

{

/*否则,就定位DIV的左坐标为当前鼠标位置*/

myDIV.style.left = document.body.scrollLeft + event.clientX

}

/*如果从鼠标位置到窗口下边的空间小于DIV的高度,就定位DIV的上坐标(Top)为当前鼠标位置向上一个DIV高度*/

if (bottomedge <myDIV.offsetHeight)

{

myDIV.style.top = document.body.scrollTop + event.clientY - myDIV.offsetHeight

}

else

{

/*否则,就定位DIV的上坐标为当前鼠标位置*/

myDIV.style.top = document.body.scrollTop + event.clientY

}

/*设置DIV可见*/

myDIV.style.display = "block"

}

function closeDiv(obj)

{

var o = document.getElementById(obj).style.display='none'

//清空当前打开的DIV

oldDiv = ""

}

function SubstringDemo(){

var ss// 声明变量。

var s = "The rain in Spain falls mainly in the plain.."

ss = s.substring(12, 17) // 取子字符串。

return(ss)// 返回子字符串。

}