html--鼠标控制DIV移动
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>鼠标控制DIV移动</title>
<script type="text/javascript"> var _IsMousedown = 0;
var _ClickLeft = 0;
var _ClickTop = 0;
function moveInit(evt) {
_IsMousedown = 1;
var obj = getObjById('moveDiv');
_ClickLeft = evt.clientX-obj.offsetLeft;
_ClickTop = evt.clientY-obj.offsetTop; } function startMove(evt) {
if(_IsMousedown == 0){
return;
}
var obj = getObjById('moveDiv');
obj.style.left = evt.clientX - _ClickLeft;
obj.style.top = evt.clientY - _ClickTop; } function stopMove() {
_IsMousedown = 0; } function getObjById(id) { return document.getElementById(id); }
</script> <style type="text/css" rel="stylesheet">
#movediv {
width: 100px;
height: 100px;
position: absolute;
border: 1px solid #000;
background: #EAEAEA;
}
</style>
</head>
<body>
<div id="moveDiv" style="left:20px;top:20px;" onmousedown="moveInit(event);" onmousemove="startMove(event)" onmouseup="stopMove()" onmouseout="stopMove()"> </div>
</body>
</html>
html--鼠标控制DIV移动的更多相关文章
- 控制DIV占满屏幕
网上找了很多帖子,希望是CSS控制的,但是在bootstrap环境下, 控制方式上有点问题.达不到想要的效果. 项目中需要实现的效果: DIV区域占满当前窗口的高度.且在ctrl+鼠标滚轮调整窗口大小 ...
- THREE.js代码备份——线框cube、按键、鼠标控制
<!DOCTYPE html> <html lang="en"> <head> <title>three.js canvas - g ...
- 第一课 1) 控制div属性 总结
点击按钮变换属性: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- JS/jquery实现鼠标控制页面元素显隐
最近网站要上一个活动广告横幅,当用户鼠标划过时显隐二维码.像这种鼠标事件控制页面元素显隐的情况,码农们会经常遇到,可以通过javascript或jquery代码实现,下面就几种常见需求一起归纳一下. ...
- Javascript 简单实现鼠标拖动DIV
http://zhangbo-peipei-163-com.iteye.com/blog/1740078 比较精简的Javascript拖动效果函数代码 http://www.jb51.net/art ...
- THREE.js代码备份——webgl - geometry - dynamic(模拟海浪,通过时间(毫秒)来控制平面点的运动模拟海浪,鼠标控制写在另外的js中)
HTML: <!DOCTYPE html> <html lang="en"> <head> <title>three.js webg ...
- jQuery---鼠标滚轮控制div横向滚动条左右移动
HTML <div class="table-responsive"> <div class="fhtable" style="wi ...
- jquery鼠标移动div内容上下左右滚动
jquery鼠标移动div内容上下左右滚动 点击这里查看效果:http://keleyi.com/keleyi/phtml/jqtexiao/9.htm <!DOCTYPE html PUBLI ...
- js 控制Div循环显示 非插件版
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- 【Python爬虫基础】抓取知乎页面所有图片
抓取地址所有图片 #! /usr/bin/env python from urlparse import urlsplit from os.path import basename import ur ...
- 笔记本分享无线Wifi
两种方法: 一.使用软件分享,如Wifi共享精灵,设置非常简单. 二.开启windows 7的隐藏功能:虚拟WiFi和SoftAP(即虚拟无线AP),就可以让电脑变成无线路由器,实现共享上网,节省网费 ...
- css快捷方式
本来是年前准备整理发布的,都搞定50%了,一篇万恶的<盗墓笔记:九幽将军>让我猪油蒙了心.....诶,不说了,搞一半就算了,最后还忘了保存,此刻只听得那一万只草某马呼啸而过... 言归正传 ...
- 打印HTML页面部分区域javascript代码
function preview(oper) { if (oper < 10) { bdhtml = window.document.body.innerHTML; //获取当前页的html代码 ...
- CSS学习笔记总结和技巧
跟叶老师说项目,他叫我写一个静态首页,看起来挺简单的,但是下手才发现在真的不会怎么下手啊,什么模型啊模块啊都不懂,写毛线啊!! 如图:页面下拉还有侧栏,中间内容等. 可是答应跟老师做了,不能怂啊,于是 ...
- SQL约束脚本的用法
1.主键约束:要对一个列加主键约束的话,这列就必须要满足的条件就是分空因为主键约束:就是对一个列进行了约束,约束为(非空.不重复)以下是代码 要对一个列加主键,列名为id,表名为emp 格式为:a ...
- AjaxPro.2.dll使用方法简介
1.添加对 AjaxPro.2.dll 的引用 2.在 webconfig 中 system.web 节点下 进行如下配置 <httpHandlers> <add verb=&quo ...
- 01.Editplus+Lua配置
学习一门语言有一款简单顺手的编辑工具很重要,我使用Editplus要多一点:就想能不能加上Lua支持,网上一搜还还不少.现把配置记录下来,也算做个笔记吧! Editplus版本是中文3.41(网上下吧 ...
- ecstore实现图片分离(静态资源分离)配置文件
转载http://bbs.ec-os.net/read.php?tid=854 图片分离涉及到三个config设置#define('APP_STATICS_HOST', 'http://192.168 ...
- 用java pyhont通过HTTP协议传输文件流
// 代码网上抄的 忘记链接了 抱歉哈package upload; import java.io.BufferedReader; import java.io.DataOutputStream; i ...