js-特效部分学习-拖拽效果
一、客户区大小ClientWidth和ClientHeight
<style>
#box {
width: 200px;
height: 200px;
background-color: aquamarine;
margin: 20px;
border: 20px solid red;
padding:20px;
}
</style> </head>
<body>
<div id="box"> </div> <script>
var box = document.getElementById("box"); //容器的大小： width + padding;
console.log(box.clientWidth);
console.log(box.clientHeight);
</script>
二、ScrollWidth/scrollHeight scrollTop/scrollLeft(这两个是相对于定位了的父盒子而言的)
三、拖拽盒子分析：
思路分析：准备工作：先获得大盒子的(上图黑色边框内)====id(box)
再获得注册信息头部（上图红色边框内）====id(drop)
//step:1鼠标按下这个注册信息头部（drop）后同时需要移动盒子
drop.onmousedown=function(e){ //e为系统自带的属性
e=e||window.event; //e的兼容性（短路运算）
鼠标与盒子之间的距离（a）=鼠标在页面之中的位置(b)-盒子距离页面边界的距离(c)
var offsetX=e.pageX-box.offsetLeft;
var offsetY= e.pageY-box.offsetTop;
//同时移动
document.onmousemove=function(e){
//盒子在移动后的位置(e)=移动后的鼠标在页面之中的位置(d)-鼠标与盒子之间的距离(a)
var x= e.pageX-offsetX;
var y= e.pageY-offsetY;
//接下来我们要判断盒子的位置不能够超出整个页面
If(x<0){ //判断上边缘与左边缘
x=0;
}
If(y<0){
y=0;}
}
if(y>window.innerHeight-box.offsetHeight){ //判断下边缘与右边缘
//innerHeight是页面可视区域的高度，window.innerHeight-box.offsetHeight得到的是盒子在页面之中可以移动的最大高度
y=window.innerHeight-box.offsetHeight;
}
if(x>window.innerWidth-box.offsetWidth){
x=window.innerWidth-box.offsetWidth;
}
box.style.left=x+”px”;
box.style.top=y+”px”;
}
//鼠标抬起时盒子不再改变位置
drop.onmouse=function(){
document.onmousemove=null;
}
详见下面拖拽案例：
<style>
* {
margin: 0;
padding: 0;
} .nav {
height: 30px;
background: #036663;
border-bottom: 1px solid #369;
line-height: 30px;
padding-left: 30px;
} .nav a {
color: #fff;
text-align: center;
font-size: 14px;
text-decoration: none; } .d-box {
width: 400px;
height: 300px;
border: 5px solid #eee;
box-shadow: 2px 2px 2px 2px #666;
position: absolute;
top: 40%;
left: 40%;
background-color: white; /* 不让文字被选中 */
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
} .hd {
width: 100%;
height: 25px;
background-color: #7c9299;
border-bottom: 1px solid #369;
line-height: 25px;
color: white;
cursor: move;
} #box_close {
float: right;
cursor: pointer;
}
</style>
</head>
<body>
<div class="nav">
<a href="javascript:;" id="register">注册信息</a>
</div>
<div class="d-box" id="d_box">
<div class="hd" id="drop">注册信息 (可以拖拽)
<span id="box_close">【关闭】</span>
</div>
<div class="bd"></div>
</div> <script src="common.js"></script>
<script> var box = document.getElementById("d_box");
var drop = document.getElementById("drop"); //鼠标再按下之后，同时移动
drop.onmousedown=function(e){
//e的兼容性（短路运算）
e=e||window.event;
//鼠标在盒子之中的距离=鼠标在页面之中的位置-盒子距离页面边界的距离
var offsetX=e.pageX-box.offsetLeft;
var offsetY= e.pageY-box.offsetTop;
document.onmousemove=function(e){
//盒子在移动后的位置=移动后的鼠标的在页面中的位置-鼠标在盒子之中的距离
var x= e.pageX-offsetX;
var y= e.pageY-offsetY;
if(x<0){
x=0;
}
if(y<0){
y=0;
}
// window.innerHeight浏览器可是区域的高度
if(y>window.innerHeight-box.offsetHeight){
y=window.innerHeight-box.offsetHeight;
}
if(x>window.innerWidth-box.offsetWidth){
x=window.innerWidth-box.offsetWidth;
}
box.style.left=x+"px";
box.style.top=y+"px";
} }
//当鼠标抬起的时候，盒子不再改变位置
drop.onmouseup=function(){
document.onmousemove=null;
}
</script>
四、淘宝放大镜案例：
思路分析：
<div class="box" id="box">
<div class="small">
<img src="data:images/small.webp" width="350" alt=""/> <div class="mask"></div>
</div>
<div class="big">
<img src="data:images/big.jpg" width="800" alt=""/>
</div>
</div>
//准备工作：
根据需要获得所有需要的元素标签：
var box=document.getElementById("box");
var small=box.children[0];
var smallImg=small.children[0];
var mask=small.children[1];
var big=box.children[1];
var bigImg=big.children[0];
//step1:鼠标移动到小盒子之中时，显示小盒子中的蒙板，同时显示大图片
//移出小盒子时，蒙板隐藏，大图片隐藏
Small.onmouseover=function(){
Mask.style.display=”block”;
Big.style.display=”block”;
}
Small.onmouseout=function(){
Mask.style.display=”none”;
Big.style.display=”none”;
}
//step:鼠标放入盒子之中是让mask蒙板跟着移动
Small.onmousemove=function(e){
//var x=e.pageX-box.offsetLeft;
//var y=e.pageX-box.offsetTop;
//发现鼠标与mask的左上角位置保持一致
//所以我们需要再减去蒙板宽高的一半,这样鼠标就能在蒙板的中间位置显示
var x=e.pageX-box.offsetLeft-mask.offsetWidth/2;
var y=e.pageX-box.offsetTop-mask.offsetHeight/2;
if(x<=0){
x=0;
}
if(y<=0){
y=0;
}
//box设置了相对定位，所以是相对于box的宽度和高度而言的
if(x>box.offsetWidth-mask.offsetWidth){
x=box.offsetWidth-mask.offsetWidth;
}
if(y>box.offsetHeight-mask.offsetHeight)
{
y=box.offsetHeight-mask.offsetHeight;
}
mask.style.left=x+"px";
mask.style.top=y+"px";
step3:蒙板移动右边的大图片也跟着移动
这里需要用到一个等式（原理是等比例移动）因为左右两个图片的大小是不一样的
MaskX(蒙板左侧距小图片左侧的距离)/maxMaskImg（蒙板在小图片之中左右移动的最大距离）
=bigImgX(大图片的左侧相对于它所在的盒子左侧移动的距离)（未知数）/maxBigImgX(大图片在它所在的盒子之中所能移动的最大宽度)
var bigImgX=x*(bigImg.offsetWidth-big.offsetWidth)/(box.offsetWidth-mask.offsetWidth);
var
bigImgY=y*(bigImg.offsetHeight-big.offsetHeight)/(box.offsetHeight-mask.offsetHeight);
bigImg.style.marginLeft=-bigImgX+"px";
bigImg.style.marginTop=-bigImgY+"px";
}
五、滚动条案例分析：
//准备工作：
先获得所有需要的元素标签
var box=document.getElementById("box");
var content=document.getElementById("content");
var scroll=document.getElementById("scroll");
var bar=document.getElementById("bar");
//1.计算滚动条的大小
// boxH/contentH=barH/scrollH
var barH=box.offsetHeight*scroll.offsetHeight/content.offsetHeight;
bar.style.height=barH+"px";
//判断如果盒子的高度超过盒子之中文字的高度，则滚动条的高度为0px
if(box.offsetHeight>content.offsetHeight){
bar.style.height="0px";
}
//2.拖拽滚动
scroll.onmousedown=function(e){
var offsetY= e.pageY-box.offsetTop-bar.offsetTop;
document.onmousemove=function(e){
var y= e.pageY-offsetY-box.offsetTop;
if(y<0){
y=0
}
if(y>scroll.offsetHeight-bar.offsetHeight){
y=scroll.offsetHeight-bar.offsetHeight;
}
bar.style.top=y+"px";
//3.文字跟随滚动
// barY/maxBarY=contentY/maxContent（等比例计算）
//barY（滚动条距离外面定位了的父盒子box的距离）
//maxContent (文字可移动的最大距离)=contentH（文字内容的高度）-boxH（盒子的高度）
//maxBarY（滚动条可移动的最大距离）=scrollH（滚动栏轨道的高度）-barH（滚动条的高度）
//contentY(文字距离外面定位了的父盒子box的距离)（未知数）
var contentY=y*(content.offsetHeight-box.offsetHeight)/(scroll.offsetHeight-bar.offsetHeight);
content.style.top=-contentY+"px"; //取反滚动条向下拖动，内容是向上移动的
}
}
document.onmouseup=function(){
document.onmousemove=null;
}
js-特效部分学习-拖拽效果的更多相关文章
- js div浮动层拖拽效果代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 原生js实现模块来回拖拽效果
代码比较冗余,还没来得及做整理,往见谅. 主要用到的 JS 事件有: onmousedown:鼠标点下事件 onmousemove:鼠标移动事件 onmouseup:鼠标放开事件 具体代码如下: &l ...
- React.js实现原生js拖拽效果及思考
一.起因&思路 不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...
- js拖拽效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- JS实现漂亮的窗口拖拽效果(可改变大小、最大化、最小化、关闭)
转自<JS实现漂亮的窗口拖拽效果(可改变大小.最大化.最小化.关闭)>:http://www.jb51.net/article/73157.htm 这篇文章主要介绍了JS实现漂亮的窗口 ...
- js实现本地图片文件拖拽效果
如何拖拽图片到指定位置,具体方法如下 在从本地上传图片的时候,如果使用拖拽效果,想想应该是更加的高大上,下面直接上js代码 完整代码: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 ...
- 学习笔记---Javascript事件Event、IE浏览器下的拖拽效果
学习笔记---Javascript事件Event.IE浏览器下的拖拽效果 1. 关于event常用属性有returnValue(是否允许事件处理继续进行, false为停止继续操作).srcE ...
- 原生js简单实现拖拽效果
实现弹窗拖拽效果的原理是:按下鼠标并移动——拖拽移动物体,抬起鼠标——停止移动.主要触发三个事件:onmousedown.onmousemove以及onmouseup: 首先搭建结构:一个宽350px ...
- 用JS实现版面拖拽效果
类似于这样的一个版面,点击标题栏,实现拖拽效果. 添加onmousedown事件 通过获取鼠标的坐标(clientX,clientY)来改变面板的位置 注意:面板使用绝对定位方式,是以左上角为参考点, ...
随机推荐
- UNIX网络编程-send、recv、sendto、recvfrom详解
send.recv和sendto.recvfrom,一般情况下,send.recv在TCP协议下使用,sendto.recvfrom在UDP协议下使用,也可以在TCP协议下使用,不过用的很少. 1.s ...
- Delphi七个版本
第一次Zack Urlocker给我看一款尚未发布的名为Delphi的产品时,我意识到她将改变我的工作—还有许多其他软件开发者的工作. 我过去为使用Windows C++ 库而挣扎,而Delphi过去 ...
- The Magic only works with total devotion of one's heart
The Magic only works with total devotion of one's heart All tools and equipments are useless without ...
- VMware 中windows server 之DHCP 搭建与测试
感悟: 由于打算将windows server 的服务器搭建维护从头重新学习总结一下,遇到搭建dhcp服务的时候,在虚拟机中一直测试不成功,耽误我好几星期了,一点也不夸张,心情和积极性也大大受到打击. ...
- php六种基础算法：冒泡，选择，插入，快速，归并和希尔排序法
$arr(1,43,54,62,21,66,32,78,36,76,39); 1. 冒泡排序法 * 思路分析:法如其名,就是像冒泡一样,每次从数组当中 冒一个最大的数出来. * 比 ...
- 去除VA(Visual Assist)中文注释的红色波浪线
VS版本:vs2015 番茄版本:VA_X.dll file version 10.9.2089.0 built 2016.02.01 1.打开番茄设置 2.去掉 Underlining->Un ...
- 在where条件中使用CASE WHEN 语句
CREATE TABLE TB_Test_Report ( id int identity, stateid int, userid int, username ) ) go ,,'a') ,,'b' ...
- XidianOJ 1177 Counting Stars
题目描述 "But baby, I've been, I've been praying hard, Said, no more counting dollars We'll ...
- 实现textarea限制输入字数（包含中文只能输入10个，全ASCII码能够输入20个）
document.getElementById("<%=textBox1.ClientID %>").value 实现textarea限制输入字数(包含中文只能输入10 ...
- device tree 生成device node 到 platform_device
http://blog.csdn.net/lichengtongxiazai/article/details/38942033 http://blog.csdn.net/mcgrady_tracy/a ...