- 博客(2952)
- 资源 (200)
- 收藏
- 关注
![](https://csdnimg.cn/release/blogv2/dist/pc/img/listFixedTop.png)
原创 css画图(*****************)
1. 自适应的椭圆背景知识:border-radius属性的基本用法使用border-radius制作一个圆很简单,只要给任何正方形元素设置固定宽高及一半长度以上的border-radius,就可以得到圆形1234background: #fb3;width: 200px;height: 200px;border-radius: 100px; /*
2017-03-28 21:47:09
4163
7
![](https://csdnimg.cn/release/blogv2/dist/pc/img/listFixedTop.png)
原创 常见组件对象的搞法
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> function libin(a,b){ this.a=a;
2016-10-28 09:45:42
974
![](https://csdnimg.cn/release/blogv2/dist/pc/img/listFixedTop.png)
原创 js 面试的坑(四)
函数提升比变量提升优先级高 input 4位加一个空格<!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title> 数字每4位加空格
2016-10-14 23:34:57
2462
1
![](https://csdnimg.cn/release/blogv2/dist/pc/img/listFixedTop.png)
原创 JS类型判断typeof PK {}.toString.call(obj);
先看typeof html lang="en"> head> meta charset="UTF-8" /> script type="text/javascript" src="" >script> title>Documenttitle> style type="text/css"> style>
2016-09-24 11:37:45
2019
![](https://csdnimg.cn/release/blogv2/dist/pc/img/listFixedTop.png)
原创 直面坑爹的前端面试
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> function A(){ this.say=function(){
2016-09-23 22:26:50
1234
![](https://csdnimg.cn/release/blogv2/dist/pc/img/listFixedTop.png)
原创 禁止遮罩层以下屏幕滑动
相信大家在做移动端开发的时候会经常遇到这种场景,需要适时的弹出遮罩(有时为了突出还会在外面加上蒙层),弹窗出现以后,为了追求良好的用户体验,遮罩以下的屏幕是禁止滑动的。在网上找了很多资料,大体就这两种做法,但都有不完善的地方。加上自己的思考和总结,想到一个办法,应该可以解决你的问题。a)大众型一般,大家想到的都是给body或者html添加overflow:hidden样式,当然he
2016-09-21 23:40:14
17841
1
![](https://csdnimg.cn/release/blogv2/dist/pc/img/listFixedTop.png)
原创 强悍的javascript手势库
/** * Toucher * git:https://github.com/cometwo/Toucher-1 */"use strict";(function (root, factory) { if (typeof define === "function" && define.amd) { define([], function () {
2016-09-15 23:03:51
3070
![](https://csdnimg.cn/release/blogv2/dist/pc/img/listFixedTop.png)
原创 js 面试的坑(三)
判断页面滚动方向(上下) html> head> meta charset="UTF-8"> title>title> style> body{ height:1000px; } style> script src="htt
2016-09-12 17:49:01
4666
1
![](https://csdnimg.cn/release/blogv2/dist/pc/img/listFixedTop.png)
原创 jQuery手风琴效果
原地址:http://www.jq22.com/jquery-info9370<!doctype html><html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="wi
2016-09-12 09:34:33
2742
![](https://csdnimg.cn/release/blogv2/dist/pc/img/listFixedTop.png)
原创 单选框,复选框,下拉列表的美化
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <t
2016-09-11 22:54:40
2064
![](https://csdnimg.cn/release/blogv2/dist/pc/img/listFixedTop.png)
原创 老生常谈javascript的5中继承
function MAN(name, sex, age) { this.name = name; this.sex = sex; this.age = age; this.say = function(school, zhuanye) { console.log(this.name + "," + this.sex + ",今年" + this.age +
2016-09-11 15:25:31
1447
![](https://csdnimg.cn/release/blogv2/dist/pc/img/listFixedTop.png)
原创 JavaScript中call,apply,bind方法的总结
function MAN(name, sex, age) { this.name = name; this.sex = sex; this.age = age; this.say = function(school,zhuanye) { console.log(this.name + " , " + this.sex + " ,今年" + this.age
2016-09-11 14:35:14
1377
![](https://csdnimg.cn/release/blogv2/dist/pc/img/listFixedTop.png)
原创 js继承有5种实现方式,你知道几种?
js继承有5种实现方式:1、继承第一种方式:对象冒充 function Parent(username){ this.username = username; this.hello = function(){ alert(this.username); } } function Child(username,password){
2016-09-09 18:45:06
8862
![](https://csdnimg.cn/release/blogv2/dist/pc/img/listFixedTop.png)
原创 浅谈javascript面向对象
我们常用的两种编程模式POP–面向过程编程(Process-oriented programming) 面向过程编程是以功能为中心来进行思考和组织的一种编程方法,它强调的是系统的数据被加工和处理的过程,在程序设计中主要以函数或者过程为程序的基本组织 方式,系统功能是由一组相关的过程和函数序列构成。面向过程强调的是功能(加工),数据仅仅作为输入和输出存在。这种过程化的思想是一种很朴素和普遍的思
2016-09-09 18:42:43
984
![](https://csdnimg.cn/release/blogv2/dist/pc/img/listFixedTop.png)
原创 对$(this).index()的一点见解
参考:http://www.w3cfuns.com/notes/18316/5e6c82c28f4178fda5d628faa9317cd8.html<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <script type="
2016-09-09 18:19:29
5709
![](https://csdnimg.cn/release/blogv2/dist/pc/img/listFixedTop.png)
原创 布局神器display:table-cell
元素两端对齐 第一个案例是让两个元素分别向左和向右对齐,如果是过去,我一定会用float来实现,但其实用table可以这么做: 12345678910111213141516171819
2016-09-09 12:56:48
1305
![](https://csdnimg.cn/release/blogv2/dist/pc/img/listFixedTop.png)
原创 canvans 粒子背景特效
演示效果:http://www.atool.org/ <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script type="text/javascript" src="canvas-nest.js" ><
2016-09-09 10:37:07
3072
![](https://csdnimg.cn/release/blogv2/dist/pc/img/listFixedTop.png)
原创 javascript多线程编程
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <script type="text/javascript" src="js/Concurrent.Thread.js"></script> <title></title> <script type="text/javas
2016-09-04 21:18:56
1209
![](https://csdnimg.cn/release/blogv2/dist/pc/img/listFixedTop.png)
原创 自己动手写js分享插件 [支持https] (QQ空间,微信,新浪微博。。。)
微信分享效果:QQ空间分享效果:HTML<!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery弹出社交分享按钮</title> <link rel="stylesheet" h
2016-09-03 17:18:27
18994
13
![](https://csdnimg.cn/release/blogv2/dist/pc/img/listFixedTop.png)
原创 老生常谈JavaScript闭包
闭包就是指一个有权访问另外一个函数作用域中的变量的函数。《JavaScript高级程序第三版》 本人对于闭包初次的认识就来自《高三》,首先仅仅通过“有权”’两个字我们便可以进一步推断出。在正常情况下,一个函数是“无权”访问另外一个函数的作用域中的变量。一、什么是变量 因此在浅谈闭包的时候,回顾一下Javascript特殊的变量作用域。 变量的作用域无非就是两种:全局变量和局部变量。下面通过几个
2016-09-03 01:12:38
995
![](https://csdnimg.cn/release/blogv2/dist/pc/img/listFixedTop.png)
原创 Md5.sha1加密js插件
/** * jQuery MD5 hash algorithm function * * * Calculate the md5 hash of a String * String $.md5 ( String str ) * * * Calculates the MD5 hash of str using the 禄 RSA Data Sec
2016-08-30 12:55:41
4763
![](https://csdnimg.cn/release/blogv2/dist/pc/img/listFixedTop.png)
原创 图解Javascript原型链
本文尝试阐述Js中原型(prototype)、原型链(prototype chain)等概念及其作用机制。上一篇文章(图解Javascript上下文与作用域)介绍了Js中变量作用域的相关概念,实际上关注的一个核心问题是:“在执行当前这行代码时Js解释器可以获取哪些变量”,而原型与原型链实际上还是关于这一问题。我们知道,在Js中一切皆为对象(Object),但是Js中并没有类(class);
2016-08-30 09:35:28
1360
1
![](https://csdnimg.cn/release/blogv2/dist/pc/img/listFixedTop.png)
原创 javascript 奇淫巧技44招
1、首次为变量赋值时务必使用var关键字变量没有声明而直接赋值得话,默认会作为一个新的全局变量,要尽量避免使用全局变量。2、使用===取代====和!=操作符会在需要的情况下自动转换数据类型。但===和!==不会,它们会同时比较值和数据类型,这也使得它们要比==和!=快。[10] === 10 // is false[10] == 10 // i
2016-08-29 18:14:21
1740
1
![](https://csdnimg.cn/release/blogv2/dist/pc/img/listFixedTop.png)
原创 别说你懂this
首先必须要说的是,this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,实际上this的最终指向的是那个调用它的对象(这句话有些问题,后面会解释为什么会有问题,虽然网上大部分的文章都是这样说的,虽然在很多情况下那样去理解不会出什么问题,但是实际上那样理解是不准确的,所以在你理解this的时候会有种琢磨不透的感觉),那么接下来我会深入的探讨这个问题。 为
2016-08-29 11:11:42
1365
1
![](https://csdnimg.cn/release/blogv2/dist/pc/img/listFixedTop.png)
原创 Javascript 中的神器——Promise
Promise in js回调函数真正的问题在于他剥夺了我们使用 return 和 throw 这些关键字的能力。而 Promise 很好地解决了这一切。2015 年 6 月,ECMAScript 6 的正式版 终于发布了。ECMAScript 是 JavaScript 语言的国际标准,JavaScript 是 ECMAScript 的实现。ES6 的目标,是使得 JavaSc
2016-08-27 23:02:44
1212
![](https://csdnimg.cn/release/blogv2/dist/pc/img/listFixedTop.png)
原创 狗日的this
本文主要总结自《JavaScript 语言精粹》、部分总结自《JavaScript 高级程序设计》以及自己的经验四种调用模式在 JavaScript 中,this 的值取决于调用模式,有四种调用模式,分别是方法调用模式、函数调用模式、构造器调用模式、Apply、call 调用模式。方法调用模式当一个函数被保存为对象的一个属性时,我们称它为一个方法。当方法被调用时
2016-08-27 22:46:42
1807
![](https://csdnimg.cn/release/blogv2/dist/pc/img/listFixedTop.png)
原创 一直显示在屏幕正中间位置
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <ti
2016-08-16 00:03:11
1420
![](https://csdnimg.cn/release/blogv2/dist/pc/img/listFixedTop.png)
原创 你也可以做一个小米魅族网站(WOW.js:WOW.js – 在页面滚动时展现动感的元素动画效果)
简介有的页面在向下滚动的时候,有些元素会产生细小的动画效果。虽然动画比较小,但却能吸引你的注意。比如刚刚发布的 iPhone 6 的页面(查看)。如果你希望你的页面也更加有趣,那么你可以试试 WOW.js。WOW.js 依赖 animate.css,所以它支持 animate.css 多达 60 多种的动画效果,能满足您的各种需求。浏览器兼容使用方法
2016-08-13 17:45:36
6622
![](https://csdnimg.cn/release/blogv2/dist/pc/img/listFixedTop.png)
原创 解密小米魅族等网站在可视区域加载动画
和 WOW.js 一样,scrollReveal.js 也是一款页面滚动显示动画的 JavaScript,能让页面更加有趣,更吸引用户眼球。不同的是 WOW.js 的动画只播放一次,而 scrollReveal.js 的动画可以播放一次或无限次;WOW.js 依赖 animate.css,而 scrollReveal.js 不依赖其他任何文件。虽然 scrollReveal.js 不依赖 anima
2016-08-13 15:54:30
3466
1
![](https://csdnimg.cn/release/blogv2/dist/pc/img/listFixedTop.png)
原创 利用jQuery旋转插件jqueryrotate制作转盘抽奖
<!DOCTYPE html><html> <head lang="en"> <meta charset="UTF-8"/> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
2016-08-13 11:17:06
8299
1
![](https://csdnimg.cn/release/blogv2/dist/pc/img/listFixedTop.png)
原创 select 下拉列表选择框效果及美化(before 和 :after伪元素的妙用)
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <style type="text/css">
2016-08-12 20:57:09
14026
![](https://csdnimg.cn/release/blogv2/dist/pc/img/listFixedTop.png)
原创 GIT教程
创建一个git 仓库创建目录复制mkdir product移动到目录并初始化仓库复制cd productgit init从本地或远程检出仓库以下命令从本地复制一个仓库的副本复制git clone /path/to/repository从远程服务器上拉取仓库到本地复制git clone username@host
2016-08-06 23:55:42
1602
1
![](https://csdnimg.cn/release/blogv2/dist/pc/img/listFixedTop.png)
原创 border:1px引起的盒模型塌陷问题解决方法
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .main { margin: 100px auto; height: 1
2016-08-05 18:03:46
1772
![](https://csdnimg.cn/release/blogv2/dist/pc/img/listFixedTop.png)
原创 不同大小的字中部对齐
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div { width: 400px; height: 30px;
2016-08-05 12:54:01
1359
![](https://csdnimg.cn/release/blogv2/dist/pc/img/listFixedTop.png)
原创 CSS样式去除input和textarea点击选中框,只能输入数字
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/jquery-2.2.2.min.js"></script> <style type="text/css">
2016-08-05 00:03:29
2790
![](https://csdnimg.cn/release/blogv2/dist/pc/img/listFixedTop.png)
原创 多图片左右切换功能前端实现
原文地址:http://www.cnblogs.com/starof/p/5732097.html @charset "utf-8"; html, body { background-color: #f6f5f5; } .vg-body { wid
2016-08-03 22:33:45
6916
![](https://csdnimg.cn/release/blogv2/dist/pc/img/listFixedTop.png)
原创 js 面试的坑(2)
Part1 手写代码现场手写代码是现在面试中很常见的一类面试题,考察基础的数据结构与算法能力。1 数组去重的实现基本数组去重Array.prototype.unique = function(){ var result = []; this.forEach(function(v){ if(result.indexOf(v) 0){ resu
2016-07-25 12:35:15
2066
![](https://csdnimg.cn/release/blogv2/dist/pc/img/listFixedTop.png)
原创 仿百度首页登陆框拖拽效果(可视窗口内拖动)
慕课网视频地址: http://www.imooc.com/learn/60<!doctype html><html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> <style type="text/css"> * {
2016-07-18 00:24:18
60256
![](https://csdnimg.cn/release/blogv2/dist/pc/img/listFixedTop.png)
原创 CSS技巧收集——毛玻璃效果(深入理解滤镜filter)
原文链接:http://www.cnblogs.com/ghost-xyx/p/5677168.html先上 demo 和 源码其实毛玻璃的模糊效果技术上比较简单,只是用到了 css 滤镜(filter)中的 blur 属性。但是要做一个好的毛玻璃效果,需要注意很多细节。比如我们需要将上图中页面中间的文字区域变成毛玻璃效果,首先想到的是给其设置一个透明度,并添加模糊滤镜:.content {
2016-07-16 23:55:29
28857
1
![](https://csdnimg.cn/release/blogv2/dist/pc/img/listFixedTop.png)
原创 CSS实现单行、多行文本溢出显示省略号(…)
.inaline { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; /*clip 修剪文本。*/ } .intwoline { display: -webkit-box !important; overflow: hidden; text-o
2016-07-10 16:14:53
10225
2
手把手教你做APP官网网站(带动画效果,插入百度地图)
2016-03-20
手把手教你制作easyUI工作站,主要学习tabs方法
2016-03-19
加载特效加载特效加载特效
2016-03-07
HTTP权威指南(高清).pdf版
2017-10-11
深入理解ES6 【美】Nicholas C. Zakas
2017-07-14
解密小米魅族等网站在可视区域加载动画
2016-08-13
利用jQuery旋转插件jqueryrotate制作转盘抽奖(ajax版)
2016-08-13
基于jQuery左右滑动切换特效(4星级)
2016-08-04
js仿iPhone手机端alert,loading,正在加载...
2016-07-15
支持移动端,PC端图片弹出层(支持键盘)
2016-07-09
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人