常用函数,零散的JavaScript公用方法

前端基础进阶(10):面向对象实战之封装拖拽对象

2017/04/02 · JavaScript
·
面向对象

初稿出处: 波同学   

亚洲必赢官网 1

终于

眼前几篇小说,我跟大家大饱眼福了JavaScript的一些基础知识,这篇小说,将会跻身第四个实战环节:利用后面几章的所涉及到的学问,封装一个拖拽对象。为了可以协助大家精晓更加多的法子与拓展对照,我会使用二种不一样的办法来促成拖拽。

  • 不封装对象间接促成;
  • 选用原生JavaScript封装拖拽对象;
  • 经过扩大jQuery来贯彻拖拽对象。

正文的事例会停放于codepen.io中,供我们在阅读时直接查看。即使对于codepen不驾驭的同学,可以花点时间有些了解一下。

拖拽的兑现进程会波及到不行多的实用小知识,因而为了加固自身自己的文化积累,也为了大家能够学到更加多的学问,我会尽量详细的将一部分细节分享出来,相信我们认真读书之后,一定能学到一些事物。

复制代码 代码如下:

function stopBubble(e) {
if (e && e.stopPropagation) {//假如传入了轩然大波目的,那么就是非IE浏览器
e.stopPropagation();
} else {
window.event.cancelBubble = true;//使用IE的章程来撤废事件冒泡
}
}
function stopDefault(e) {
if (e && e.preventDefault) {
e.preventDefault();//幸免默许浏览器行为(W3C)
} else {
window.event.returnValue = false;
}
return false;
}

JavaScript常用脚本集中(三)

 本文给大家享用的常用脚本有经过数组,拓展字符串拼接不难导致性能的题材、页面
视口
滚动条的职责的协理函数、调节因素透明度的函数、获取鼠标地方的多少个通用的函数、使用cssdisplay属性来切换元素可知性的一组函数、样式相关的通用函数、获取元素当前的中度和宽度。

 

 

由此数组,拓展字符串拼接简单导致性能的问题

 

代码如下:

function StringBuffer() {
this.__strings__ = new Array();
}
StringBuffer.prototype.append = function (str) {
this.__strings__.push(str);
return this;
}
StringBuffer.prototype.toString = function () {
return this.__strings__.join(“”);
}
var buffer = new StringBuffer();
buffer.append(“Hello “).append(“javascript”);
var result = buffer.toString();
alert(result); //Hello javascript

页面 视口 滚动条的职位的提携函数

 

代码如下:

/*规定当前页面高度和宽窄的八个函数*/
function pageHeight() {
return document.body.scrollHeight;
}
function pageWidth() {
return document.body.scrollWidth;
}
/*确定滚动条水平和垂直的职分*/
function scrollX() {
var de = document.documentElement;
return self.pageXOffset || (de && de.scrollLeft) ||
document.body.scrollLeft;
}
function scrollY() {
var de = document.documentElement;
return self.pageYOffset || (de && de.scrollTop) ||
document.body.scrollTop;
}
/*确定浏览器视口的中度和幅度的八个函数*/
function windowHeight() {
var de = document.documentElement;
return self.innerHeight || (de && de.clientHeight) ||
document.body.clientHeight;
}
function windowWidth() {
var de = document.documentElement;
return self.innerWidth || (de && de.clientWidth) ||
document.body.clientWidth;
}

调剂因素透明度的函数

 

代码如下:

/*调节因素透明度的函数*/
function setOpacity(elem, level) {
//IE处理透明度
if (elem.filters) {
elem.style.filters = ‘alpha(opacity=’ + level + ‘)’;
亚洲必赢官网,} else {
elem.style.opacity = level / 100;
}
}

赢得鼠标地点的多少个通用的函数

 

代码如下:

/*三个通用函数,用于获取鼠标相对于整个页面的当前职分*/
function getX(e) {
e = e || window.event;
return e.pageX || e.clientX + document.body.scrollLeft;
}
function getY(e) {
e = e || window.event;
return e.pageY || e.clientY + document.body.scrollTop;
}
/*七个得到鼠标绝对于当下元素地点的函数*/
function getElementX(e) {
return (e && e.layerX) || window.event.offsetX;
}
function getElementY(e) {
return (e && e.layerY) || window.event.offsetY;
}

应用cssdisplay属性来切换元素可知性的一组函数

 

代码如下:

/**
* 使用display来隐藏元素的函数
* */
function hide(elem) {
var curDisplay = getStyle(elem, ‘display’);

 

if (curDisplay != ‘none’) {
elem.$oldDisplay = curDisplay;
}
elem.style.display = ‘none’;
}
/**
* 使用display来显示元素的函数
* */
function show(elem) {
elem.style.display = elem.$oldDisplay || ”;
}

体制相关的通用函数

 

代码如下:

/**
* 获取指定元素(elem)的体裁属性(name)
* */
function getStyle(elem, name) {
//如果存在于style[]中,那么它已被装置了(并且是现阶段的)
if (elem.style[name]) {
return elem.style[name];
}
//否则,测试IE的方法
else if (elem.currentStyle) {
return elem.currentStyle[name];
}
//或者W3C的方法
else if(document.defaultView &&
document.defaultView.getComputedStyle){
name = name.replace(/(A-Z)/g, “-$1”);
name = name.toLowerCase();
var s = document.defaultView.getComputedStyle(elem, “”);
return s && s.getPropertyValue(name);
}
//否则,用户使用的是其它浏览器
else {
return null;
}
}

取得元素当前的莫大和宽窄

 

代码如下:

/**
* 获取元素的诚实高度
* 依赖的getStyle见上边的函数。
* */
function getHeight(elem) {
return parseInt(getStyle(elem, ‘height’));
}
/**
* 获取元素的真正宽度
* 看重的getStyle见下边的函数
* */
function getWidth(elem) {
return parseInt(getStyle(elem, ‘width’));
}

如上就是本文分享的javascript常用脚本了,希望大家可以喜欢。

本文给我们大快朵颐的常用脚本有通过数组,拓展字符串拼接不难造成性能的题目、页面
视口 滚动条的义务的扶助…

1、怎样让一个DOM元素动起来

我们平常会通过修改元素的top,left,translate来其的职务暴发改变。在上边的例证中,每点击一回按钮,对应的因素就会活动5px。大家可点击查阅。

点击查阅一个让元素动起来的小例子

是因为修改一个要素top/left值会滋生页面重绘,而translate不会,因而从性能优化上来判断,大家会事先使用translate属性。

//获取元素的样式值。
function getStyle(elem,name){
if(elem.style[name]){
return elem.style[name];
}else if(elem.currentStyle){
return elem.currentStyle[name];
}else if(document.defaultView&&document.defaultView.getComputedStyle){
name=name.replace(/([A-Z])/g,”-$1″);
name=name.toLowerCase();
var s=document.defaultView.getComputedStyle(elem,””);
return s&&s.getPropertyValue(name);
}else{
return null
}
}
//获取元素相对于那一个页面的x和y坐标。
function pageX(elem){
return
elem.offsetParent?(elem.offsetLeft+pageX(elem.offsetParent)):elem.offsetLeft;
}
function pageY(elem){
return
elem.offsetParent?(elem.offsetTop+pageY(elem.offsetParent)):elem.offsetTop;
}
//获取元素相对于父元素的x和y坐标。
function parentX(elem){
return
elem.parentNode==elem.offsetParent?elem.offsetLeft:pageX(elem)-pageX(elem.parentNode);
}
function parentY(elem){
return
elem.parentNode==elem.offsetParent?elem.offsetTop:pageY(elem)-pageY(elem.parentNode);
}
//获取使用css定位的因素的x和y坐标。
function posX(elem){
return parseInt(getStyle(elem,”left”));
}
function posY(elem){
return parseInt(getStyle(elem,”top”));
}
//设置元素地方。
function setX(elem,pos){
elem.style.left=pos+”px”;
}
function setY(elem,pos){
elem.style.top=pos+”px”;
}
//增法郎素X和y坐标。
function addX(elem,pos){
set(elem,(posX(elem)+pos));
}
function addY(elem,pos){
set(elem,(posY(elem)+pos));
}
//获取元素采纳css控制大小的中度和宽窄
function getHeight(elem){
return parseInt(getStyle(elem,”height”));
}
function getWidth(elem){
常用函数,零散的JavaScript公用方法。return parseInt(getStyle(elem,”width”));
}
//获取元素可能,完整的可观和增幅
function getFullHeight(elem){
if(getStyle(elem,”display”)!=”none”){
return getHeight(elem)||elem.offsetHeight;
}else{
var
old=resetCss(elem,{display:”block”,visibility:”hidden”,position:”absolute”});
var h=elem.clientHeight||getHeight(elem);
restoreCss(elem,old);
return h;
}
}
function getFullWidth(elem){
if(getStyle(elem,”display”)!=”none”){
return getWidth(elem)||elem.offsetWidth;
}else{
var
old=resetCss(elem,{display:”block”,visibility:”hidden”,position:”absolute”});
var w=elem.clientWidth||getWidth(elem);
restoreCss(elem,old);
return w;
}
}
//设置css,并保存旧的css
function resetCss(elem,prop){
var old={};
for(var i in prop){
old[i]=elem.style[i];
elem.style[i]=prop[i];
}
return old;
}
function restoreCss(elem,prop){
for(var i in prop){
elem.style[i]=prop[i];
}
}
//显示和潜伏
function show(elem){
elem.style.display=elem.$oldDisplay||” “;
}
function hide(elem){
var curDisplay=getStyle(elem,”display”);
if(curDisplay!=”none”){
elem.$oldDisplay=curDisplay;
elem.style.display=”none”;
}
}
//设置透明度
function setOpacity(elem,num){
if(elem.filters){
elem.style.filter=”alpha(opacity=”+num+”)”;
}else{
elem.style.opacity=num/100;
}
}
//滑动
function slideDown(elem){
var h=getFullHeight(elem);
elem.style.height=”0px”;
show(elem);
for(var i=0;i<=100;i+=5){
new function(){
var pos=i;
setTimeout(function(){elem.style.height=(pos/100*h)+”px”;},(pos*10));
}
}
}
//渐变
function fadeIn(elem){
show(elem);
setOpacity(elem,0);
for(var i=0;i<=100;i+=5){
new function(){
var pos=i;
setTimeout(function(){setOpacity(elem,pos);},(pos+1)*10);
}
}
}
//获取鼠标光标相对于任何页面的位置。
function getX(e){
e=e||window.event;
return e.pageX||e.clientX+document.body.scrollLeft;
}
function getY(e){
e=e||window.event;
return e.pageY||e.clientY+document.body.scrollTop;
}
//获取鼠标光标相对于当下因素的职位。
function getElementX(e){
return (e&&e.layerX)||window.event.offsetX;
}
function getElementY(e){
return (e&&e.layerY)||window.event.offsetY;
}
//获取页面的中度和幅度
function getPageHeight(){
var de=document.documentElement;
return document.body.scrollHeight||(de&&de.scrollHeight);
}
function getPageWidth(){
var de=document.documentElement;
return document.body.scrollWidth||(de&&de.scrollWidth);
}
//获取滚动条的职位。
function scrollX(){
var de=document.documentElement;
return
self.pageXOffset||(de&&de.scrollLeft)||document.body.scrollLeft;
}
function scrollY(){
var de=document.documentElement;
return self.pageYOffset||(de&&de.scrollTop)||document.body.scrollTop;
}
//获取视口的冲天和幅度。
function windowHeight() {
var de = document.documentElement;
return self.innerHeight||(de &&
de.offsetHeight)||document.body.offsetHeight;
}
function windowWidth() {
var de = document.documentElement;
return self.innerWidth||( de && de.offsetWidth
)||document.body.offsetWidth;
}

function addEvent(element, type, handler) {
if (!handler.$$guid) {//为每一个事件处理函数赋予一个独门的ID
handler.$$guid = addEvent.guid++;
}
if (!element.events) {//为元素建立一个轩然大波类型的散列表
element.events = {};
}
var handlers = element.events[type];
if (!handler) {
handlers = element.events[type] = {};
if (element[“on” + type])
{//存储已部分事件处理函数(要是已经存在一个)
handlers[0] = element[“on” + type];
}
}
handlers[handler.$$guid] = handler;//在散列表中存在该事件处理函数
element[“on” + type] = handleEvent;
}
add伊夫nt.guid = 1;//创立独立ID的计数器
function remove伊芙nt(element, type, handler)
{//从散列表中除去事件处理函数
if (element.events && element.events[type]) {
delete element.events[type][handler.$$guid];
}
}
function handleEvent(event) {
var returnValue = true;
event = event ||
fix伊夫nt(window.event);//得到事件目的(IE使用全局的风云目标)
var handlers =
this.events[event.type];//获得事件处理函数散列表的引用
for (var i in handlers) {//依次执行种种事件处理函数
this.$$handlerEvent = handlers[i];
if (this.$$handlerEvent(event) === false) {
returnValue = false;
}
}
return returnValue;
}
function fix伊芙nt(event) {//增加一些IE事件目的的短缺的不二法门
event.preventDefault = fix伊夫nt.preventDefault;//扩大W3C标准事件措施
event.stopPropagation = fixEvent.stopPropagation;
return event;
}
fixEvent.preventDefault = function () {
this.returnValue = false;
}
fixEvent.stopPropagation = function () {
this.cancelBubble = true;
}
//获取指定元素elem的体裁属性
function getStyle(elem, name) {
if (elem.style[name])
{//假诺属性存在于style[]中,那么它已被装置了(并且是时下的)
return elem.style[name];
} else {
if (elem.currentStyle) {//尝试使用IE的情势
return elem.currentStyle[name];
} else if (document.defaultView &&
document.defaultView.getComputedStyle) {//或者W3C的办法,倘诺存在的话
//name=name.replace(/([A-Z)/g,”-$1″);
name = name.toLowerCase();
var s = document.defaultView.getComputedStyle(elem,
”);//获取样式对象并取得属性(存在的话)值
return s && s.getPropertyValue(name);
} else {
return null;
}
}
}
//获取元素的X(水平、左端)地方
function pageX(elem) {
return elem.offsetParent ?//查看大家是还是不是位于根元素
elem.offsetLeft + pageX(elem.offsetParent)
://假若大家能继承取得上一个要素,扩充当前的偏移量并无冕上扬递归
elem.offsetLeft;//否则得到当前的偏移量
}
//得到元素Y(垂直、顶端)地方
function pageY(elem) {
return elem.offsetParent ?//查看大家是或不是位于根元素
elem.offsetTop + pageY(elem.offsetParent)
://若是能继续取得上一个要素,增加当前的偏移量并继续进步递归
elem.offsetTop;//否则获取当前的偏移量
}
//获取元素相对于小叔的程度地点
function parentX(elem) {
return elem.parentNode == elem.offsetParent
?//假如offsetParent是因素的二叔,那么提前退出
elem.offsetLeft :
pageX(elem) –
pageX(elem.parentNode);//否则,大家要求找到元素和要素的二叔相对于一切页面地点,并统计他们前边的差
}
//获取元素相对于二叔的垂直地方
function parentY(elem) {
return elem.parentNode == elem.offsetParent
?//固然offsetParent是因素的生父,那么提前退出
elem.offsetTop :
pageX(elem) –
pageY(elem.parentNode);//否则,大家须要找到元素和要素的二伯相对于整个页面地点,并盘算他们后面的差
}
//苏醒css原的性能值 幸免reset css函数副功效的函数
function restoreCSS(elem, prop) {
for (var i in prop) {//重置所有属性,復苏它们的原有值
elem.style[i] = prop[i];
}
}
//设置CSS一组属性的函数,它可以恢复生机到原始设置
function resetCSS(elem, prop) {
var old = [];
for (var i in prop) {
old[i] = elem.style[i];//记录旧的属性值
elem.style[i] = prop[i];//并安装新的值
}
return old;//再次来到已经变更的值集合,预留给restoreCSS函数使用
}
function getHeight(elem) {//获得元素的诚实中度
return parseInt(getStyle(elem,
‘height’));//得到CSS的尾声值并分析出可用的数值
}
function getWidth(elem) {//得到元素的忠实宽度
return parseInt(getStyle(elem,
‘width’));//获得CSS的最终值并分析出可用的数值
}
//查找元素完整的,可能的中度
function fullHeight(elem) {
//如果元素是显得的,那么使用offsetHeight就能收获可观,若是没有offsetHeight,则应用getHeight()
if (getStyle(elem, ‘display’) != ‘none’) {
return elem.offsetHeight || getHeight(elem);
}
//处理display为none的元素,所以重置它的css属性以取得更准确的读数
var old = resetCSS(elem, {
display: ”,
visibility: ‘hidden’,
position: ‘absolute’
});
var h = elem.clientHeight ||
getHeight(elem);//使用clientHeihgt找到元素的共同体中度,假诺还不见效,则使用getHeight函数
restoreCSS(elem, old);//恢复生机css原的性质
return h;//再次回到元素的完整中度
}
//查找元素完整的,可能的幅度
function fullWidth(elem) {
//假设元素是显得的,那么使用offsetWidth就能获取可观,倘诺没有offsetHeight,则接纳getHeight()
if (getStyle(elem, ‘display’) != ‘none’) {
return elem.offsetWidth || getWidth(elem);
}
//处理display为none的元素,所以重置它的css属性以得到更确切的读数
var old = resetCSS(elem, {
display: ”,
visibility: ‘hidden’,
position: ‘absolute’
});
var h = elem.clientWidth ||
getWidth(elem);//使用clientWidth找到元素的完全高度,如若还不见效,则利用getWidth函数
restoreCSS(elem, old);//苏醒css原的性质
return h;//重回元素的完好高度
}

相关小说

连带搜索:

后天看啥

查找技术库

回去首页

  • 隐性调用php程序的主意
  • 浅谈JavaScript中的Math.atan()方法的应用
  • JavaScript中反正弦函数Math.asin()的施用简介
  • JavaScript中的acos()方法运用详解
  • 介绍JavaScript中Math.abs()方法的利用
  • JavaScript中Math.SQRT2属性的运用详解

连锁频道:
HTML/CSS  HTML5  Javascript  jQuery  AJax教程  前者代码  正则表明式  Flex教程  WEB前端教程  

2、怎样得到当前浏览器接济的transform包容写法

transform是css3的性能,当大家利用它时就只能面对兼容性的题目。分裂版本浏览器的非凡写法大约有如下两种:

['transform', 'webkitTransform', 'MozTransform', 'msTransform', 'OTransform']

就此大家须要看清当前浏览器环境帮忙的transform属性是哪一类,方法如下:

JavaScript

// 获取当前浏览器协助的transform包容写法 function getTransform() { var
transform = ”, divStyle = document.createElement(‘div’).style, //
可能涉及到的三种兼容性写法,通过巡回找出浏览器识其余那些 transformArr
= [‘transform’, ‘webkitTransform’, ‘MozTransform’, ‘msTransform’,
‘OTransform’], i = 0, len = transformArr.length; for(; i < len; i++)
{ if(transformArr[i] in divStyle) { // 找到之后随即回到,截止函数
return transform = transformArr[i]; } } //
假设没有找到,就一向回到空字符串 return transform; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// 获取当前浏览器支持的transform兼容写法
function getTransform() {
    var transform = ”,
        divStyle = document.createElement(‘div’).style,
        // 可能涉及到的几种兼容性写法,通过循环找出浏览器识别的那一个
        transformArr = [‘transform’, ‘webkitTransform’, ‘MozTransform’, ‘msTransform’, ‘OTransform’],
 
        i = 0,
        len = transformArr.length;
 
    for(; i < len; i++)  {
        if(transformArr[i] in divStyle) {
            // 找到之后立即返回,结束函数
            return transform = transformArr[i];
        }
    }
 
    // 如果没有找到,就直接返回空字符串
    return transform;
}

该格局用于获取浏览器协理的transform属性。借使回到的为空字符串,则代表如今浏览器并不援救transform,那么些时候大家就必要采用left,top值来改变元素的职位。假使援救,就改变transform的值。

您可能感兴趣的篇章:

  • jQuery常用知识点统计以及常常包裹常用函数
  • 据悉jquery封装的一个js分页
  • jquery数组封装使用办法分享(jquery数组遍历)
  • Jquery封装tab自动切换效果的现实贯彻
  • jquery自动将form表单封装成json的求实完毕
  • jquery
    datatable后台封装数据示例代码
  • jQuery要旨图切换特效插件封装实例
  • 按照jquery的用dl模拟完毕可自定义样式的SELECT下拉列表(已打包)
  • jQueryUI的Dialog的简便包装
  • 【经典源码收藏】基于jQuery的品种常见函数封装集合

function hide(elem) {//隐藏元素
var curDisplay = getStyle(elem, ‘display’);//找到元素display的眼前意况
if (curDisplay != ‘none’) {//记录它的display状态
elem.$oldDisplay = curDisplay;
}
elem.style.display = ‘none’;//设置display为none 隐藏元素
}
function show(elem) {//突显元素
elem.style.display = elem.$oldDisplay ||
”;//设置display属性为它的原始值,如没有记录原始值 则采纳block
}

帮客评论

3、 怎么样得到元素的早先地点

咱俩先是要求取获得对象元素的先河地方,由此那里大家须求一个专程用来得到元素样式的法力函数。

可是获取元素样式在IE浏览器与任何浏览器有一些见仁见智,因而我们需求一个包容性的写法。

JavaScript

function getStyle(elem, property) { //
ie通过currentStyle来赢得元素的体制,其他浏览器通过getComputedStyle来获取
return document.defaultView.getComputedStyle ?
document.defaultView.getComputedStyle(elem, false)[property] :
elem.currentStyle[property]; }

1
2
3
4
function getStyle(elem, property) {
    // ie通过currentStyle来获取元素的样式,其他浏览器通过getComputedStyle来获取
    return document.defaultView.getComputedStyle ? document.defaultView.getComputedStyle(elem, false)[property] : elem.currentStyle[property];
}

有了这几个主意之后,就可以起来出手写获取目的元素开第三地方的艺术了。

JavaScript

function getTargetPos(elem) { var pos = {x: 0, y: 0}; var transform =
getTransform(); if(transform) { var transformValue = getStyle(elem,
transform); if(transformValue == ‘none’) { elem.style[transform] =
‘translate(0, 0)’; return pos; } else { var temp =
transformValue.match(/-?\d+/g); return pos = { x:
parseInt(temp[4].trim()), y: parseInt(temp[5].trim()) } } } else {
if(getStyle(elem, ‘position’) == ‘static’) { elem.style.position =
‘relative’; return pos; } else { var x = parseInt(getStyle(elem, ‘left’)
? getStyle(elem, ‘left’) : 0); var y = parseInt(getStyle(elem, ‘top’) ?
getStyle(elem, ‘top’) : 0); return pos = { x: x, y: y } } } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
function getTargetPos(elem) {
    var pos = {x: 0, y: 0};
    var transform = getTransform();
    if(transform) {
        var transformValue = getStyle(elem, transform);
        if(transformValue == ‘none’) {
            elem.style[transform] = ‘translate(0, 0)’;
            return pos;
        } else {
            var temp = transformValue.match(/-?\d+/g);
            return pos = {
                x: parseInt(temp[4].trim()),
                y: parseInt(temp[5].trim())
            }
        }
    } else {
        if(getStyle(elem, ‘position’) == ‘static’) {
            elem.style.position = ‘relative’;
            return pos;
        } else {
            var x = parseInt(getStyle(elem, ‘left’) ? getStyle(elem, ‘left’) : 0);
            var y = parseInt(getStyle(elem, ‘top’) ? getStyle(elem, ‘top’) : 0);
            return pos = {
                x: x,
                y: y
            }
        }
    }
}

在拖拽进程中,大家要求不停的设置目的元素的新职分,那样它才会移动起来,因而大家必要一个装置目标元素地点的法门。

JavaScript

// pos = { x: 200, y: 100 } function setTargetPos(elem, pos) { var
transform = getTransform(); if(transform) { elem.style[transform] =
‘translate(‘+ pos.x +’px, ‘+ pos.y +’px)’; } else { elem.style.left =
pos.x + ‘px’; elem.style.top = pos.y + ‘px’; } return elem; }

1
2
3
4
5
6
7
8
9
10
11
// pos = { x: 200, y: 100 }
function setTargetPos(elem, pos) {
    var transform = getTransform();
    if(transform) {
        elem.style[transform] = ‘translate(‘+ pos.x +’px, ‘+ pos.y +’px)’;
    } else {
        elem.style.left = pos.x + ‘px’;
        elem.style.top = pos.y + ‘px’;
    }
    return elem;
}

function setOpacity(elem, level) {//设置元素透明度 级别从0-100
if (elem.filters) {//假使存在filters这么些属性 则它是IE
所以设置元素的Alpha滤镜
elem.style.filters = “alpha(opacity=” + level + “)”;
} else {
elem.style.opacity = level / 100;//使用W3C的opacity属性
}
}
function slideDown(elem) {
elem.style.height = ‘0px’;//从0中度开头滑动
show(elem);//先呈现元素(不过看不到它,因为它的惊人是0)
var h = fullHeight(elem);//找到元素的共同体的神秘中度
for (var i = 0; i <= 100; i += 5) {//在一分钟内推行一个20帧的动画
//有限支撑可以维持正确的i的闭包函数
(function () {
var pos = i;
setTimeout(function () {
elem.style.height = ((pos / 100) * h) + ‘px’;
}, (pos + 1) * 10);
})();
}
}
function fadeIn(elem) {
setOpacity(elem, 0);//从0透明度开首
show(elem);//先突显元素(可是看不到它,因为它的透明度是0)
for (var i = 0; i <= 100; i += 5) {//在一分钟内执行一个20帧的卡通片
//有限支撑可以维持正确的i的闭包函数
(function () {
var pos = i;
setTimeout(function () {
setOpacity(elem, pos);
}, (pos + 1) * 10);
})();
}
}
function getX(e) {//获取光标的程度地点
e = e || window.event;//标准化事件目标
return e.pageX || e.clientX +
document.body.scrollLeft;//先检查非IE浏览器的职位,再检查IE的地方
}
function getY(e) {//获取光标的垂直地方
e = e || window.event;//标准化事件目的
return e.pageY || e.clientY +
document.body.scrollTop;//先检查非IE浏览器的岗位,再检查IE的职分
}
function getElementX(e)
{//得到鼠标绝对于近期因素(事件对象e的性质target)的X地方
return (e && e.layerX) || window.event.offsetX;//获得不错的偏移量
}
function getElementY(e)
{//得到鼠标相对于近年来元素(事件对象e的性能target)的Y地方
return (e && e.layerY) || window.event.offsetY;//获得不错的偏移量
}
function pageHeight() {//重返页面的惊人(增加内容的时候恐怕会改变)
return document.body.scrollHeight;
}
function pageWidth() {//重返页面的小幅(伸张内容的时候也许会改变)
return document.body.scrollWidth;
}
function scrollX() {//确定浏览器水平滚动地方的函数
var de = document.documentElement;
return self.pageXOffset ||//假设浏览器存在pageXOffset属性 则利用它
(de || de.scrollLeft) ||//尝试获取根节点的左端滚动的偏移量
document.body.scrollLeft;//尝试获取body元素的左端滚动的偏移量
}
function scrollY() {//确定浏览器垂直滚动地点的函数
var de = document.documentElement;
return self.pageYOffset ||//假使浏览器存在pageYOffset属性 则运用它
(de || de.scrollTop) ||//尝试获取根节点的上边滚动的偏移量
document.body.scrollTop;//尝试得到body元素的下边滚动的偏移量
}
function windowHeight() {//获取视口的中度
var de = document.documentElement;
return self.innerHeight ||////要是浏览器存在innerHeight属性 则使用它
(de && de.clientHeight) ||//尝试获取根节点的冲天偏移量
document.body.clientHeight;//尝试获取body元素的中度偏移量
}
function windowWidth() {//获取视口的幅度
var de = document.documentElement;
return self.innerWidth ||////假设浏览器存在innerWidth属性 则使用它
(de && de.clientWidth) ||//尝试获取根节点的莫大偏移量
document.body.clientWidth;//尝试获取body元素的可观偏移量
}

5、大家须求用到什么样事件?

在pc上的浏览器中,结合mousedown、mousemove、mouseup那多少个事件可以辅助大家完成拖拽。

  • mousedown 鼠标按下时接触
  • mousemove 鼠标按下后拖动时接触
  • mouseup 鼠标甩手时触发

而在移动端,分别与之对应的则是touchstart、touchmove、touchend

当大家将元素绑定那个事件时,有一个风浪目标将会作为参数传递给回调函数,通过事件目的,大家得以拿走到近来鼠标的确切地点,鼠标地点音信是落到实处拖拽的紧要。

事件目的尤其关键,其中富含了这个多的管事的音信,这里我就不增添了,大家可以在函数将官事件指标打印出来查看里面的求实性质,这几个办法对于记不清事件目的首要性质的童鞋格外管用。

 随机数公式:

6、拖拽的规律

当事件触发时,大家可以通过事件目标获获得鼠标的精切地方。这是落到实处拖拽的主要。当鼠标按下(mousedown触发)时,大家要求牢记鼠标的起初地方与目的元素的上马地方,大家的靶子就是完结当鼠标移动时,目的元素也跟着移动,根据原理大家可以得出如下事关:

活动后的鼠标地点 – 鼠标开头地方 = 移动后的对象元素地点 –
目标元素的起来地点

1
移动后的鼠标位置 – 鼠标初始位置 = 移动后的目标元素位置 – 目标元素的初始位置

只要鼠标地点的差值我们用dis来代表,那么目标元素的职位就相当于:

举手投足后目标元素的岗位 = dis + 目的元素的早先地方

1
移动后目标元素的位置 = dis + 目标元素的初始位置

因此事件目的,大家得以规范的精晓鼠标的脚下岗位,由此当鼠标拖动(mousemove)时,我们得以不停的持筹握算出鼠标移动的差值,以此来求出目标元素的如今岗位。这一个进程,就落实了拖拽。

而在鼠标松手(mouseup)为止拖拽时,大家必要处理部分了却工作。详情见代码。

亚洲必赢官网 2

7、 我又来推举思维导图协助写代码了

时常有新娘朋友跑来问我,假使逻辑思维能力不强,能不可能写代码做前端。我的答案是:能。因为依靠思维导图,可以很自在的弥补逻辑的短板。而且比在团结头脑中脑补逻辑更是清晰明了,不易出错。

地点第六点我介绍了规律,因而如何做就突显不是那么难了,而现实的手续,则在下边的思索导图中有目共睹给出,大家只要求依据这几个手续来写代码即可,试试看,一定很轻松。

亚洲必赢官网 3

行使思维导图清晰的表明出任何拖拽进度大家需求干的事体

 

8、代码完结

part1、准备干活

JavaScript

// 获取目的元素对象 var oElem = document.getElementById(‘target’); //
声明2个变量用来保存鼠标开头地点的x,y坐标 var startX = 0; var startY =
0; // 注脚2个变量用来保存目的元素初步地方的x,y坐标 var sourceX = 0; var
sourceY = 0;

1
2
3
4
5
6
7
8
9
10
// 获取目标元素对象
var oElem = document.getElementById(‘target’);
 
// 声明2个变量用来保存鼠标初始位置的x,y坐标
var startX = 0;
var startY = 0;
 
// 声明2个变量用来保存目标元素初始位置的x,y坐标
var sourceX = 0;
var sourceY = 0;

part2、功用函数

因为前边曾经贴过代码,就不再重复

JavaScript

// 获取当前浏览器辅助的transform包容写法 function getTransform() {} //
获取元素属性 function getStyle(elem, property) {} // 获取元素的初阶地方function getTargetPos(elem) {} // 设置元素的上马地方 function
setTargetPos(elem, potions) {}

1
2
3
4
5
6
7
8
9
10
11
// 获取当前浏览器支持的transform兼容写法
function getTransform() {}
 
// 获取元素属性
function getStyle(elem, property) {}
 
// 获取元素的初始位置
function getTargetPos(elem) {}
 
// 设置元素的初始位置
function setTargetPos(elem, potions) {}

part3、注脚多个事件的回调函数

那五个措施就是促成拖拽的着力所在,我将严苛根据上面思维导图中的步骤来形成大家的代码。

JavaScript

// 绑定在mousedown上的回调,event为流传的轩然大波目的 function start(event)
{ // 获取鼠标初阶位置 startX = event.pageX; startY = event.pageY; //
获取元素开首地方 var pos = getTargetPos(oElem); sourceX = pos.x; sourceY
= pos.y; // 绑定 document.add伊夫(Eve)ntListener(‘mousemove’, move, false);
document.add伊夫(Eve)ntListener(‘mouseup’, end, false); } function move(event)
{ // 获取鼠标当前义务 var currentX = event.pageX; var currentY =
event.pageY; // 总括差值 var distanceX = currentX – startX; var
distanceY = currentY – startY; // 总计并安装元素当前岗位
setTargetPos(oElem, { x: (sourceX + distanceX).toFixed(), y: (sourceY +
distanceY).toFixed() }) } function end(event) {
document.remove伊夫ntListener(‘mousemove’, move);
document.remove伊芙ntListener(‘mouseup’, end); // do other things }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
// 绑定在mousedown上的回调,event为传入的事件对象
function start(event) {
    // 获取鼠标初始位置
    startX = event.pageX;
    startY = event.pageY;
 
    // 获取元素初始位置
    var pos = getTargetPos(oElem);
 
    sourceX = pos.x;
    sourceY = pos.y;
 
    // 绑定
    document.addEventListener(‘mousemove’, move, false);
    document.addEventListener(‘mouseup’, end, false);
}
 
function move(event) {
    // 获取鼠标当前位置
    var currentX = event.pageX;
    var currentY = event.pageY;
 
    // 计算差值
    var distanceX = currentX – startX;
    var distanceY = currentY – startY;
 
    // 计算并设置元素当前位置
    setTargetPos(oElem, {
        x: (sourceX + distanceX).toFixed(),
        y: (sourceY + distanceY).toFixed()
    })
}
 
function end(event) {
    document.removeEventListener(‘mousemove’, move);
    document.removeEventListener(‘mouseup’, end);
    // do other things
}

OK,一个简约的拖拽,就那样高兴的完毕了。点击上面的链接,可以在线查看该例子的demo。

利用原生js达成拖拽

9、封装拖拽对象

在前头一章我给大家分享了面向对象如何完成,基于这些基础知识,我们来将下边达成的拖拽封装为一个拖拽对象。大家的靶子是,只要大家声贝拉米(Bellamy)个拖拽实例,那么传入的对象元素将活动具备能够被拖拽的功力。

在其实支付中,一个目的大家平常会独自放在一个js文件中,那么些js文件将独自作为一个模块,利用各类模块的方法社团起来使用。当然那里没有复杂的模块交互,因为这么些事例,大家只要求一个模块即可。

为了防止变量污染,大家须求将模块放置于一个函数自实施办法模拟的块级成效域中。

JavaScript

; (function() { … })();

1
2
3
4
;
(function() {
    …
})();

在平凡的模块协会中,大家只是独自的将众多js文件收缩成为一个js文件,因而那里的率先个支行则是为着防备上一个模块的末梢不用分号导致报错。必不可少。当然在经过require或者ES6模块等措施就不会现出那样的情况。

我们领略,在卷入一个目的的时候,大家可以将性能与方法放置于构造函数或者原型中,而在增加了自实施函数之后,我们又可以将性能和措施避免与模块的里边成效域。那是闭包的学识。

那么大家面临的挑衅就在于,如何客观的处理属性与艺术的职位。

理所当然,每一个目的的意况都分歧,不能天公地道,我们要求显著的通晓那两种职位的特色才能做出最契合的决定。

  • 构造函数中:
    属性与方法为当下实例单独拥有,只可以被眼前实例访问,并且每声贝拉米(贝拉米(Bellamy))个实例,其中的章程都会被重复成立一回。
  • 原型中:
    属性与措施为持有实例共同持有,可以被抱有实例访问,新声明实例不会再次创制方法。
  • 模块效率域中:属性和艺术不可以被此外实例访问,不过能被内部方法访问,新注脚的实例,不会再度创立相同的艺术。

对此艺术的判断相比较不难。

因为在构造函数中的方法总会在宣称一个新的实例时被重新创制,由此大家声明的主意都尽量幸免出现在构造函数中。

而只要您的措施中需要用到构造函数中的变量,或者想要公开,那就必要放在原型中。

一经措施须求个人不被外边访问,那么就停放在模块成效域中。

对此属性放置于怎样职位有些时候很难做出正确的判定,由此我很难交付一个标准的概念告诉你哪些性质一定要放在怎么样地方,那亟需在实际支付中不断的总计经验。不过总的来说,仍旧要结成那七个地方的特点来做出最合适的判定。

一经属性值只好被实例单独拥有,比如person对象的name,只好属于某一个person实例,又比如那里拖拽对象中,某一个元素的开始地方,也仅仅只是这些因素的近期地方,那个特性,则吻合放在构造函数中。

而一旦一个性能仅仅供内部方法访问,这些特性就符合放在模块功能域中。

有关面向对象,上面的几点考虑自身以为是那篇小说最值得认真思考的精华。即使在封装时没有思想清楚,很可能会遇到许多你不意的bug,所以提议大家结合自己的费用经历,多多考虑,总括出团结的眼光。

据悉这几个思考,我们可以协调尝试封装一下。然后与本人的做一些相对而言,看看大家的想法有怎么样分化,在上面例子的评释中,我将团结的想法表明出来。

点击查看已经封装好的demo

js 源码

JavaScript

; (function() { // 那是一个个体属性,不需求被实例访问 var transform =
getTransform(); function Drag(selector) { //
放在构造函数中的属性,都是属于每一个实例单独拥有 this.elem = typeof
selector == ‘Object’ ? selector : document.getElementById(selector);
this.startX = 0; this.startY = 0; this.sourceX = 0; this.sourceY = 0;
this.init(); } // 原型 Drag.prototype = { constructor: Drag, init:
function() { // 开头时索要做些什么业务 this.setDrag(); }, //
稍作改造,仅用于获取当前因素的特性,类似于getName getStyle:
function(property) { return document.defaultView.getComputedStyle ?
document.defaultView.getComputedStyle(this.elem, false)[property] :
this.elem.currentStyle[property]; }, //
用来取得当前元素的职责音讯,注意与事先的不一样之处 getPosition: function()
{ var pos = {x: 0, y: 0}; if(transform) { var transformValue =
this.getStyle(transform); if(transformValue == ‘none’) {
this.elem.style[transform] = ‘translate(0, 0)’; } else { var temp =
transformValue.match(/-?\d+/g); pos = { x: parseInt(temp[4].trim()),
y: parseInt(temp[5].trim()) } } } else { if(this.getStyle(‘position’)
== ‘static’) { this.elem.style.position = ‘relative’; } else { pos = {
x: parseInt(this.getStyle(‘left’) ? this.getStyle(‘left’) : 0), y:
parseInt(this.getStyle(‘top’) ? this.getStyle(‘top’) : 0) } } } return
pos; }, // 用来安装当前因素的职责 setPostion: function(pos) {
if(transform) { this.elem.style[transform] = ‘translate(‘+ pos.x +’px,
‘+ pos.y +’px)’; } else { this.elem.style.left = pos.x + ‘px’;
this.elem.style.top = pos.y + ‘px’; } }, // 该方法用来绑定事件 setDrag:
function() { var self = this; this.elem.add伊芙(Eve)ntListener(‘mousedown’,
start, false); function start(event) { self.startX = event.pageX;
self.startY = event.pageY; var pos = self.getPosition(); self.sourceX =
pos.x; self.sourceY = pos.y; document.add伊夫ntListener(‘mousemove’,
move, false); document.add伊芙(Eve)ntListener(‘mouseup’, end, false); }
function move(event) { var currentX = event.pageX; var currentY =
event.pageY; var distanceX = currentX – self.startX; var distanceY =
currentY – self.startY; self.setPostion({ x: (self.sourceX +
distanceX).toFixed(), y: (self.sourceY + distanceY).toFixed() }) }
function end(event) { document.remove伊夫(Eve)ntListener(‘mousemove’, move);
document.remove伊芙ntListener(‘mouseup’, end); // do other things } } }
// 私有方法,仅仅用来获取transform的匹配写法 function getTransform() {
var transform = ”, divStyle = document.createElement(‘div’).style,
transformArr = [‘transform’, ‘webkitTransform’, ‘MozTransform’,
‘msTransform’, ‘OTransform’], i = 0, len = transformArr.length; for(; i
< len; i++) { if(transformArr[i] in divStyle) { return transform =
transformArr[i]; } } return transform; } // 一种对外暴光的法子
window.Drag = Drag; })(); // 使用:评释2个拖拽实例 new Drag(‘target’);
new Drag(‘target2’);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
;
(function() {
    // 这是一个私有属性,不需要被实例访问
    var transform = getTransform();
 
    function Drag(selector) {
        // 放在构造函数中的属性,都是属于每一个实例单独拥有
        this.elem = typeof selector == ‘Object’ ? selector : document.getElementById(selector);
        this.startX = 0;
        this.startY = 0;
        this.sourceX = 0;
        this.sourceY = 0;
 
        this.init();
    }
 
 
    // 原型
    Drag.prototype = {
        constructor: Drag,
 
        init: function() {
            // 初始时需要做些什么事情
            this.setDrag();
        },
 
        // 稍作改造,仅用于获取当前元素的属性,类似于getName
        getStyle: function(property) {
            return document.defaultView.getComputedStyle ? document.defaultView.getComputedStyle(this.elem, false)[property] : this.elem.currentStyle[property];
        },
 
        // 用来获取当前元素的位置信息,注意与之前的不同之处
        getPosition: function() {
            var pos = {x: 0, y: 0};
            if(transform) {
                var transformValue = this.getStyle(transform);
                if(transformValue == ‘none’) {
                    this.elem.style[transform] = ‘translate(0, 0)’;
                } else {
                    var temp = transformValue.match(/-?\d+/g);
                    pos = {
                        x: parseInt(temp[4].trim()),
                        y: parseInt(temp[5].trim())
                    }
                }
            } else {
                if(this.getStyle(‘position’) == ‘static’) {
                    this.elem.style.position = ‘relative’;
                } else {
                    pos = {
                        x: parseInt(this.getStyle(‘left’) ? this.getStyle(‘left’) : 0),
                        y: parseInt(this.getStyle(‘top’) ? this.getStyle(‘top’) : 0)
                    }
                }
            }
 
            return pos;
        },
 
        // 用来设置当前元素的位置
        setPostion: function(pos) {
            if(transform) {
                this.elem.style[transform] = ‘translate(‘+ pos.x +’px, ‘+ pos.y +’px)’;
            } else {
                this.elem.style.left = pos.x + ‘px’;
                this.elem.style.top = pos.y + ‘px’;
            }
        },
 
        // 该方法用来绑定事件
        setDrag: function() {
            var self = this;
            this.elem.addEventListener(‘mousedown’, start, false);
            function start(event) {
                self.startX = event.pageX;
                self.startY = event.pageY;
 
                var pos = self.getPosition();
 
                self.sourceX = pos.x;
                self.sourceY = pos.y;
 
                document.addEventListener(‘mousemove’, move, false);
                document.addEventListener(‘mouseup’, end, false);
            }
 
            function move(event) {
                var currentX = event.pageX;
                var currentY = event.pageY;
 
                var distanceX = currentX – self.startX;
                var distanceY = currentY – self.startY;
 
                self.setPostion({
                    x: (self.sourceX + distanceX).toFixed(),
                    y: (self.sourceY + distanceY).toFixed()
                })
            }
 
            function end(event) {
                document.removeEventListener(‘mousemove’, move);
                document.removeEventListener(‘mouseup’, end);
                // do other things
            }
        }
    }
 
    // 私有方法,仅仅用来获取transform的兼容写法
    function getTransform() {
        var transform = ”,
            divStyle = document.createElement(‘div’).style,
            transformArr = [‘transform’, ‘webkitTransform’, ‘MozTransform’, ‘msTransform’, ‘OTransform’],
 
            i = 0,
            len = transformArr.length;
 
        for(; i < len; i++)  {
            if(transformArr[i] in divStyle) {
                return transform = transformArr[i];
            }
        }
 
        return transform;
    }
 
    // 一种对外暴露的方式
    window.Drag = Drag;
})();
 
// 使用:声明2个拖拽实例
new Drag(‘target’);
new Drag(‘target2’);

诸如此类一个拖拽对象就封装落成了。

提出我们依照自身提供的思维形式,多多尝试封装一些组件。比如封装一个弹窗,封装一个巡回轮播等。练得多了,面向对象就不再是题材了。那种思考格局,在将来其余时候都是可以运用的。

下一章分析jQuery对象的贯彻,与什么将大家那边封装的拖拽对象扩展为jQuery插件。

2 赞 1 收藏
评论

亚洲必赢官网 4

网站地图xml地图