让一个 DIV 缓慢向右移动 300px 就停止的javascript 代码 怎么写？
html里面写一个div id=div1
div#div1{position:absolute;
width:300px;
height:300px;
left:0;
top:30px;
background:red;
}
window.onload = function(){
var div1 = document.getElementById("div1");
var cur = div1.offsetLeft;
var speed = 6;
div1.onclick = function(){
var timer = setInterval(function(){
if(cur > 500){
clearInterval(timer);
}else{
cur += speed;
div1.style.left = speed + cur +"px";
}
},30);
};
}
使用setInterval
HTML部分
//要移动的div(操作的对象)
//按钮来触发事件
原生js实现
var btn_click=document.getElementById("move"); //获取点击按钮
var box=document.querySelector(".test");//获取要移动的div
var a=0;
btn_click.onclick=function(){
a=a+50;
box.style.left=a+'px'; //每点击一次，向右移动50px
}
你的代码结构有问题，帮你修改一下。。。
var oDiv1 = ducument.getElementById("div1):
var timer = null;
oDiv1.onclick=function(){
timer = setInterval(function(){
if(oDiv1.offsetLeft < 300){
oDiv1.style.left = oDiv1.offsetLeft + 5 +'px';
}else{
clearInterval(timer);
}
},30);
}另外，一定要确认你的div1的position是absolute。
你的代码之所以无法让这个div停止是因为你的判定是在点击的刚开始，那时候自然是小于300的，所以进不到你的else的语句块里面，所以你应该讲if判定放到setInterval的function里面，这样他才会重复判定
秦伦儿感： 需要准备的材料分别有:电脑、浏览器、html编辑器. 1、首先,打开html编辑器,新建html文件,例如:index.html. 2、在index.html中的<style>标签中,输入css代码:label{margin-left: 50px;}. 3、浏览器运行index.html页面,此时label“项目基本信息:”成功向右移动了50像素.
响水县19327332131： js怎么实现鼠标经过一个div,div自动向右边平滑缓慢的移动50px？
秦伦儿感： css3可以搞定 <div class=＂aa＂> <ul> <li class=＂a1＂>linear:平滑过渡.</li> </ul> </div> <style> .aa{ width:220px;}.aa ul li{ position:relative;left:8px;width:220px;margin:1px 5px;padding:10px;border:1px solid #ddd;background-color:#eee;color:...
响水县19327332131： jQuery怎么让一个div慢慢向右展开 - ？
秦伦儿感：无标题文档给你一个完整的,有问题可以问我(八方永信网站前端工程师)
响水县19327332131： 谁能帮我写一个js代码?让一个宽高各200的div的宽度每30毫秒变大1个px 谢谢也就是让这个 - ？
秦伦儿感： 思路:1、写一个js方法,用于设置div的宽度+12、每隔30秒调用这个方法,实现div宽度自动增加.3、如果想停止,就加上停止方法.以下代码供参考:<script language=＂javascript＂>//设置div的宽度增加1 function changeWidth(){ var obj = ...
响水县19327332131： 怎样用js实现每次点击按钮都使div向右移动50px - ？
秦伦儿感： HTML部分 //要移动的div(操作的对象) <div class=＂test＂ style=＂background:#f00;width:100px;height:100px;＂></div> //按钮来触发事件 <input type=＂button＂ value=＂移动＂ id=＂move＂/> 原生js实现 var btn_click=document....
响水县19327332131： 怎样每次点击按钮都能使div向右移动50px - ？
秦伦儿感： 用js脚本(1)在按钮的点击事件中给div的local赋值50px(2)在点击事件中生成一个透明的div宽度为50px
响水县19327332131： 用jquery让一个DIV元素向右滑动并快速淡出的语句咋写的? - ？
秦伦儿感： 1、怎么才能使DIV元素向右滑动?可以使用JQuery中的animate()函数来实现,jQuery animate() 方法用于创建自定义动画.语法:$(selector).animate({params},speed,callback);必需的 params 参数定义形成动画的 CSS 属性.可选的 ...
响水县19327332131： 如何使用js的计时器来让一个div背景从左向右移动全部代码 - ？
秦伦儿感： 你好,给你写了一个很基础的例子.参照着自己优化成你想要的效果吧.示例是这样的,鼠标移动到div上,背景图片会从左往右移动直至最右端.鼠标移出div,背景图标从右往左直至最左端.备注:考虑到宽度变化,本例背景图片使用百分比...
响水县19327332131： 网页中,div设置向右移动,虽然移动了,但在下面了 - ？
秦伦儿感： 给这个div添加float:right属性.float:left是向左浮动;float:right是向右浮动
响水县19327332131： js,控制一个div向左右匀速移动循环 - ？
秦伦儿感： 这个不需要js, 直接使用css就行,给你一个简单的demo,有不懂的可以问我:<!DOCTYPE html><html lang=＂en＂><head><meta charset=＂UTF-8＂><title>Title</title><style type=＂text/css＂> body{height: 100%; position: relative;}.demo{...
