转行学开发,代码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. Self-Driving Database

    最近一直在做 ML in Database 相关的工作.偶然发现CMU 19spring的15-721课程竟然专门安排了这个专题,不禁欣喜若狂,赶紧去学习了一下. Andy提出了self-drivin ...

  2. C++设计模式:访客模式

    访客模式:通俗的说, 就是定义一个访问者角色, 当对指定角色进行访问时要通过访问者进行访问. 访客模式的侵入性适中,仅在被访问的类里面加一个对外提供接待访问者的接口. 访客模式的优点: 符合单一职责原 ...

  3. element ui 选择期 传对象

    <template> <el-select value-key="label" v-model="value" placeholder=&qu ...

  4. windows安装nginx部署

    转自:https://www.jb51.net/article/47066.htm 一.下载安装Nginx(本文环境为windows xp 32bit环境) 解压nginx-1.0.11.zip,进入 ...

  5. iOS开发之详解剪贴板

    关于UIMenuController的用法例子 今天终于搞明白了UIMenuController显示的相关内容,把源代码分享给大家! 要正常显示菜单,必须做到以下几点:1. -(BOOL)canBec ...

  6. odoo ERP 系统安装与使用

    https://hub.docker.com/_/odoo/ #!/bin/bash sudo docker pull postgres:10sudo docker pull odoo:11.0 su ...

  7. Linux 开机自动启动脚本

    1)编写要执行脚本的sh文件mysetup.sh #!/bin/sh ### BEGIN INIT INFO # Provides: land.sh # Required-start: $local_ ...

  8. 用element-ui进行文件的上传

    在进项的项目中,我使用vue配合element搭建的项目,现在需要用到上传文件的写法!现在列举下我的项目中所使用的上传文件的方法! <el-upload style="display: ...

  9. php内置函数分析array_count_values()

    PHP_FUNCTION(array_count_values) { zval *input, /* Input array */ *entry, /* An entry in the input a ...

  10. ESP8266-让灯闪烁

    例子一:让板子上的LED_BUILTIN灯进行闪烁 void setup() { pinMode(LED_BUILTIN,OUTPUT); } void loop() { digitalWrite(L ...