转行学开发,代码100天——2018-05-07

前面的记录里展示了JavaScript中鼠标拖拽功能,今天利用拖拽功能实现另一个应用场景——自定义滚动条(作为控制器)的用法。

常通过自定义滚动条控制物体大小,控制透明度等。其实现的基本原理就是拖拽事件,只不过这里是单方向的移动。

如上图,通过拖拽图中红色方块,实现对其他变化的控制。

这里需要注意一下几点:

1.红色方块的变化范围(方向:水平变化,范围:0—(oParent.offsetWidth-oDiv.offsetWidth))

2.拖动红色方块产生的一个重要变量:变化比例,scale= 1/(oParent.offsetWidth-oDiv.offsetWidth).

通过该比例来驱动其他变化的范围。

具体代码如下:

<!-- 自定义控制条 -->
<div id="parent">
<div id="div1"></div>
</div>
<!-- 被驱动div盒子 -->
<div id="div2"></div>
    <style type="text/css">
#parent{width: 600px;height: 20px;background: #ccc;position: relative;margin: 10px auto;}
#div1{width: 20px;height: 20px;background: red;position: absolute;left:;top:;}
#div2{width:;height:;background: green;position: absolute;}
</style>

JavaScript控制条部分:

<script type="text/javascript">
window.onload = function(){
var oParent = document.getElementById("parent");
var oDiv = document.getElementById("div1");
var oDiv2 = document.getElementById("div2");
var disX =0;
oDiv.onmousedown = function(ev){
var oEvent = ev||event;
disX = oEvent.clientX-oDiv.offsetLeft;
if (oDiv.setCapture) {
//鼠标移动事件
oDiv.onmousemove = mouseMove;
oDiv.onmouseup = mouseUp;
oDiv.setCapture();//ie专用
return false;
}else{
//鼠标移动
document.onmousemove =mouseMove;
document.onmouseup = mouseUp;
return false;
}
//鼠标按下事件
function mouseMove(ev){
var oEvent = ev||event;
var l = oEvent.clientX-disX;
if (l<0) {
l=0;
}else if(l>oParent.offsetWidth-oDiv.offsetWidth)
{
l=oParent.offsetWidth-oDiv.offsetWidt+"px";
}
oDiv.style.left = l+"px";
var scale = l/(oParent.offsetWidth-oDiv.offsetWidth);
document.title =scale;
oDiv2.style.width=400*scale+"px";
oDiv2.style.height=400*scale+"px"
;
};
//鼠标抬起事件
function mouseUp()
{
this.onmousemove = null;
this.onmouseup = null;
if (this.setCapture)
{
this.releaseCapture();//ie专用
}
};
};
}
</script>

此外还可以通过该实例修改后,将其变化比例用于驱动透明度等变化,甚至设计为竖直方向的工具条。

    #div3{width: 200px;height: 200px;background: yellow;position: absolute;filter: alpha(opacity:30);opacity: 0.3;}

javascript中控制鼠标移动事件作如下修改:

  var scale = l/(oParent.offsetWidth-oDiv.offsetWidth);
document.title =scale;
// oDiv2.style.width=400*scale+"px";
// oDiv2.style.height=400*scale+"px";
var alpha = 100*scale;
oDiv3.style.filter ='alpha(opacity:'+alpha+')';
oDiv3.style.opacity = alpha/100;

day52—JavaScript拖拽事件的应用(自定义滚动条)的更多相关文章

  1. javascript 拖拽事件

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. 每日分享!~ JavaScript(拖拽事件)

    浏览器的拖拉事件 拖拉(drag)指的是,用户在某个对象上按下鼠标键不放,拖动它到另一个位置,然后释放鼠标键,将该对象放在那里. 拖拉的对象有好几种,包括元素节点.图片.链接.选中的文字等等.在网页中 ...

  3. javascript拖拽事件

    <!DOCTYPE html> <html> <head> <title></title> <style type="tex ...

  4. day50—JavaScript鼠标拖拽事件

    转行学开发,代码100天——2018-05-05 今天通过鼠标拖拽事件复习巩固一下鼠标事件. 鼠标拖拽事件需要记住两点: 1.距离不变 2.鼠标事件(按下,移动,抬起) <div id=&quo ...

  5. 完美实现鼠标拖拽事件,解决各种小bug,基于jquery

    鼠标拖拽事件是web中使用频率极高的事件,之前写过的代码包括网上的代码,总存在各种各样的问题,包括拖拽体验差,松开鼠标后拖拽效果仍存在以及代码冗余过大等 本次我才用jQuery实现一个尽可能高效的拖拽 ...

  6. html5拖拽事件 xhr2 实现文件上传 含进度条

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  7. Javascript 拖拽的一些高级的应用——逐行分析代码,让你轻松了解拖拽的原理

    我们看看之前的拖拽在周围有东西的时候会出现什么问题? 在高级浏览器中不会有啥问题,我们放到IE7下面测试一下,问题就出来了.如图 我们可以很清楚的看到,文字都已经被选中了.那这个用户体验很不好,用起来 ...

  8. Javascript 拖拽的一些简单的应用——逐行分析代码,让你轻松了解拖拽的原理

    今天我们来看看如何让拖拽的物体不能拖出某个div之外和拖拽的吸附功能 上次讲到我们的拖拽是不可拖出可视区范围的,在这基础上我们加个父级的div,不让他拖出父级.原理和之前的一样,简单吧. <di ...

  9. Javascript 拖拽雏形中的一些问题——逐行分析代码,让你轻松了解拖拽的原理

    今天我们就来解决上一次拖拽雏形中的一些问题.下面看看有哪些问题? 附上上期的Javascript代码,方便大家查看问题. <script type="text/javascript&q ...

随机推荐

  1. xml

    //写入XML文件 public static void SavetoXml(List<ProxyEntity> proxys) { string path = Path.Combine( ...

  2. 使用git 更新线上代码

    先本地代码合并://1合并分支git branch//2查看taggit tag //3添加tagcloud_crm]$ git tag -a v1.0.2 -m "0902"// ...

  3. 查看ORACLE的实际执行计划

    ORACLE的执行计划分为预估执行计划和实际执行计划.其中,你用Toad.PL/SQL Developer.SQL Developer.EXPLAIN PLAN FOR或者SET ATUOTRACE ...

  4. ansible文件模块使用

    1. 文件组装模块-assemble assemble主要是将多份配置文件组装为一份配置文件. 参数 必填 默认 选项 说明 Backup 否 No Yes/no 是否创建备份文件,使用时间戳 Del ...

  5. docker pull报错failed to register layer: Error processing tar file(exit status 1): open permission denied

    近来在一个云主机上操作docker pull,报错如下: failed to register layer: Error processing ): open /etc/init.d/hwclock. ...

  6. Debian 8下手工安装 Eclipse CDT neon.2

    从 http://www.eclipse.org/downloads/packages/eclipse-ide-cc-developers/neon2 下载 eclipse-cpp-neon-2-li ...

  7. Spark WordCount 文档词频计数

    一.使用数据 Apache Spark is a fast and general-purpose cluster computing system.It provides high-level AP ...

  8. HDU 2585 Hotel(字符串的模糊匹配+递归)

    Problem Description Last year summer Max traveled to California for his vacation. He had a great tim ...

  9. linux lamp编译环境安装

    apache 安装:http://blog.csdn.net/wplblog/article/details/52172128 编译安装 mysql安装:http://www.centoscn.com ...

  10. 如何在 CentOS 7 上安装 Docker

    Docker 是一个开源工具,它可以让创建和管理 Linux 容器变得简单.容器就像是轻量级的虚拟机,并且可以以毫秒级的速度来启动或停止.Docker 帮助系统管理员和程序员在容器中开发应用程序,并且 ...