🌓

页面中图片细节放大展示代码详解

2015-10-24

在很多的电商商品展示网页中，都会出现放大产品细节的功能，这里就根据主要原理，简单用css和js实现这个效果：

实现原理：

1、选择两张内容相同，大小不一致的图片，一个是要待选择细节的小图片，另一张是用来展示细节的大图片。

2、要出现“选择小图片哪个细节”就展示出“大图片相同部分的细节内容”，这里就牵扯到比例的问题，即小图片中， 鼠标选择出的细节大小与整个小图片的长宽比例，要和大图片展示出的区域与大图片的长宽比例一致，这样效果才会逼真，
如下图：

阅读全文

Chrome二维码生成插件

2015-10-23

给移动端开发的小伙伴们带来福利了啦，还记得你每次开发的移动端页面先要拷贝网站去使用工具生成二维码么？还记得你使用的二维码工具，使用三次后需要人民币才可以继续使用？还记得你要装chrome商店的二维码生成插件，要去翻墙下载么？好了，不去提及大家这些伤心事了，本阁主今天就直接奉上第三方的chrome二维码插件，安全可靠纯洁。

阅读全文

jQuery延迟加载图片插件(懒加载插件 LazyLoad)

2015-10-22

Lazy Load 是一个用 JavaScript 编写的 jQuery 插件.

它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预加载的处理方式正好是相反的。

阅读全文

javascript中模板方法模式

2015-10-20

在JavaScript开发中用到集成的场景其实并不是很多，衡多时候我们都喜欢用mix-in(混入)的方式给对象扩展属性。但这不代表继承在JavaScript里没有用武之地，虽然没有真正的类和继承机制，但我们可以通过原型prototype来变相地实现继承。

不过本章并非要讨论继承，而是讨论一种基于继承的设计模式——模板方法（Template Method）模式。

阅读全文

抽奖转盘插件-jqueryrotate.js使用实例及demo下载

2015-10-19

很多公司到了年底都会做一些抽奖活动来刺激、吸引、粘住客户，比如抽奖转盘活动。
前几天用一个jqueryRotate插件实现了转盘的效果。比起那些很炫丽的flash是稍逊点，但也基本实现了需求
实现这个其实蛮简单的，转动的效果用的jqueryRotate插件，所以只要判断每个奖荐对应的角度，然后设置指针的转动角度就可以了。比如关键的是jqueryRotate这个插件的用法。

阅读全文

CSS3文字描边 CSS3字体外部描边

2015-10-14

给需要实现文字描边的元素添加如下CSS3的属性

1
2
3
4
5
6
7
text-shadow:#000 1px 0 0,#000 0 1px 0,#000 -1px 0 0,#000 0 -1px 0;

-webkit-text-shadow:#000 1px 0 0,#000 0 1px 0,#000 -1px 0 0,#000 0 -1px 0;

-moz-text-shadow:#000 1px 0 0,#000 0 1px 0,#000 -1px 0 0,#000 0 -1px 0;

*filter: Glow(color=#000, strength=1);

阅读全文

Cookie插件jquery.cookie.js

2015-10-09

Cookie是网站设计者放置在客户端的小文本文件。Cookie能为用户提供很多的使得，例如购物网站存储用户曾经浏览过的产品列表，或者门户网站记住用户喜欢选择浏览哪类新闻。 在用户允许的情况下，还可以存储用户的登录信息，使得用户在访问网站时不必每次都键入这些信息

Cookie下载地址：http://plugins.jquery.com/project/cookie

阅读全文

jquery颜色选择器拾色器插件iColor

2015-10-08

jquery颜色选择器拾色器插件iColor

用法简介：

jquery颜色选择器拾色器插件iColor。

阅读全文

jQuery全屏手风琴效果

2015-10-08

jQuery全屏手风琴效果

用法简介：
jQuery全屏手风琴效果。
文件引用：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<script src="js/jquery-1.8.3.min.js" type="text/javascript"></script>
<script>
var Expand = function () {
 var tile = $('.strips__strip');
 var tileLink = $('.strips__strip > .strip__content');
 var tileText = tileLink.find('.strip__inner-text');
 var stripClose = $('.strip__close');
 var expanded = false;
 var open = function () {
 var tile = $(this).parent();
 if (!expanded) {
 tile.addClass('strips__strip--expanded');
 tileText.css('transition', 'all .6s 1s cubic-bezier(0.23, 1, 0.32, 1)');
 stripClose.addClass('strip__close--show');
 stripClose.css('transition', 'all .6s 1s cubic-bezier(0.23, 1, 0.32, 1)');
 expanded = true;
 }
 };
 var close = function () {
 if (expanded) {
 tile.removeClass('strips__strip--expanded');
 tileText.css('transition', 'all 0.15s 0 cubic-bezier(0.23, 1, 0.32, 1)');
 stripClose.removeClass('strip__close--show');
 stripClose.css('transition', 'all 0.2s 0s cubic-bezier(0.23, 1, 0.32, 1)');
 expanded = false;
 }
 };
 var bindActions = function () {
 tileLink.on('click', open);
 stripClose.on('click', close);
 };
 var init = function () {
 bindActions();
 };
 return { init: init };
}();
Expand.init();
</script>

阅读全文

如何开发一款自己的js或者jquery插件

2015-10-08

引子

现在网上关于js和jquery封装的插件很多，我刚刚接触前端的时候，就很敬佩那些自己写插件的大牛们！因为是他们给网站开发更多的便利，很多网页效果，网上很多现成的插件！那么这些插件是如何写的呢？首先是有扎实的js和jquery技术基础，其次还有一些写插件的方法和技巧。关于js和jquery的技术基础，那是一个慢慢积累的过程。但是关于写插件的一些注意和技巧，本文可以略微介绍一下，方便以后写插件的时候用得到。

阅读全文

js常见的判断移动端或者pc端或者安卓和苹果浏览器的方法总结

2015-10-08

续通过navigator判断浏览器版本或者手机类型，里面介绍了运用navigator判断浏览器类型，在这篇文章基础上做个补充吧！

js 判断安卓或者ios 之indexOf方式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
//判断访问终端
var browser={
versions:function(){
var u = navigator.userAgent, app = navigator.appVersion;
return {
trident: u.indexOf('Trident') > -1, //IE内核
presto: u.indexOf('Presto') > -1, //opera内核
webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
gecko: u.indexOf('Gecko') > -1 &amp;&amp; u.indexOf('KHTML') == -1,//火狐内核
mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或者uc浏览器
iPhone: u.indexOf('iPhone') > -1 , //是否为iPhone或者QQHD浏览器
iPad: u.indexOf('iPad') > -1, //是否iPad
webApp: u.indexOf('Safari') == -1, //是否web应该程序，没有头部与底部
weixin: u.indexOf('MicroMessenger') > -1, //是否微信 （2015-01-22新增）
qq: u.match(/\sQQ/i) == " qq" //是否QQ
};
}(),
language:(navigator.browserLanguage || navigator.language).toLowerCase()
}

阅读全文

通过navigator判断浏览器版本或者手机类型

2015-10-08

今天来谈谈浏览器navigator属性。

javascript 的navigator属性，不常用，但是用处也不少，主要用处是在做浏览器兼容的问题的时候，现在有的网站已经不兼容IE6，用户假如用IE6浏览网页的话，会提示浏览器升级等信息。或者判断是手机用户还是电脑用户，手机用户调整至手机网站，电脑用户之间跳转至电脑网页等等。

阅读全文

JavaScript判断手机号运营商是移动、联通、电信还是其他

2015-10-07

在做WEB项目时，有时候需要根据用户的输入手机号码判断该号的运营商是移动、联通、电信或其他，再根据不同的运营商做出相应的处理，下面介绍js中如何判断手机号的运营商的代码

纯js代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
var isChinaMobile = /^134[0-8]\\d{7}$|^(?:13[5-9]|147|15[0-27-9]|178|18[2-478])\\d{8}$/; //移动方面最新答复 
var isChinaUnion = /^(?:13[0-2]|145|15[56]|176|18[56])\\d{8}$/; //向联通微博确认并未回复 
var isChinaTelcom = /^(?:133|153|177|18[019])\\d{8}$/; //1349号段 电信方面没给出答复，视作不存在 
var isOtherTelphone = /^170([059])\\d{7}$/;//其他运营商
var utils={
checkMobile: function(telphone){
	telphone = this.trim(telphone);
	if(telphone.length !== 11){
		return this.setReturnJson(false, '未检测到正确的手机号码');
	}
	else{
		if(isChinaMobile.test(telphone)){
			return this.setReturnJson(true, '移动', {name: 'ChinaMobile'});
		}
		else if(isChinaUnion.test(telphone)){
			return this.setReturnJson(true, '联通', {name: 'ChinaUnion'});
		}
		else if(isChinaTelcom.test(telphone)){
			return this.setReturnJson(true, '电信', {name: 'ChinaTelcom'});
		}
		else if(isOtherTelphone.test(telphone)){
			var num = isOtherTelphone.exec(telphone);
			return this.setReturnJson(true, '', {name: ''});
		}
		else{
			return this.setReturnJson(false, '未检测到正确的手机号码');
		}
	}
},
setReturnJson: function(status, msg, data){
	if(typeof status !== 'boolean' && typeof status !== 'number'){
		status = false;
	}
	if(typeof msg !== 'string'){
		msg = '';
	}
	return{
		'status': status,
		'msg': msg,
		'data': data
	};
}
}

阅读全文

pace.js页面加载进度条插件

2015-10-07

在页面中引入 Pace.js 和您所选择主题的 CSS 文件，就可以让你的页面拥有漂亮的加载进度和 Ajax 导航效果。不需要挂接到任何代码，自动检测进展。您可以选择颜色和多种效果，有简约，闪光灯，MAC OSX，左侧填充，顶部填充，计数器和弹跳等等。

本文简单介绍插件pace.js.

阅读全文

jQuery中的ajax async同步和异步详解

2015-10-07

async在jquery ajax中是一个同步参数。本篇文章给大家介绍jq中的ajax async同步和异步。

项目中有这样一个需求，使用ajax加载数据返回页面并赋值，然后前端取出该值，这其中涉及到代码的顺序问题，有时后台还未返回数据，但已执行后面代码，所以就会造成取不到值。

阅读全文

移动端开发中的2项总结

2015-09-29

1.head直接添加一下js代码：viewport标签

1
2
3
4
5
6
7
8
9
10
<script>
var phoneWidth = parseInt(window.screen.width);
var phoneScale = phoneWidth/640;
var ua = navigator.userAgent;
if (/Android (\d+\.\d+)/.test(ua)){
document.write('<meta name="viewport" content="width=640, minimum-scale = '+phoneScale+', maximum-scale = '+phoneScale+', target-densitydpi=device-dpi">');
} else {
document.write('<meta name="viewport" content="width=640, user-scalable=no, target-densitydpi=device-dpi" minimal-ui>');
}
</script>

阅读全文

移动前端开发之viewport的深入理解

2015-09-29

在移动设备上进行网页的重构或开发，首先得搞明白的就是移动设备上的viewport了，只有明白了viewport的概念以及弄清楚了跟viewport有关的meta标签的使用，才能更好地让我们的网页适配或响应各种不同分辨率的移动设备。

一、viewport的概念

通俗的讲，移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域，在具体一点，就是浏览器上(也可能是一个app中的webview)用来显示网页的那部分区域，但viewport又不局限于浏览器可视区域的大小，它可能比浏览器的可视区域要大，也可能比浏览器的可视区域要小。在默认情况下，一般来讲，移动设备上的viewport都是要大于浏览器可视区域的，这是因为考虑到移动设备的分辨率相对于桌面电脑来说都比较小，所以为了能在移动设备上正常显示那些传统的为桌面浏览器设计的网站，移动设备上的浏览器都会把自己默认的viewport设为980px或1024px（也可能是其它值，这个是由设备自己决定的），但带来的后果就是浏览器会出现横向滚动条，因为浏览器可视区域的宽度是比这个默认的viewport的宽度要小的。下图列出了一些设备上浏览器的默认viewport的宽度。

阅读全文

移动端各种meta解释说明

2015-09-29

1

一、<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

阅读全文

网页背景图固定不动，不跟随滚动条滚动

2015-09-28

我们在做网页的时候，当背景是一张完整的图片，不动让其跟随滚动条滚动，怎么办？下面详细讲解一下。

CSS代码示例-背景颜色属性(background-color):

1
2
3
4
5
6
7
8
9
<html>
<head>
<title>背景颜色 background-color</title>
<style type="text/css"> body {background-color:#99FF00;} </style> </head>

<body>
<p>这个HTML使用了CSS的background-color属性，将HTML的背景颜色变成翠绿色。<p>
</body>
</html>

阅读全文

js基本功能大全

2015-09-28

1.javascript的数组API：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
//定义数组
var pageIds = new Array();
pageIds.push('A');
数组长度
pageIds.length;
//shift：删除原数组第一项，并返回删除元素的值；如果数组为空则返回undefined
var a = [1,2,3,4,5];
var b = a.shift(); //a：[2,3,4,5] b：1
//unshift：将参数添加到原数组开头，并返回数组的长度
var a = [1,2,3,4,5];
var b = a.unshift(-2,-1); //a：[-2,-1,1,2,3,4,5] b：7
//注：在IE6.0下测试返回值总为undefined，FF2.0下测试返回值为7，所以这个方法的返回值不可靠，需要用返回值时可用splice代替本方法来使用。
//pop：删除原数组最后一项，并返回删除元素的值；如果数组为空则返回undefined
var a = [1,2,3,4,5];
var b = a.pop(); //a：[1,2,3,4] b：5
//push：将参数添加到原数组末尾，并返回数组的长度
var a = [1,2,3,4,5];
var b = a.push(6,7); //a：[1,2,3,4,5,6,7] b：7
//concat：返回一个新数组，是将参数添加到原数组中构成的
var a = [1,2,3,4,5];
var b = a.concat(6,7); //a：[1,2,3,4,5] b：[1,2,3,4,5,6,7]
//splice(start,deleteCount,val1,val2,)：从start位置开始删除deleteCount项，并从该位置起插入val1,val2,
var a = [1,2,3,4,5];
var b = a.splice(2,2,7,8,9); //a：[1,2,7,8,9,5] b：[3,4]
var b = a.splice(0,1); //同shift
a.splice(0,0,-2,-1); var b = a.length; //同unshift
var b = a.splice(a.length-1,1); //同pop
a.splice(a.length,0,6,7); var b = a.length; //同push
//reverse：将数组反序
var a = [1,2,3,4,5];
var b = a.reverse(); //a：[5,4,3,2,1] b：[5,4,3,2,1]
//sort(orderfunction)：按指定的参数对数组进行排序
var a = [1,2,3,4,5];
var b = a.sort(); //a：[1,2,3,4,5] b：[1,2,3,4,5]
//slice(start,end)：返回从原数组中指定开始下标到结束下标之间的项组成的新数组
var a = [1,2,3,4,5];
var b = a.slice(2,5); //a：[1,2,3,4,5] b：[3,4,5]
//join(separator)：将数组的元素组起一个字符串，以separator为分隔符，省略的话则用默认用逗号为分隔符
var a = [1,2,3,4,5];
var b = a.join("|"); //a：[1,2,3,4,5] b："1|2|3|4|5"

阅读全文