js移动div怎么做出滑动的效果？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js移动div怎么做出滑动的效果？相关的知识，希望对你有一定的参考价值。
就是说在一定时间内从左到右，而不是瞬间移动，使用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>
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轴滚动条，默认为显示 参考技术A setInterval用这个，
先判断div的的当前位置是否处于起始位置和结束为止之间，是就重复执行移动2像素或者自己订
如果到达终点就停止执行追问
div2.onmouseover = function()
setInterval("div1.style.left = '10px'",10)
;
我改成这样结果只移动了10px，而且移不回去了，要用clearInterval()移回去吗？
新手小白，麻烦写个示例代码好吗？
因为你这是鼠标移动到div2上才执行setInterval了；
clearInterval()是用来停止setInterval的；
给你个例子 你看看
arguments
#div1width: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)
具体呢？
swipe.js怎么动态添加滑动元素
这个注意看swiper的文档就可以了,可以使用jquery动态添加元素，然后调用swiper的update()方法即可。下面是一个小例子，记得把swiper和jquery引入进来。
Swiper常用于移动端网站的内容触摸滑动。
Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端。
Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。
Swiper开源、免费、稳定、使用简单、功能强大，是架构移动终端网站的重要选择！
参考技术A这个注意看swiper的文档就可以了,可以使用jquery动态添加元素，然后调用swiper的update()方法即可。下面是一个小例子，记得把swiper和jquery引入进来
<div id="content"><div class="swiper-container" id="swiper-container1" style="height:300px;">
<div class="swiper-wrapper">
<div class="swiper-slide blue-slide swiper-slide1">slider1</div>
<div class="swiper-slide red-slide">slider2</div>
<div class="swiper-slide orange-slide">slider3</div>
</div>
<div class="swiper-pagination"> </div>
</div>
<div id="contrast">
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',
pagination : '.swiper-pagination',
)
setInterval(function()
$(".swiper-wrapper").append('<div class="swiper-slide orange-slide">slider3</div>');
mySwiper.update(true);
,1000);
</script>
</div>
</div>
更多前端知识，请微☆信搜搜"htmlfans"
参考技术B 只要在ajax执行结束执行swiper方法就行var swipertj = $('.swiper-container').swiper(
observer: true,//修改swiper自己或子元素时，自动初始化swiper
observeParents: true,//修改swiper的父元素时，自动初始化swiper
slidesPerView: 3,
spaceBetween: 10, 参考技术C 你直接百度，
就有demo供你参考的。
以上是关于js移动div怎么做出滑动的效果？的主要内容，如果未能解决你的问题，请参考以下文章