JavaScript资料,JavaScript文章,JavaScript文档-易库教程

javascript事件委托的用法及其好处简析

2017年02月06日 11 阅读

本文为大家简单介绍了javascript事件委托的用法及其好处，供大家参考，具体内容如下事件委托:利用冒泡的原理，把事件加到父级上，触发执行效果，好处：提高性能，新添加的元素还会有之前的事件。event对象：事件源，不管在哪个事件中，只要你操作的那个元素就是事件源获取事件源：IE：window.event.srcElement标准下：event.target target.nodeName来判断是哪个标签代码应用如下：<！DOCTYPE html P...

javascript拖拽效果延伸学习

2017年02月06日 10 阅读

本文总结一下，拖拽所延伸出来的一些效果，供大家参考，具体内容如下1.实现拖拉图片时，带框的效果。即当鼠标拖动某一个图片或物体时，其原有位置扔保留其型。这种效果，其实很简单，主要是另外创建一个物体，使其与被拖拽的物体，宽和高一样，然后，将其变为拖拽的对象。直接上代码：<html<head><style>#div1 {width:100px; height:100px; background:yellow; position:ab...

javascript制作照片墙及制作过程中出现的问题

2017年02月06日 10 阅读

本文主要做了一个照片墙，整个制作过程，主要需要解决一下几个问题：1、如何进行布局转换？2、如何对图片进行拖拽处理？3、如何检测图片碰撞问题？进行碰撞检测4、当多个图片进行碰撞，如何取其中距离对象最小的物体？5、如何将相互碰撞的两个物体的位置相互交换？涉及到运动的类库代码如下：<html><head><style>body{background:black;margin: 0;padding: 0;color: white...

javascript如何实现360度全景照片问题汇总

2017年02月06日 10 阅读

本文为大家分享了做360度的全景照片的详细步骤，其中要注意以下几个问题：1、如何在拖图片时，使其加载变快？---注意让图片隐藏的性能比让图片切换的性能高，且在IE9下运行，会出现图片加载的问题2、如何使图片带有一定的速度转3、考虑如果x为负数和负数两种情况代码如下：<！DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DT...

js拖拽的原型声明和用法总结

2017年02月06日 10 阅读

下面是自己写的一个关于js的拖拽的原型声明：代码如下需要注意的问题包括:1.this的指向到底是指向谁--弄清楚所指的对象2.call（）方法的使用3.直接将父级原型赋给子级与使用for将其赋给子级有什么区别？比如：for（var i in Drag.prototype）{LimitDrag.prototype[i]=Drag.prototype[i];----------子级发生改变，其父级并不会受到影响} LimitDrag.prototype=Dra...

JS+CSS实现闪烁字体效果代码

2017年02月06日 10 阅读

本文实例讲述了JS+CSS实现闪烁字体效果的方法。分享给大家供大家参考，具体如下：<div id="blink">闪烁的文字</div><script language="javascript">function changeColor（）{var color="#f00|#0f0|#00f|#880|#808|#088|yellow|green|blue|gray";color=color.split（"|"）;doc...

jQuery技巧之让任何组件都支持类似DOM的事件管理

2017年02月06日 10 阅读

本文介绍一个jquery的小技巧，能让任意组件对象都能支持类似DOM的事件管理，也就是说除了派发事件，添加或删除事件监听器，还能支持事件冒泡，阻止事件默认行为等等。在jquery的帮助下，使用这个方法来管理普通对象的事件就跟管理DOM对象的事件一模一样，虽然在最后当你看到这个小技巧的具体内容时，你可能会觉得原来如此或者不过如此，但是我觉得如果能把普通的发布-订阅模式的实现改成DOM类似的事件机制，那开发出来的组件一定会有更大的灵活性和扩展性，而且我也是第一...

超漂亮的Bootstrap 富文本编辑器summernote

2017年02月06日 11 阅读

Summernote 是一个简单，灵活，所见即所得（WYSIWYG）的编辑器，基于 jQuery 和 Bootstrap 构建。Summernote 所有主要的操作都支持快捷键，有一个功能强大的 API，它提供了大量的自定义选项的设计（宽，高，有效的项目等等）和功能。对于主要的脚本语言或框架（PHP，Ruby，Django，NodeJS），该项目有提供了集成示例。Bootstrap summernote，用其官网上的介绍就是“Super Simple WY...

JavaScript图像延迟加载库Echo.js

2017年02月06日 10 阅读

Echo 是一个独立的 JavaScript 懒加载图像的工具，快速、体积小（不足1k）和使用 HTML5 的 data- 属性。Echo 支持 IE8+ 。插件描述：和 Lazy Load 一样，Echo.js 也是一个用于图像延迟加载 JavaScript。不同的是 Lazy Load 是基于 jQuery 的插件，而 Echo.js 不依赖于 jQuery 或其他 JavaScript 库，可独立使用。并且 Echo.js 非常小巧，压缩后不足 1K...

JS基于ocanvas插件实现的简单画板效果代码（附demo源码下载）

2017年02月06日 11 阅读

本文实例讲述了JS基于ocanvas插件实现的简单画板效果。分享给大家供大家参考，具体如下：使用ocanvas做了个简单的在线画板。ocanvas参考：http://ocanvas.org/效果如下：主要代码如下：<！DOCTYPE html><html><head><meta charset="UTF-8" /><title>oCanvas Example</title><me...

JS简单编号生成器实现方法（附demo源码下载）

2017年02月06日 10 阅读

本文实例讲述了JS简单编号生成器实现方法。分享给大家供大家参考，具体如下：运行效果截图如下：具体代码如下：<！DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>编号生成器</title></head><body>&l...

基于jquery fly插件实现加入购物车抛物线动画效果

2017年02月06日 10 阅读

先给大家展示下效果图：在购物网站中，加入购物车的功能是必须的功能，有的网站在用户点击加入购物车按钮时，就会出现该商品从点击出以抛物线的动画相似加入购物车，这个功能看起来非常炫，对用户体验也有一定的提高。下面介绍基于jquery fly插件实现加入购物车抛物线动画效果。使用jquery.fly插件很方便时实现抛物线动画加入购物车的功能一、插件下载插件官方:https://github.com/amibug/fly二、载入jQuery库文件和jquery.fl...

jQuery EasyUI中DataGird动态生成列的方法

2017年02月06日 10 阅读

EasyUI中使用DataGird显示数据列表中，有时需要根据需要显示不同的列，例如，在权限管理中，不同的用户登录后只能查看自己权限范围内的列表字段，这就需要DataGird动态组合列，下面介绍EasyUI中DataGird动态生成列的方法。DataGird动态生成列，实际上就是控制DataGird的 columns 属性值，下面通过ajax异步调用后台columns的数据，进行绑定。<table id="dg"></table>&...

javascript HTML5 canvas实现打砖块游戏

2017年02月06日 11 阅读

本文实例编写的一个小游戏，基于HTML5中的canvas。游戏主要是小球反弹击打小方块。在代码中主要实现了小方块的生成，键盘键事件的监听，小球的移动和碰壁之后的反弹以及怎样消除小方块等方法。代码使用到了一个js脚本库游戏开发流程：1、创建画布：将画布放在div标签里面，这样可以控制画布居中的位置，再对div标签加上一些样式比如border和border-radius，这样一来使其看上去像手机，利于观看。<div id="main"> <！...

JS中的forEach、$.each、map方法推荐

2017年02月06日 10 阅读

forEach是ECMA5中Array新方法中最基本的一个，就是遍历，循环。例如下面这个例子：[1, 2 ,3, 4].forEach（alert）;等同于下面这个for循环var array = [1, 2, 3, 4];for （var k = 0, length = array.length; k < length; k++） { alert（array[k]）;}Array在ES5新增的方法中，参数都是function类型，默认有传参，for...

JS模拟简易滚动条效果代码（附demo源码）

2017年02月06日 10 阅读

本文实例讲述了JS模拟简易滚动条效果的方法。分享给大家供大家参考，具体如下：使用Js模拟滚动条。简易模式，类似手机上常见的滚动条。效果如下：Js代码如下：var scrollMoveObj = null, scrollPageY = 0, scrollY = 0;var scrollDivList = new Array（）;// obj需要添加滚动条的对象 w滚动条宽度 className滚动条样式名称// obj元素必须指定高度，并设置overflo...

jquery Deferred 快速解决异步回调的问题

2017年02月06日 11 阅读

jquery Deferred 快速解决异步回调的问题function ok（name）{var dfd = new $.Deferred（）;callback:func（）{ return dfd.resolve（ response ）;}return dfd.promise（）;}$.when（ok（1）,ok（2））.then（function（resp1,resp2）{}）//相关API 分成3类1类：$.when（pro1,pro1）将多个 p...

JavaScript数组去重的两种方法推荐

2017年02月06日 10 阅读

1、数组去重；Array类型并没有提供去重复的方法，如果要把数组的重复元素干掉，那得自己想办法：方法一：利用indexOf方法；var aa=[1,3,5,4,3,3,1,4]function arr（arr） {var result=[]for（var i=0; i<arr.length; i++）{if（result.indexOf（arr[i]）==-1）{result.push（arr[i]）}}console.log（result）}arr...

javascript中apply、call和bind的使用区别

2017年02月06日 10 阅读

在JS中，这三者都是用来改变函数的this对象的指向的，他们有什么样的区别呢。在说区别之前还是先总结一下三者的相似之处：1、都是用来改变函数的this对象的指向的。2、第一个参数都是this要指向的对象。3、都可以利用后续参数传参。那么他们的区别在哪里的，先看一个例子。var xw = {name : "小王",gender : "男",age : 24,say : function（） {alert（this.name + " , " + this.ge...

关于JS中的apply,call,bind的深入解析

2017年02月06日 10 阅读

在Javascript中，Function是一种对象。Function对象中的this指向决定于函数被调用的方式。使用apply，call 与 bind 均可以改变函数对象中this的指向，在说区别之前还是先总结一下三者的相似之处：1、都是用来改变函数的this对象的指向的。2、第一个参数都是this要指向的对象。3、都可以利用后续参数传参。call方法: 语法：call（[thisObj[,arg1[, arg2[, [,.argN]]]]]）定义：调...

首页 / 脚本样式 / JavaScript

javascript事件委托的用法及其好处简析

javascript拖拽效果延伸学习

javascript制作照片墙及制作过程中出现的问题

javascript如何实现360度全景照片问题汇总

js拖拽的原型声明和用法总结

JS+CSS实现闪烁字体效果代码

jQuery技巧之让任何组件都支持类似DOM的事件管理

超漂亮的Bootstrap 富文本编辑器summernote

JavaScript图像延迟加载库Echo.js

JS基于ocanvas插件实现的简单画板效果代码（附demo源码下载）

JS简单编号生成器实现方法（附demo源码下载）

基于jquery fly插件实现加入购物车抛物线动画效果

jQuery EasyUI中DataGird动态生成列的方法

javascript HTML5 canvas实现打砖块游戏

JS中的forEach、$.each、map方法推荐

JS模拟简易滚动条效果代码（附demo源码）

jquery Deferred 快速解决异步回调的问题

JavaScript数组去重的两种方法推荐

javascript中apply、call和bind的使用区别

关于JS中的apply,call,bind的深入解析