可挪动的div

/-----------------------------DIV 设置id 和 Class----------------------------------------------/<div id="add" class=" mydiv ">
/-----------------------------js----------------------------------------------/
//可挪动的DIV
var posX;
var posY;
function fwus(num){
    if(num==1){
        fwuss = document.getElementById("add");
    }else{
        fwuss = document.getElementById("update");
    }
    fwuss.onmousedown=function(e){
        posX = event.x - fwuss.offsetLeft;//获得横坐标x
        posY = event.y - fwuss.offsetTop;//获得纵坐标y
        document.onmousemove = mousemove;//调用函数,只要一直按着按钮就能一直调用
    }
    document.onmouseup = function(){
        document.onmousemove = null;//鼠标举起,停止
    }
}
function mousemove(ev){
    if(ev==null) ev = window.event;//IE
    fwuss.style.left = (ev.clientX - posX) + "px";
    fwuss.style.top = (ev.clientY - posY) + "px";
}

/------------------------------CSS-----------------------------/
.mydiv{ position: fixed;z-index: 1000;background: rgba(0, 0, 0, 0);}
.color{right: 0px;}

				
时间: 2024-10-28 16:30:51

可挪动的div的相关文章

Jquery DIV 挪动

<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="title" content="Jquery Div自由拖动排序" /> <meta name="keywords" content="Jquery Div自由拖动排序,JqueryDiv排序,Jquery拖动,排序&quo

HTML之css+div

做一个网站 先见站点 ../往上翻一个文件夹 超链接: <a hert = " " target(超链接的打开方式) = "self(自身)"或"new(新开窗体)"> </a> 锚点:超链接的特殊应用 <a href="#1"...> </a> <a name ="1"> </a> 表格:容器,可以把这一个页面 划分区域 表格不能随便

20151008-20151101学习内容之三:css+div

css+div 超链接: <a hert = " " target(超链接的打开方式) = "self(自身)"或"new(新开窗体)"> </a> 锚点:超链接的特殊应用 <a href="#1"...> </a> <a name ="1"> </a> 表格:容器,可以把这一个页面划分区域表格不能随便移动 div: 层标签 (默认占一

DW 表格 css+div

做一个网站 先见站点 ../往上翻一个文件夹 超链接: <a hert = " " target(超链接的打开方式) = "self(自身)"或"new(新开窗体)"> </a> 锚点:超链接的特殊应用 <a href="#1"...> </a> <a name ="1"> </a> 表格:容器,可以把这一个页面 划分区域 表格不能随便

js实现键盘操作对div的移动或改变-------Day43

<爸爸去哪儿>的第二季据说要开播了额,有点小期待,不知道这一季的小宝贝们会有多萌,还会甜到心底吧, 哈哈,还记得那个风一样的女子呢,不知道她现在如何了. 言归正传,继续今天的记录,实际上在刚开始的时候,我以为可以很快的实现这个功能,毕竟昨天记录了获取键盘按键的值的事件,有了值,无非就是针对不同值做不同的操作嘛,而且之前曾经在写贪吃蛇时也用到过.结果一捯饬,又是好久的一段时间,所以感觉有必要记录下的,一方面确有可取之处,另一方面也对自己的提醒,刚刚实现过的功能转头又是陌生人了,总的来说,算是温故

JS拖动DIV布局

方法一: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charse

CSS+DIV——前端er必备基础

B/S真是一个长见识的阶段,认识了很多前端必备的语言,随着时间的增加,本以为新闻发布系统中学到的那些我还不知道是什么的东西,会早已没了印象.但反而却更加深刻了,当时还不知道什么是CSS,就学会了写CSS.还不是什么是异步通信,就学会了用AjaX.当看到视频中的经典框架时,才发现,这不就是新闻发布系统中用到的CSS+DIV么!(⊙o⊙)哦,原来我早就会写了! 一.为什么是DIV+CSS 看到这个搭配,我就在想为什么是这样的组合?Span不可以么!直接用HTML不可以么!一个很明确的目的:为了让数据

移动端俩个DIV切换,上滑加载

<!doctype html><html lang="zh-cn"><head> <meta name="viewport" content="initial-scale=1, user-scalable=0, minimal-ui" charset="gbk"> <title>随访计划与随访记录app</title> <style> *{ m

深度理解div+css布局嵌套盒子

1. 网页布局概述 网页布局的概念是把即将出现在网页中的所有元素进行定位,而CSS网页排版技术有别于传统的网页排版方法,它将页面首先在整体上使用<div>标记进行分块,然后对每个快进行CSS定位以及设置显示效果,最后在每个块中添加相应的内容.利用CSS排版方法更容易地控制页面每个元素的效果,更新也更容易,甚至页面的拓扑结构也可以通过修改相应的CSS属性来重新定位.  2. 盒子模型 盒子模型是CSS控制页面元素的一个重要概念,只有掌握了盒子模型,才能让CSS很好地控制页面上每一个元素,达到我们