🌓

在移动端下模拟下拉列表（兼容Ios、Android）

2015-08-19

在移动端使用原生的下拉列表（select）会有自带的样式，想要做到自定义样式怎么办呢？

首先第一步会去掉默认样式：-webkit-appearance:none;这些对input下的各类型属性，如：type=”date”，会去掉默认样式，但是这时候对select设置的边框，宽度或者是文字居中显示等等样式都不起作用。这时候就需要模拟select框了。因为select在移动端上会用到手机默认的弹框，所以还是要用到select标签。

利用轮播原理结合hammer.js实现简洁的滑屏功能

2015-08-11

最近有个任务，做一个非常小的h5的应用，只有2屏，需要做横向的全屏滑动切换和一些简单的动画效果，之前做这种东西用的是fullpage.js和jquery，性能不是很好，于是就想自己动手弄一个简单的东西来实现。最后我用zepto + hammer.js 和轮播的方式解决了这个问题，效果还不错，整个页面不开启Gzip时所有资源请求的数据大小为200KB左右。这篇文章总结下这个方法的实现思路。
效果演示（代码下载）：

CSS3移入图片放大效果

2015-08-08

我们有时看到一些网站有的照片，当我们将鼠标移入的时候，会有个放大的动画效果，今天我就来讲讲这个效果是如何实现的。

HTML的基本结构
我们需要一个 pic 来作为 3D 场景，里面有一个 img 标签作为图片的容器。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>放大镜效果</title>
<style>

</style>
</head>
<body>
<div id="pic">
<img src="img/pic.jpg">
</div>
</body>
</html>

判断是否是微信打开页面代码

2015-08-08

function is_weixn(){
var ua = navigator.userAgent.toLowerCase();
if(ua.match(/MicroMessenger/i)=="micromessenger") {
return true;
} else {
return false;
}
}

网页某块区域鼠标不让选中文字

2015-08-08

1、给元素加样式

1	-webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;

创建javascript对象的方法

2015-08-06

一、工厂模式

function person (name,age) {
    var p=new Object();
    p.name=name;
    p.age=age;
    p.showMessage=function(){
        console.log("name:"+this.name+" age:"+this.age);
    }
    return p;
}
var p1=person("k1",28);
var p2=person("k2",29);
console.log(p1.showMessage==p2.showMessage);//false  不是同一个showMessage方法
console.log(p1.constructor);//[object]  都是object

js数组操作大全

2015-08-06

shift：

删除原数组第一项，并返回删除元素的值；如果数组为空则返回undefined

var a = [1,2,3,4,5];

var b = a.shift(); //a：[2,3,4,5] b：1

jquery图片预加载插件 neatshowjs

2015-08-06

css3产品展示幻灯片

2015-08-06

今天介绍的css3产品展示幻灯片不同于以往的幻灯片，它采用了字体和图片翻转的技术进行产品的切换，这种动感的切换方式可以在一定程度上获取用户的注意，该特效使用了impress.js和css3相结合，impress.js是一个独立的脚本库能够让css3在动态效果的使用方面获得更好的表现力。

鼠标经过方向感知特效

2015-08-06

目前很多优秀的网站都会在图片展示细节上下功夫，比如图片的显示方式，鼠标经过图片会出现种种不同种类的效果，只要稍微对图片做一点修饰，网站的体验便会得到相应的提升。
今天向大家分享一个鼠标经过方向感知特效，当鼠标经过图片时就会被一层阴影覆盖，并且图片的阴影覆盖会随着你的鼠标的进入方向而定。

网页产品元素快速查看特效

2015-08-06

分享一款动态十足的网页产品元素快速查看特效，该特效基于CSS3 和 Velocity.js开发，它为用户提供了一种快速查看产品详细信息的方式，当你点击产品元素时，该产品元素的详细信息会以弹窗的方式显示给用户，弹窗中还可以加入该产品的多图切换效果。

响应式全屏无缝切换幻灯片DivasSlider

2015-08-06

插件描述：Divas

Slider是一个多才多艺的jQuery滑块,容易使用和完全可定制。充分响应和触摸启用。

1.引入样式表

1
2
3

<link rel="stylesheet" type="text/css" media="screen" href="css/CSSreset.min.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/divas_instructions_style.css" />
<link id="skin" rel="stylesheet" type="text/css" media="screen" href="css/divas_free_skin.css" />

教你创建更好的jQuery插件

2015-08-05

在开发过很多 jQuery 插件以后，我慢慢的摸索出了一套开发jQuery插件比较标准的结构和模式。这样我就可以 copy & paste 大部分的代码结构，只要专注最主要的逻辑代码就行了。使用相同的设计模式和架构也让修复bug或者二次开发更容易。一套经过验证的架构可以保证我的插件不出大的问题，不论插件简单还是复杂。我在这里分享10条我总结的经验。

JSON简介以及用法代码汇总

2015-08-05

什么是JSON？

JavaScript 对象表示法（JavaScript Object Notation）。

JavaScript + CSS3写了一个前端验证码插件

2015-08-05

接触的大部分项目中，验证码一直都是后台干的事，这两天正好有一个页面需要验证码，第时间想着后台实现，但突然转念一想大部分项目貌似对安全性要求不是很高，又要求有点阻止机器人的技巧，于是就用前端写了一个验证码。并利用CSS3的transform属性里的rotate设置旋转，再随机弄点干扰线，最后为了在所有DOM节点的上边加一层opacity=0的DIV，一个前端验证码就出来了。

js Date对象详解

2015-08-05

Date在js中和Array类似，都是拥有自己的特殊方法的特殊对象。

由于平常用到Date着实不多，对它的了解颇浅。上周被问到怎么样获取某年某个月的天数，我当时想了一会儿，回答说有两种，一种自己写判断闰年的逻辑，每个月天数分两种情况存数组，一种是利用js Date对象的特性(其实是他总结的…)。不过具体用到什么特性我答不上来。现在既然想起来了，也学习总结一下好了。

jquery中attr和prop的区别

2015-08-05

在高版本的jquery引入prop方法后，什么时候该用prop？什么时候用attr？它们两个之间有什么区别？这些问题就出现了。

关于它们两个的区别，网上的答案很多。这里谈谈我的心得，我的心得很简单：

对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。
对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。

手把手教你实现JS拖拽插件

2015-08-05

一、js拖拽插件的原理

常见的拖拽操作是什么样的呢？整过过程大概有下面几个步骤：

js跳转到指定页面代码

2015-08-05

js中跳转页面方法有很多不同种的跳转方法会针对不同的页面或不同的浏览器了，在这里整理的这些都是我们常用的，有需要的可进入参考。

第一种：location.href最简单的跳转代码，直跳到指定页面了

1	window.location.href="login.jsp?backurl="+window.location.href;

javascript 常用函数

2015-08-04

//获取元素的样式值。

function getStyle(elem, name) {
  if (elem.style[name]) {
    return elem.style[name];
  } else if (elem.currentStyle) {
    return elem.currentStyle[name];
  } else if (document.defaultView && document.defaultView.getComputedStyle) {
    name = name.replace(/([A-Z])/g, ”-$1″);
    name = name.toLowerCase();
    var s = document.defaultView.getComputedStyle(elem,“”);
      return s && s.getPropertyValue(name);
    }
    else {
      return null
    }
  }