js点击div移动位置（jquery如何实现点击一个按钮 div框从右→左，再点击按钮 div框从刚刚的位置移动回原来的位置）

本文目录

• jquery如何实现点击一个按钮 div框从右→左，再点击按钮 div框从刚刚的位置移动回原来的位置
• 如何利用JS把DIV的层向下移动一点点
• 求JS或者JQUERY实现拖动DIV交换位置的代码，加急！~
• JS或者CSS实现点击按钮，按钮的单击事件让DIV移动到指定位置，注：DIV位置不确定
• 把div交换位置，用js！
• js怎么实现鼠标经过一个div，div自动向右边平滑缓慢的移动50px
• 运用JavaScript写出如下效果： 要求：鼠标点击div块后，div由左边缓慢移动到右边.
• JavaScript当鼠标点击div时，这个div自动向上移动怎么实现
• 鼠标事件，js代码实现div移动功能
• javaScript改变div的位置

jquery如何实现点击一个按钮 div框从右→左，再点击按钮 div框从刚刚的位置移动回原来的位置

1、新建一个html文件，命名为test.html。

2、在test.html文件内，使用div标签创建一行文字，文字内容为“小明”。

3、在test.html文件内，设置div标签的id属性为mytext，主要用于下面通过该id获得div对象。

4、在test.html文件内，使用button标签创建一个按钮，按钮名称为“切换内容”。

5、在test.html文件中，给button按钮绑定onclick点击事件，当按钮被点击时，执行func（）函数。

6、在js标签中，创建func()函数，在函数内，通过id(mytext)获得div对象，通过html()方法获得div内的文本内容，使用if语句判断获得的文字内容是否为指定的文本内容，如果不是，则通过html()方法改变文本内容。

如何利用JS把DIV的层向下移动一点点

有很多人在做网站的时候经常会用到js拖动层的效果，还要有可拖动效果，现在我把我做的这个鼠标移动层效果的代码贴出来，给大家分享一下，本人在Mozilla Firefox、Internet Explorer、谷歌浏览器等几种浏览器中测试通过。
代码如下：
《div id="movediv" style="width:250px;height:200px;border:1px #000 solid; position:absolute;left:400px;top:218px;"》
《div id="movespan"》朋友:用鼠标来拖走我吧!我在这里太久了!《/div》
《div style="background:red; height:50px;"》《/div》
《/div》
《script language="JavaScript" type="text/javascript"》
var dragdrop={
registerDragdropHandler:function(handler,target,cursor){ // 注册鼠标移动的一些事件。
　var _IsMousedown=false,_ClickLeft=0,_ClickTop=0;
　var _hDom=this.get(handler);
　var _tDom=this.get(target);
　_hDom.style.cursor=cursor||"move";
　
　　　 function startDrag(evt){ // 按下鼠标左键时的事件。
　 evt=window.event||evt; // 获取当前事件对象。
　 _IsMousedown=true; // 记录已经准备开始移动了。
　 _ClickLeft=evt.clientX-parseInt(_tDom.style.left); // 记录当前坐标轴。
　 _ClickTop=evt.clientY-parseInt(_tDom.style.top);
　}
　　　 function doDrag(evt){ // 鼠标开始移动时的事件。
　 evt=window.event||evt; // 获取当前事件对象。
　 if(!_IsMousedown)return false; // 如果_IsMousedown不等于真了返回。
　 _tDom.style.left=evt.clientX-_ClickLeft+"px"; // 把鼠标当前移动的位置赋值给div
　 _tDom.style.top=evt.clientY-_ClickTop+"px"; // 当前位置减去开始位置就是层当前存放的位置。
　}
　　　 function endDrag(){ // 释放鼠标左键时的事件。
　 if(_IsMousedown){ // 如果_IsMousedown还为真那么就赋值为假。
　　if(this.isIE) _tDom.releaseCapture(); //该函数从当前的窗口释放鼠标捕获，并恢复通常的鼠标输入处理。
　　_IsMousedown=false;
　 }
　}
　　　 _hDom.onmousedown=startDrag; // 鼠标按下事件。
　document.onmouseup=endDrag; // 鼠标释放事件。
　document.onmousemove=doDrag; // 鼠标移动事件。
　_tDom.onselectstart=_tDom.oncontextmenu=function(){return false;}; // 禁止选择和右键菜单。
},
isIE:(navigator.appName=="Microsoft Internet Explorer"), // 判断是否为IE。
get:function(element){ // 通过一串字符返回一个对象。
　if(typeof(element) == "string"){
　 return document.getElementById(element);
　}
　return element;
}
};
// 使用方式如下：
dragdrop.registerDragdropHandler("movespan","movediv");
《/script》

求JS或者JQUERY实现拖动DIV交换位置的代码，加急！~

《!DOCTYPE html》
《html》
《head》
《meta charset="utf-8" /》
《title》《/title》
《style type="text/css"》
/*.column {float: left;}*/
.column div{width: 178px;height: 56px;margin-bottom: 2px;}
.box1{background-color: black;}
.box2{background-color: bisque;}
.box3{background-color: gray;}
.box4{background-color: wheat;}
《/style》
《/head》
《body》
《div class="column" draggable="true"》
《div class="box1"》

《/div》
《/div》
《div class="column" draggable="true"》
《div class="box2"》

《/div》
《/div》
《div class="column" draggable="true"》
《div class="box3"》

《/div》
《/div》
《div class="column" draggable="true"》
《div class="box4"》

《/div》
《/div》

《script》

function handleDragStart(e) {

this.style.opacity = ’1’;

dragSrcEl = this;

e.dataTransfer.effectAllowed = ’move’;

e.dataTransfer.setData(’text/html’, this.innerHTML);

}

function handleDragEnter(e) {

this.classList.add(’over’);

}

function handleDragLeave(e) {

this.classList.remove(’over’);

}

function handleDragOver(e) {

if (e.preventDefault) {

e.preventDefault();

}

return false;

}
//拖拽完成后，作用在拖拽元素上
function handleDrop(e) {

if (dragSrcEl != this) {

dragSrcEl.innerHTML = this.innerHTML;

this.innerHTML = e.dataTransfer.getData(’text/html’);

}

return false;

}
//拖拽完成后，作用在被拖拽元素上
function handleDragEnd(e) {

this.style.opacity = ’1’;

.forEach.call(divs, function(d) {

d.classList.remove(’over’);

});

}

var divs = document.querySelectorAll(’.column’);

.forEach.call(divs, function(d) {

d.addEventListener(’dragstart’, handleDragStart, false);

d.addEventListener(’dragenter’, handleDragEnter, false);

d.addEventListener(’dragover’, handleDragOver, false);

d.addEventListener(’dragleave’, handleDragLeave, false);

d.addEventListener(’drop’, handleDrop, false);

d.addEventListener(’dragend’, handleDragEnd, false);

});

《/script》
《/body》
《/html》
可以实现你要的效果 不过看到晚了，可以拖动交换位置和数据

JS或者CSS实现点击按钮，按钮的单击事件让DIV移动到指定位置，注：DIV位置不确定

《html》
《head》
《meta charset="utf-8"》
《style》
.动1{
position: absolute;
left: 30px;
top: 200px;
}
《/style》
《script》
function 移动(){
document.getElementById("块").className="动1";
}
《/script》
《/head》
《body》
《input type="button" onclick="移动()" value="移动" /》
《div id="块"》你点移动,看我动不动《/div》
《/body》
《/html》

把div交换位置，用js！

《html》
《head》
《script type="text/javascript" src="/jquery/jquery.js"》《/script》
《script type="text/javascript"》
$(document).ready(function(){
var p_1=document.getElementById(’p1’);
var p_2=document.getElementById(’p2’);

var d_c=document.createElement("div");
d_c = p_1;
d_c.id = ’p3’
var d_d=document.createElement("div");
d_d = p_2;
d_d.id=’p4’
//alert(d_d.innerHTML);
$(".btn1").click(function(){

//$("#p2").replaceWith($("#p4").html());
//$("#p1").replaceWith($("#p3").html());

$("#p2").replaceWith("《div》4444《/div》");
$("#p1").replaceWith("《div》3333《/div》");
//$("#p1").replaceWith($t("#p4").html());
// alert($("#p3").text());
//alert($("#p4").text());
});
});
《/script》

《style》
div{height:20px;background-color:yellow}
《/style》

《/head》
《body》
《div id=’p1’》This is a paragraph.11111《/div》
《div id=’p2’》This is another paragraph.222222《/div》
《div id=’div1’》333333333《/div》

《button class="btn1"》用粗体文本替换所有段落《/button》
《/body》
《/html》

js怎么实现鼠标经过一个div，div自动向右边平滑缓慢的移动50px

(function($) {

$.fn.huadong = function( obj, obja, time ) {

this.height($(window).height()).css({’position’:’absolute’, ’top’:’0px’, ’left’ : ’0px’}); //首先把最外层的标签对象设置为浮动， 上边为0， 左边也为0

var left = $(obj).width(); //取得左边栏的宽度

$(obj).height($(window).height()).width(0).hide(); //将左边栏的高度设置为浏览器的高度， 宽度为0， 并隐藏掉！这样是为了页面载入的时候初始化

$(obja).click(function(){ //给触发按钮绑定点击事件，也就是鼠标点击触发按钮后执行的动作

$(obj).show().animate({’width’:left + ’px’}, time); //把左边栏的宽度设置为原来的宽度并显示出来， 根据设定的时间慢慢展现

});

$(obj).mouseout(function(){ //绑定左边栏鼠标移开事件

$(this).animate({’width’:’0px’}, time, function(){ $(this).hide(); }); //又把左边栏的宽度设置为0， 并且隐藏

});

}

})(jQuery);

运用JavaScript写出如下效果： 要求：鼠标点击div块后，div由左边缓慢移动到右边.

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

JavaScript当鼠标点击div时，这个div自动向上移动怎么实现

这个很好办，先设置div中的图片的display=’none’,鼠标移入div,再设置他的style.display=’block’就可以了

鼠标事件，js代码实现div移动功能

首先引入jquery框架 例如 jquery-1.7.1.js
//$("#div1")表示要移动的div
$("#div1").animate({top:’+=200px’},"slow");//向上移动200px；
$("#div1").animate({top:’-=200px’},"slow");//向下移动200px；回到原来的位置

javaScript改变div的位置

参考如下：

《input type="text"》
《div id="divShow" style="display:none;position:absolute;"》显示的内容；《/div》

display:none，表示此层隐藏；
position:absolute，表示此层的为绝对位置，方便后期进行绝对定位

添加事件，完成效果；

《script type="text/javascript"》
function showDiv(obj) {
// 保存元素；
var el = obj;
// 获得元素的左偏移量；
var left = obj.offsetLeft;
// 获得元素的顶端偏移量；
var top = obj.offsetTop;
// 循环获得元素的父级控件，累加左和顶端偏移量；
while (obj = obj.offsetParent) {
left += obj.offsetLeft;
top += obj.offsetTop;
}
// 设置层的坐标并显示；
document.all.divShow.style.pixelLeft = left;
// 层的顶端距离为元素的顶端距离加上元素的高；
document.all.divShow.style.pixelTop = top + el.offsetHeight; 
document.all.divShow.style.display = "block";
}
《/script》
《style》

#divShow 
{
width:150px;
height:180px;
border-width:thin;
background:yellow;
}
《/style》
《input type="text" onfocus="showDiv(this);"》
《div id="divShow" style="display:none;position:absolute;"》显示的内容；《/div》

注意：

offsetLeft和OffsetTop不是获得元素和页面的距离，只是获得元素和父元素的的距离，所以要进行while循环一层层累加距离，最后得到元素和页面之间的距离
层次关系：本元素-》父元素-》……》body-》null，当为null时，退出while循环。

最终效果如下：