Skip to content

Instantly share code, notes, and snippets.

View wplnancy's full-sized avatar

wplnancy wplnancy

View GitHub Profile
@wplnancy
wplnancy / minijQuery
Created December 12, 2016 10:18
jQuery的基本架构实现
/**
* Created by Administrator on 2016/12/12.
*/
;
(function () {
//暴露外部使用一个接口
var _$ = window.$;
var _jQuery = window.jQuery;
var jQuery = window.jQuery = window.$ = function (selector) {
return jQuery.fn.init(selector);//这样就可以$('div')得到了一个new 出来的实例
@wplnancy
wplnancy / note.txt
Created November 30, 2016 00:48
盒子模型
盒子模型属性:
* clientWidth : 内容+左右padding
* clientHeight : 内容+上下padding
* clientLeft : 左边框的宽度
* clientTop : 上边框的宽度
*
* offsetWidth : clientWidth + 左右border
* offsetHeight : clientHeight + 上下border
* offsetParent : offsetParent的值要取决于上一级节点是否包含定位属性。然而这个定位的值必须是(relative,absolute,fixed)。如果上一级元素不包含定位属性,那么再继续向上查找,如果查找到body仍然没有。那么默认就是body。
*
@wplnancy
wplnancy / index
Created November 30, 2016 00:45
3 获取元素距离body的偏移量(无论offsetParent是谁)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>获取元素距离body的偏移量(无论offsetParent是谁)</title>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="result">
</div>
<img src="" alt="" id="pic"/>
@wplnancy
wplnancy / scope.html
Created October 31, 2016 14:50
Angular Scope
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<script src="angular.js">
</script>
<body ng-app="myApp" ng-controller="firstController">
@wplnancy
wplnancy / index.html
Created October 31, 2016 14:47
AngularJs表单验证
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="../../vendor/bootstrap3/css/bootstrap.min.css"/>
</head>
<body>
<div ng-app="myApp" style="margin-top: 100px;">
<form name="myForm" action="kittencup.php" ng-controller="firstController" class="container form-horizontal">
@wplnancy
wplnancy / index.html
Last active October 31, 2016 14:55
获取随机的验证码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#code {
width: 100px;
height: 50px;
line-height: 50px;
@wplnancy
wplnancy / index.html
Last active October 31, 2016 14:54
遮罩层的js实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
html,body{
padding:0;
margin: 0;
font-size: 14px;
@wplnancy
wplnancy / index.html
Last active October 31, 2016 14:54
弹性加摩擦制作菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
* { padding: 0; margin: 0; }
li { list-style: none; }
@wplnancy
wplnancy / 弹性运动
Last active September 9, 2016 02:02
弹性运动的不适用的地方
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
#div1 {width:100px; height:100px; background:red; position:absolute; top:50px; left:0;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
var iSpeed=0;