`
someoneneedsme
  • 浏览: 4739 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
最近访客 更多访客>>
社区版块
存档分类
最新评论

移动DIV

阅读更多
<html>

	<head>

<title>

</title>
<script type="text/javascript">
function move()
{
	var fDiv = document.getElementById("d1");
	var xpos = parseInt(fDiv.style.left);
	xpos+=50;
	fDiv.style.left = xpos+"px";

}
</script>	
</head>

<body >
	
	<div id="d1" style="left:100px;position:absolute;width:50px;height:30px;border:1px red solid;" >111</div>


<input type="button" value="move" onclick="move()"  />

</body>
</html>

注意:
1.  left 和 position的属性必须指定   //left:100px;position:absolute;

2.  style.left 为 px 单位 必须先 parseInt   //var xpos = parseInt(fDiv.style.left);
分享到:
评论

相关推荐

    可移动DIV可移动DIV可移动DIV可移动DIV可移动DIV

    可移动的DIV可移动DIV可移动DIV可移动DIV可移动DIV可移动DIV可移动DIV可移动DIV可移动DIV可移动DIV可移动DIV可移动DIV可移动DIV可移动DIV可移动DIV可移动DIV可移动DIV可移动DIV可移动DIV可移动DIV可移动DIV可移动DIV...

    移动div(jquery)

    标题“移动div(jquery)”暗示我们将讨论如何使用jQuery来实现div元素的动态移动效果,这在创建交互式用户界面时非常常见。下面,我们将深入探讨这个主题,并结合“描述”中的“值得拥有”,来展示jQuery在处理div...

    移动DIV简易实例

    在提供的"移动DIV.html"文件中,很可能会包含这些概念的实际应用。打开这个文件,你可以看到一个实际的`div`移动示例,通过查看和学习源代码,可以更好地理解以上知识点的实践。 总的来说,这个简单的`div`移动实例...

    DIV 拖动 JS移动DIV DIV位置移动

    DIV 拖动 JS移动DIV DIV位置移动DIV 拖动 JS移动DIV DIV位置移动DIV 拖动 JS移动DIV DIV位置移动DIV 拖动 JS移动DIV DIV位置移动

    js移动div源代码

    在本主题“js移动div源代码”中,我们将深入探讨如何使用JavaScript来操作网页中的div元素,实现其位置的动态改变,从而创造出更丰富的用户界面。 首先,我们需要理解HTML中的`&lt;div&gt;`标签。`&lt;div&gt;`是“division”的...

    模式对话框(可刷新)+可移动div+遮罩层

    综合以上,"模式对话框(可刷新)+可移动div+遮罩层"是一个高级的前端UI技术组合,它在很多现代Web应用中都有广泛应用,比如在线协作工具、内容管理系统和电子商务平台等。通过学习和实践这些技术,开发者可以提升网页...

    jquerydiv 移动DIV,效果也很好,只是有点复杂。

    "jquerydiv 移动DIV"这个标题指的是利用jQuery来实现对网页中DIV元素的动态移动效果。虽然jQuery使得创建复杂的动画变得相对容易,但有时候可能涉及到的代码会比较复杂,尤其是当需要实现特定的交互或过渡效果时。 ...

    可移动div

    标题“可移动div”指的是在网页开发中,创建一个可以被用户通过鼠标拖动来改变位置的div元素。这样的功能通常用于创建浮动窗口、对话框或者自定义的控件,让用户能够自由调整其在页面上的布局。在网页设计中,这种...

    基于bootstrap和jquery的可拖拽移动div,可预览的页面生成器

    标题中的“基于bootstrap和jquery的可拖拽移动div,可预览的页面生成器”指的是一个Web开发工具,它利用Bootstrap框架和jQuery库构建,允许用户通过拖拽和放置的方式设计网页布局,并实时预览编辑效果。Bootstrap是...

    JS 可移动div层 移动div层 支持多个div层移动

    参考自:http://blog.csdn.net/k8080880/article/details/7166351 这下载文件只是为了懒人做的...

    js实现的打开关闭移动div

    js实现的打开关闭移动div,可直接运行查看效果,效果很炫。

    移动div+改变div大小+右键添加新的div+div只能在一个范围的。。JQ+js+html源码。。

    当鼠标按下时记录初始位置,鼠标移动时计算差值并更新`div`的位置,鼠标释放时停止更新。JQuery提供了简便的事件绑定方法,如`$(element).on('mousedown', function() {...})`。 2. 改变`div`大小: 要实现`div`的...

    div移动块(用于web上的小移动栏)

    在网页设计中,"div移动块"是一种常见的技术,它允许开发者创建可移动的元素,如窗口、广告栏或其他互动式界面组件。这种技术主要基于HTML的`&lt;div&gt;`元素结合JavaScript来实现,使得用户可以通过点击或拖动来改变元素...

    DIV可移动 可实现任意拖动放大缩小

    标题中的“DIV可移动 可实现任意拖动放大缩小”是指一种使用JavaScript技术来实现的交互功能,允许用户在网页上自由地拖动、缩放HTML中的div元素。这一功能通常用于创建用户界面元素,如窗口、面板或者任何需要动态...

    定时器移动div

    定时器移动div 实现了div在屏幕上的循环移动。

    移动div层.txt

    - **`&lt;div id="moveMe"&gt;`**:这个`&lt;div&gt;`拥有一个特定的ID(`moveMe`),并设置了一些CSS样式来使其可以被用户拖动。 #### 2. CSS样式 - **`position:relative;`**:此属性用于定位元素。相对于其正常位置进行定位...

    JQueryt移动div兼容

    兼容IE、谷歌、Opera、火狐、Safari、360浏览器 也许写不很好但都可以实现效果放上来只是为了那些想下但没有分的人

    Jquery跟随滚动条移动的div动画效果

    "Jquery跟随滚动条移动的div动画效果"就是一个典型的例子,它利用jQuery库实现了一个div元素随着页面滚动条移动而同步移动的特效,而且这个div在移动过程中保持平滑,避免了闪烁现象,提升了用户体验。 首先,...

    js+html+css实现鼠标移动div实例.docx

    接着,将`mousemove`事件绑定到文档上,以便在鼠标移动时更新`divBody`的位置。当鼠标抬起(`onmouseup`)时,解除`mousemove`事件的监听,结束拖拽。 ```javascript var posX, posY; var fdiv = document....

    自定义 alert() 范围 拖动 移动 DIV浮动层

    文件内包含有:1,自定义的类似浏览器内置的 alert() 函数 2,兼容IE/FF(ie/火狐firefox)的取出事件event 3,在document.body范围内移动浮动层,弹出框等 3个函数。

Global site tag (gtag.js) - Google Analytics