跪求JS动态改变层的style.left属性使其水平移动的例子
3个回答
展开全部
层滑动出来,的效果
把层对象传到这几个函数调用就行
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 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 = "";
}
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
看了下，前面2个都不是你要的，现写给你的，可以跑
<body>
<div id="moveDiv" style="width:100px;height:100px;border:1px solid black;left:600px;position:absolute"></div>
<script type="text/javascript">
function doMove() {
var _div=document.getElementById("moveDiv");
var _curLeft=parseInt(_div.style.left);
var _distance=5;
if (_curLeft-_distance>0) {
_div.style.left=(_curLeft-_distance)+"px";
window.setTimeout("doMove()",50);
}
}
doMove();
</script>
</body>
<body>
<div id="moveDiv" style="width:100px;height:100px;border:1px solid black;left:600px;position:absolute"></div>
<script type="text/javascript">
function doMove() {
var _div=document.getElementById("moveDiv");
var _curLeft=parseInt(_div.style.left);
var _distance=5;
if (_curLeft-_distance>0) {
_div.style.left=(_curLeft-_distance)+"px";
window.setTimeout("doMove()",50);
}
}
doMove();
</script>
</body>
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<script language="javascript">
function test()
{
var aaa=document.getElementById("aaa")
a=eval(20)
aaa.scrollLeft+=a
}
</script>
<input type="button" value="点下" onclick="test()">
<div id="aaa" style="background-color:#ff6644; position:absolute; left:170px; top:100px;width:300;height:300;overflow:scroll"
onclick="alert('offsetLeft:'+this.offsetLeft)">
<div style="height:600;width:600" onclick="alert('offsetLeft:'+this.offsetLeft)"></div>
</div>
看这样的例子能帮到你不,剩下的自己研究了
function test()
{
var aaa=document.getElementById("aaa")
a=eval(20)
aaa.scrollLeft+=a
}
</script>
<input type="button" value="点下" onclick="test()">
<div id="aaa" style="background-color:#ff6644; position:absolute; left:170px; top:100px;width:300;height:300;overflow:scroll"
onclick="alert('offsetLeft:'+this.offsetLeft)">
<div style="height:600;width:600" onclick="alert('offsetLeft:'+this.offsetLeft)"></div>
</div>
看这样的例子能帮到你不,剩下的自己研究了
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（1）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
