js移动div怎么做出滑动的效果？

就是说在一定时间内从左到右，而不是瞬间移动，使用setTimeOut()吗？相关代码如下，setTimeOut()怎么用啊？</head><body><div><divi... 就是说在一定时间内从左到右，而不是瞬间移动，使用setTimeOut()吗？
相关代码如下，setTimeOut()怎么用啊？
</head>

<body>
<div>
<div id="div1">
div1
</div>

<div id="div2">
div2
</div>
</div>

</body>

<script>
var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
div2.onmouseover = setTimeOut("div1.style.left = \"50px\"",100);
div2.onmouseout = setTimeOut("div1.style.left = \"0px\";",100);
</script>

</html> 展开

 我来答

3个回答

#热议# 发烧为什么不能用酒精擦身体来退烧？

板华二船TKP
推荐于2016-05-07 · TA获得超过5万个赞

知道大有可为答主

回答量：8026

采纳率：56%

帮助的人：591万

我也去答题访问个人页

关注

展开全部

1：使用js的插件目前主流的js库比如jq 也有手势的插件，
2：还有移动端的zepto库也有手势插件，
3：另外还有个叫QuoJS的手势插件这个插件不依赖任何的库，
4：早期的应该是用wml语言支持的WMLScript实现。
5：举例：使用iscroll.js实现
1）下载iScroll.js，百度搜索iScroll.js下载即可
2）引入iScroll.js，在要使用滑动效果的地方，引入iScroll.js文件
3）编写规范的html格式
只有如下格式才能实现滑动效果
<div id="wrapper">
<div class="scroll">
这个区域可以滑动
</div>
</div>
如下格式不能滑动
<div id="wrapper">
<div class="other">这个区域可以滑动</div>
<div class="scroll">
这个区域不可以滑动了
</div>
</div>
只有wrapper的第一个子元素才能实现滑动效果。
4）编写js调用代码
var Scroll = new iScroll('wrapper',{hScrollbar:false, vScrollbar:false});
第一参数必需是滑动元素的父元素的id。
主要参数一览：
hScroll: true, 左右滑动，默认为true
vScroll: true,上下滑动
hScrollbar: true, 是否显示y轴滚动条，默认为显示
vScrollbar: true,是否显示X轴滚动条，默认为显示

已赞过 已踩过<

评论收起

Hello冲
推荐于2016-07-12 · 超过47用户采纳过TA的回答

知道小有建树答主

回答量：145

采纳率：0%

帮助的人：73.3万

我也去答题访问个人页

关注

展开全部

setInterval用这个，
先判断div的的当前位置是否处于起始位置和结束为止之间，是就重复执行移动2像素或者自己订
如果到达终点就停止执行

追问

div2.onmouseover = function(){
		setInterval("div1.style.left = '10px'",10)
	};
我改成这样结果只移动了10px，而且移不回去了，要用clearInterval()移回去吗？
新手小白，麻烦写个示例代码好吗？

追答

因为你这是鼠标移动到div2上才执行setInterval了；

clearInterval()是用来停止setInterval的；
给你个例子 你看看

arguments

#div1{width:100px;height:100px;background-color: red;position: absolute;left:800px;top:100px;}

1

function move(){
  var odiv=document.getElementById('div1');
 
 setInterval(function () {
	var speed= (300-odiv.offsetLeft)/10;// Math.ceil是向上取整。而Math.floor是向下取整。。
	if (speed>0){
	 	speed=Math.ceil(speed)
	}else{
	 	speed=Math.floor(speed)
	}
	odiv.style.left=odiv.offsetLeft+speed+'px';
	 document.title=odiv.offsetLeft+','+speed  //用来验证 odiv移动的距离和速度
},30);

}
var obutton=document.getElementById('button');
obutton.addEventListener('click',move,false)

本回答被提问者和网友采纳

已赞过 已踩过<

评论收起

匿名用户
2014-09-17

展开全部

你可以渐进设置那个left值，就有动画效果了

追问

具体呢？

已赞过 已踩过<

评论收起

更多回答（1）

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

js移动div怎么做出滑动的效果？

其他类似问题

为你推荐：