JavaScript
关注
分享
扫一扫
文章平均质量分 52
della_uii
蛰伏期~
展开
-
限制范围的拖拽的简单实现及封装（含磁性吸附）
拖拽的实现及封装：<body> <div id="div1" style="width: 100px; height: 100px; background: orange; position: absolute;"></div> <div id="div2" style="width: 100px; height: 100px; background: olivedrab; posi原创 2016-11-02 22:40:46 · 839 阅读 · 0 评论 -
事件绑定
1、JavaScript代码中直接绑定：在JavaScript中通过查找DOM对象，对其绑定，obj.onclick=fn； 的格式，举例如下：<script type="text/javascript"> function fn1(){ alert(1); } function fn2(){ alert(2); } docum原创 2016-10-31 00:43:33 · 338 阅读 · 0 评论 -
event事件详解-焦点事件、event对象、键盘事件、右键菜单事件
1、焦点事件获取焦点事件onfocus \ 失去焦点事件 onblur例子：输入框里的提示文字<body> <input type="text" id="text1" value="请输入内容" /> <script type="text/javascript"> var oText=document.getElementById("text1");原创 2016-10-29 21:18:37 · 1561 阅读 · 0 评论 -
js运动-弹性运动
运动原理：加速运动+减速运动+摩擦运动；<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; pa原创 2016-11-14 23:22:44 · 744 阅读 · 0 评论 -
js运动-碰撞运动
碰撞可以分为碰壁和互碰两种形式，碰壁是一种常见的碰撞形式，匀速碰壁是最简单的碰撞运动。 碰撞实现 : 首先找到碰撞的临界点 , 再确定运动的方向 , 然后去改对应的速度（速度取反）。匀速碰壁：html> head> meta charset="UTF-8"> title>title> style type="text/css">原创 2016-11-17 13:14:34 · 791 阅读 · 0 评论 -
js运动实例-iPhone弹性效果
实现步骤： 1、实现可拖动； 2、判断拖动的方向； 3、实现弹性运动；<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0;原创 2016-11-17 17:20:42 · 469 阅读 · 0 评论 -
js运动实例-拖拽碰撞
实现过程： 1.实现拖拽 2.计算速度 3.实现碰撞<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #div1{ width: 100px;原创 2016-11-17 19:15:15 · 445 阅读 · 0 评论 -
原生js实现时间版运动框架
前面有一个速度版的运动框架，但是如果不同属性的变化量不同的情况下，使用速度版运动框架会在运动过程中出现‘卡顿’一下的状况。而此时间版运动框架则不会有‘卡顿’情况出现。此时间版运动框架是基于tween算法的。 tween有4个参数： -t：current time（当前时间） -b：beginning value（初始值） -c： change in value（变化量） -d：du原创 2016-11-20 16:23:45 · 933 阅读 · 0 评论 -
jq中animate其他运动形式的扩展
jq运动同样是基于tween的。 jq中只有linear和swing两种运动形式，可以通过$.extend(）把tween中的运动扩展到jq中。<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script><script>$.extend(jQuery.easing , { easeIn: function(x,t,原创 2016-11-20 17:17:45 · 1995 阅读 · 0 评论 -
js通过class获取元素的方法
function getElementsByClassName(oParent,tagName,className){ var aEls=oParent.getElementsByTagName(tagName); var iLen=aEls.length; var arr=[]; for (var i=0; i<iLen; i++) { var aCl原创 2016-11-20 18:29:48 · 12299 阅读 · 0 评论 -
原生js实现带运动的分页效果
本例最终效果如下图，当切换页码时，本页码内所有课程将从最后一个课程开始依次运动到底部中间的位置并消失，然后新页码内的课程依次从底部中间的位置运动到原始位置。 首先实现分页效果，然后将运动和分页结合。 分页效果图如下图中的③或④所示： 下面将以 什么情况出现首页-什么情况出现上一页-五个页码不同排布情况-什么情况出现下一页-什么情况出现尾页-总页码提示-点击页码进行切换 的思路实现该分页效果。<原创 2016-12-08 21:10:58 · 2002 阅读 · 0 评论 -
JavaScript面向对象(3)-构造函数的继承[转]
本文转载自 阮一峰 老师的Javascript面向对象编程（二）：构造函数的继承，原文如下今天要介绍的是，对象之间的”继承”的五种方法。 比如，现在有一个”动物”对象的构造函数。function Animal(){ this.species = "动物";}还有一个”猫”对象的构造函数。function Cat(name,color){ this.name = name;转载 2016-12-16 15:18:20 · 394 阅读 · 0 评论 -
JavaScript面向对象(1)-封装
1、什么是面向对象编程？ 用对象的思想去写代码，就是面向对象编程（OOP）。2、面向对象编程(OOP)的特点 封装、继承、多态。3、对象的组成 方法（行为、操作）——函数：过程、动态的（对象下面的函数） 属性——变量：状态、静态的（对象下面的变量）4、创建对象的模式 通常情况下，我们在创建一个对象时会采用下列方式：var obj = new Object(); //创建了一个空的对象o原创 2016-12-14 20:09:24 · 446 阅读 · 0 评论 -
JavaScript面向对象(2)-一些属性、方法、运算符
1.hasOwnProperty() 每个实例对象都有一个hasOwnProperty()方法，用来判断某一个属性到底是本地属性，还是继承自prototype对象的属性。<script type="text/javascript"> function CreatePerson(name){ this.name = name; } CreatePerson.pr原创 2016-12-15 18:50:12 · 471 阅读 · 0 评论 -
js运动实例-带运动效果的留言本
这里主要实现的是li高度和透明度的运动效果。 实现思路：先把li的高度和透明度初始化为0，然后运动至目的高度和透明度。 注意：li的高度在初始化为0之前要先存储。另外本文用到的运动框架move.js，在前面已经给出。<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title>原创 2016-11-13 11:44:25 · 466 阅读 · 0 评论 -
js图片预加载和图片懒加载
预加载：提前加载图片，当用户需要查看时可直接从本地缓存中渲染。 预加载是牺牲服务器前端性能，换取更好的用户体验，这样可以使用户的操作得到最快的反映。 实现预加载常用方式是：new Image()。 Image对象的src属性 : 当我们给Image对象的src属性赋值一个url的时候，这个Image对象就去会加载url资源，加载完成以后的资源被保存到浏览器的缓存文件夹里面，下次如果我们要去调用原创 2016-11-13 21:58:15 · 971 阅读 · 0 评论 -
js运动实例-带运动的返回顶部效果
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> body{ height: 2000px; } #btn原创 2016-11-13 17:05:37 · 402 阅读 · 0 评论 -
js运动实例-淘宝幻灯片
本例仅作为运动框架move.js的扩展应用，实现点击下方提示按钮切换幻灯片的功能。<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin:原创 2016-11-13 14:59:09 · 512 阅读 · 0 评论 -
碰撞检测
<body> <div id="div1" style="width: 100px; height: 100px; background: orange; position: absolute; z-index: 2;"></div> <div id="div2" style="width: 100px; height: 100px; background: olivedrab; p原创 2016-11-03 20:28:08 · 352 阅读 · 0 评论 -
js实现拖动改变层的大小（宽度）
鼠标拖动改变div的宽度变化：<body> <div id="div1" style="width: 100px; height: 100px; background: #CCCCCC; position: absolute; left: 500px; top: 200px;"> <div style="width: 10px; height: 100px; backgrou原创 2016-11-03 21:34:56 · 1143 阅读 · 0 评论 -
JavaScript-快速排序
今天主要学习了快速排序，记录如下，方便再次学习。JavaScript实现的常见排序算法有：冒泡排序、选择排序、插入排序、谢尔排序、快速排序(递归)、快速排序(堆栈)、归并排序、堆排序。“快速排序”的整个排序过程只需要三步： （1）在数据集之中，选择一个元素作为”基准”（pivot）。 （2）所有小于”基准”的元素，都移到”基准”的左边；所有大于”基准”的元素，都移到”基准”的右边。原创 2016-10-23 17:37:58 · 272 阅读 · 0 评论 -
JavaScript-枚举算法
枚举（穷举）算法解决问题的思路： 1.利用for循环列出所有可能的情况； 2.利用if判断将已知条件与所有可能情况进行匹配，匹配成功的结果即为最后答案。 下面是两个经典案例。<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> </head> <bod原创 2016-10-24 23:07:53 · 610 阅读 · 0 评论 -
JavaScript-事件委托
事件委托（事件代理）：利用冒泡的原理，把事件添加到父级甚至祖先级上，触发执行。 事件代理的好处： 1.提高性能； 2.动态添加的元素依然有之前的事件。<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <原创 2016-10-25 20:50:57 · 266 阅读 · 0 评论 -
js实现简易模拟滚动条
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #div1{ width: 30px; height: 500px;原创 2016-11-06 19:42:50 · 1244 阅读 · 0 评论 -
鼠标滚轮事件
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #div1{ width: 100px; height: 100px;原创 2016-11-06 21:06:37 · 322 阅读 · 0 评论 -
cookie基础知识
cookie : 存储数据1.不同的浏览器存放的cookie位置不一样，也是不能通用的； 2.cookie的存储是以域名形式进行区分的； 3.cookie的数据可以设置名字的； 4.一个域名下存放的cookie的个数是有限制的，不同的浏览器存放的个数不一样； 5.每个cookie存放的内容大小也是有限制的，不同的浏览器存放大小不一样。通过document.cookie获取当前网站下的cook原创 2016-11-06 22:55:57 · 391 阅读 · 0 评论 -
JavaScript-对象的引用
基本类型(字符串,数字,布尔值,null,undefined):赋值的时候只是值的复制。var a=5;var b=a;b+=5;alert(b); //10alert(a); //5对象类型和函数都是引用的关系，共用地址。var a=[1,2,3];var b=a;b.push(4);alert(b); //1,2,3,4alert(a); //1,2,3,4另一种情况：v原创 2016-10-27 21:53:19 · 527 阅读 · 0 评论 -
js运动-匀速运动、透明度、多物体的运动、多属性运动
1、匀速运动例子1：分享到<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #div1{ width: 100px; he原创 2016-11-08 22:32:17 · 660 阅读 · 0 评论 -
js运动-链式运动、摩擦运动、缓冲运动、运动框架加入缓冲
1、链式运动<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>链式运动</title><style>#div1 {width:100px; height: 100px; background: red; position: absolut原创 2016-11-09 22:04:24 · 434 阅读 · 0 评论 -
js实现回到顶部效果
html：<ul> //撑页面 <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li></ul><a href="javascript:;" id="btn"><p>回到顶部</p></a> //回到顶部按钮原创 2016-10-29 00:07:47 · 531 阅读 · 0 评论 -
事件流-事件冒泡机制
IE的事件流叫做事件冒泡(event bubbling)，即事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收，然后逐级向上传播到较为不具体的节点(文档)。先看一个关于事件冒泡的例子：<body> <div id="div1"> <div id="div2"> <div id="div3"> </div>原创 2016-10-29 23:35:16 · 352 阅读 · 0 评论 -
js运动实例-多图片从中心放大缩小
多图片展开收缩实现的过程分四步：第一步：布局，各个小盒子相对于外面的大盒子定位<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> body,ul,li{ m原创 2016-11-10 23:15:08 · 1393 阅读 · 0 评论 -
getBoundingClientRect()
1、语法var rect=el.getBoundingClientRect();2、返回值返回一个包含left、top、right、bottom、width、height值的矩形对象。注： width和height：ie9及以上支持width/height属性。 兼容ie6~ie8的width/height的写法：return{ width:rect.right-rect.left,原创 2017-05-19 11:11:22 · 1766 阅读 · 0 评论