转行学开发,代码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. 在SQL中存储过程的一般语法

    一般分为十种情况,每种语法各不相同: 1. 创建语法 1 2 3 4 5 6 7 create proc | procedure pro_name    [{@参数数据类型} [=默认值] [outp ...

  2. c# 数据库基础(将连接字符串写到配置文件中)

    数据库 操作步骤 一,添加一个配置文件 内容 <?xml version="1.0" encoding="utf-8" ?> <configu ...

  3. es5继承和es6类和继承

    es6新增关键字class,代表类,其实相当于代替了es5的构造函数 通过构造函数可以创建一个对象实例,那么通过class也可以创建一个对象实列 /* es5 创建一个person 构造函数 */ f ...

  4. Docker 启动与停止容器

    启动已运行过的容器 docker start 容器名称|容器id 如: docker start mycentos 启动所有运行过的容器(注意:反单引号` `), docker ps -a -q 是查 ...

  5. python time、datetime模块

    时间的三种格式:1)时间戳 2)格式化的时间字符串 3)元组(struct_time):time.struct_time(tm_year=1970, tm_mon=5, tm_mday=23, tm_ ...

  6. java8 时间日期操作包总结

  7. java:类集框架conllection接口list,set

    类集中提供了以下几种接口: 1.单值操作接口:conllection,List,Set list和set是conllection接口的子接口 2.一对值的操作接口:Map 3.排序的操作接口:Sort ...

  8. LeetCode 1143 最长公共子序列

    链接:https://leetcode-cn.com/problems/longest-common-subsequence 给定两个字符串 text1 和 text2,返回这两个字符串的最长公共子序 ...

  9. dnsmasq+Stunnel+sniproxy加密代理

    一.环境介绍 [root@kimissVPN ~]# cat /etc/redhat-release CentOS release 6.8 (Final) [root@kimissVPN ~]# un ...

  10. 前端面试题常考&必考之--http中的post和get的区别

    从字面上看,post是发送,则是提交数据,get是获得,则是获取数据,没毛病,我们可以就按字面来理解 具体就看图吧 吐槽:插入的表格不好用,不知道是自己不会用还是真不好用,变成了截图,修饰了下子