della_uii-CSDN博客

原创 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 1740

原创 css画三角形

效果图：对应css：<style type="text/css"> div{ width: 0; height: 0; margin: 10px; border: 50px solid; line-height: 0; /*兼容ie6(ie6下行高导致左右为梯形)*/ } .triangle_up

2017-03-02 10:57:59 617

转载 JavaScript面向对象(3)-构造函数的继承[转]

本文转载自阮一峰老师的Javascript面向对象编程（二）：构造函数的继承，原文如下今天要介绍的是，对象之间的”继承”的五种方法。比如，现在有一个”动物”对象的构造函数。function Animal(){ this.species = "动物";}还有一个”猫”对象的构造函数。function Cat(name,color){ this.name = name;

2016-12-16 15:18:20 364

原创 JavaScript面向对象(2)-一些属性、方法、运算符

1.hasOwnProperty() 每个实例对象都有一个hasOwnProperty()方法，用来判断某一个属性到底是本地属性，还是继承自prototype对象的属性。<script type="text/javascript"> function CreatePerson(name){ this.name = name; } CreatePerson.pr

2016-12-15 18:50:12 451

原创 JavaScript面向对象(1)-封装

1、什么是面向对象编程？用对象的思想去写代码，就是面向对象编程（OOP）。2、面向对象编程(OOP)的特点封装、继承、多态。3、对象的组成方法（行为、操作）——函数：过程、动态的（对象下面的函数）属性——变量：状态、静态的（对象下面的变量）4、创建对象的模式通常情况下，我们在创建一个对象时会采用下列方式：var obj = new Object(); //创建了一个空的对象o

2016-12-14 20:09:24 416

原创 JSONP实例应用-百度搜索下拉提示和豆瓣书籍搜索

Jsonp原理：首先在客户端注册一个callback，然后把callback的名字传给服务器。此时，服务器先生成 json 数据。然后以 javascript 语法的方式，生成一个function，function 名字就是传递上来的callback的名字。最后将事先生成的 json 数据直接以参数的方式，放置到 function 中，这样就生成了一段 js 语法的文档，返回给客户端。客户端

2016-12-12 14:56:27 661

原创原生js实现带运动的分页效果

本例最终效果如下图，当切换页码时，本页码内所有课程将从最后一个课程开始依次运动到底部中间的位置并消失，然后新页码内的课程依次从底部中间的位置运动到原始位置。首先实现分页效果，然后将运动和分页结合。分页效果图如下图中的③或④所示：下面将以什么情况出现首页-什么情况出现上一页-五个页码不同排布情况-什么情况出现下一页-什么情况出现尾页-总页码提示-点击页码进行切换的思路实现该分页效果。<

2016-12-08 21:10:58 1975

原创 Ajax实例-固定列数的瀑布流

前端页面：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0;

2016-12-01 23:28:37 911

原创 Ajax-跨域

一个域名地址的组成：当协议、子域名、主域名、端口号中任意一个不同时，都算做不同域，不同域之间相互请求资源，就算做“跨域”。跨域解决方法： 1、代理（后台解决）； 2、JSONP（针对 GET 方式）； 3、XHR2（IE10以下不支持）。JSONP还是上文中的案例，当把GET方法中请求的url由”http://localhost/ajaxdemo/server.php“改为”http:

2016-12-01 23:12:53 370

原创用jQuery实现Ajax

jQuery.ajax([settings])type：类型，”GET”或”POST”，默认为”GET”； url：发送请求的地址； data：是一个对象，连同请求发送到服务器的数据； dataType：预期服务器返回的数据类型。如果不指定，jQuery将自动根据HTTP包MIME信息来智能判断，一般我们采用json格式，可以设置为“json”; success：是一个方法，请求成功后的回调

2016-11-29 19:55:18 326

原创 Ajax基础知识

1、创建一个对象ajax技术的核心是XMLHttpRequest对象(简称XHR)，IE7+及其他标准浏览器都支持原生的XHR对象，在IE6及以下，XHR对象是通过MSXML库中的一个ActiveXObject实现的。创建XHR对象的兼容写法：var xhr = null;if (window.XMLHttpRequest) { xhr = new XMLHttpReques

2016-11-25 10:17:18 511

原创 css3知识总结1

一、选择器1.属性选择器（IE7及以上支持;） E[attr]-只使用属性名，但没有确定任何属性值； E[type=”value”]-指定属性名，并指定了该属性的属性值； E[attr~=”value”]-指定属性名，并且具有属性值，此属性具有多个属性值，并且以空格隔开（即针对 attr=”value1 value2 value3” 的情况），而且等号前面的“~”不能不写； E[att

2016-11-22 22:44:49 368

原创 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 12249

原创 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 1962

原创原生js实现时间版运动框架

前面有一个速度版的运动框架，但是如果不同属性的变化量不同的情况下，使用速度版运动框架会在运动过程中出现‘卡顿’一下的状况。而此时间版运动框架则不会有‘卡顿’情况出现。此时间版运动框架是基于tween算法的。 tween有4个参数： -t：current time（当前时间） -b：beginning value（初始值） -c： change in value（变化量） -d：du

2016-11-20 16:23:45 908

原创 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 421

原创 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 448

原创 js运动-碰撞运动

碰撞可以分为碰壁和互碰两种形式，碰壁是一种常见的碰撞形式，匀速碰壁是最简单的碰撞运动。碰撞实现 : 首先找到碰撞的临界点 , 再确定运动的方向 , 然后去改对应的速度（速度取反）。匀速碰壁：html> head> meta charset="UTF-8"> title>title> style type="text/css">

2016-11-17 13:14:34 761

原创 js运动-弹性运动

运动原理：加速运动+减速运动+摩擦运动；<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; pa

2016-11-14 23:22:44 714

原创 js图片预加载和图片懒加载

预加载：提前加载图片，当用户需要查看时可直接从本地缓存中渲染。预加载是牺牲服务器前端性能，换取更好的用户体验，这样可以使用户的操作得到最快的反映。实现预加载常用方式是：new Image()。 Image对象的src属性 : 当我们给Image对象的src属性赋值一个url的时候，这个Image对象就去会加载url资源，加载完成以后的资源被保存到浏览器的缓存文件夹里面，下次如果我们要去调用

2016-11-13 21:58:15 945

原创 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 390

原创 js运动实例-淘宝幻灯片

本例仅作为运动框架move.js的扩展应用，实现点击下方提示按钮切换幻灯片的功能。<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin:

2016-11-13 14:59:09 494

原创 js运动实例-带运动效果的留言本

这里主要实现的是li高度和透明度的运动效果。实现思路：先把li的高度和透明度初始化为0，然后运动至目的高度和透明度。注意：li的高度在初始化为0之前要先存储。另外本文用到的运动框架move.js，在前面已经给出。<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title>

2016-11-13 11:44:25 448

原创 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 1339

原创 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 411

原创 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 635

原创 cookie基础知识

cookie : 存储数据1.不同的浏览器存放的cookie位置不一样，也是不能通用的； 2.cookie的存储是以域名形式进行区分的； 3.cookie的数据可以设置名字的； 4.一个域名下存放的cookie的个数是有限制的，不同的浏览器存放的个数不一样； 5.每个cookie存放的内容大小也是有限制的，不同的浏览器存放大小不一样。通过document.cookie获取当前网站下的cook

2016-11-06 22:55:57 361

原创鼠标滚轮事件

<!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 306

原创 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 1227

原创 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 1119

原创碰撞检测

<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 332

原创限制范围的拖拽的简单实现及封装（含磁性吸附）

拖拽的实现及封装：<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 818

原创事件绑定

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 318

原创事件流-事件冒泡机制

IE的事件流叫做事件冒泡(event bubbling)，即事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收，然后逐级向上传播到较为不具体的节点(文档)。先看一个关于事件冒泡的例子：<body> <div id="div1"> <div id="div2"> <div id="div3"> </div>

2016-10-29 23:35:16 338

原创 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 1513

原创 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 513

原创 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 497

原创 H5-历史管理

实现历史管理的两种方法： 1.onhashchange 事件； 2.通过pushState和popstate事件。下面是通过福彩35选7来简单实现。<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <in

2016-10-26 20:22:52 1057

原创 JavaScript-事件委托

事件委托（事件代理）：利用冒泡的原理，把事件添加到父级甚至祖先级上，触发执行。事件代理的好处： 1.提高性能； 2.动态添加的元素依然有之前的事件。<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <

2016-10-25 20:50:57 249

原创 JavaScript-枚举算法

枚举（穷举）算法解决问题的思路： 1.利用for循环列出所有可能的情况； 2.利用if判断将已知条件与所有可能情况进行匹配，匹配成功的结果即为最后答案。下面是两个经典案例。<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> </head> <bod

2016-10-24 23:07:53 589

空空如也

空空如也