|   字数统计: 0(字)

发表于 | 阅读次数
  |   字数统计: 430(字)

发表于 | 分类于 | 阅读次数

css中 *margin-bottom:20px!important;这里的*及!important的作用?

*是区分浏览器兼容性的，写在一条样式里可以区分IE6、IE7和别的浏览器的不同，如：

1
.bor { border:20px solid green; *border:20px solid red ; padding: 30px;width : 300px;}

绿色边框的样式写在前面，这时候所有浏览器都是绿色边框，红色边框的样式用了*，IE6和IE7能识别，其他浏览器不能识别，所以覆盖了前面的绿色边框，所以IE6和IE7显示红色边框，其他浏览器显示绿色边框

!important的作用是提高指定样式规则的应用优先权。写在定义的最后面，例如：

1
box{color:red !important;}

最重要的一点是：IE 6.0一直都不支持这个语法，而其他的浏览器都支持。因此我们就可以利用这一点来分别 比如：

1
.bor{border:20px solid red !important;border:20px solid green;padding: 30px;width : 300px;}

因为ie6不认识!important，后面的绿色边框样式就会覆盖前面那句红色边框样式，而如ie7、火狐等浏览器认识!important，知道这一条样式的优先级要比后面那句高，就只会执行这句红色边框的样式。

1
2
3
4
5
6
7
8
9
10
11
/*ie6 hack*/
	html, *html body{
		background-image: url('about:blank');
		background-attachment:fixed;
	}
	* html #menu {
		/*position: fixed;*/
		position: absolute;
		top: expression(((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+100+'px');
	}

这一段是css hack 解决ie6 兼容性问题
测试IE兼容性可以用IEtester 点这里

IETester包含多个版本的IE，可以方便的用来进行兼容性测试，获取下载或者更多信息可以访问：http://www.my-debugbar.com/wiki/IETester/HomePage

参考教程

css hack
css hack一览
各种css hack情况

  |   字数统计: 632(字)

发表于 | 分类于 | 阅读次数

上面的动画
用传统的回调的方法控制动画实现

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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Promise animation</title>
	<style type="text/css" media="screen">
		.ball{
			width: 40px;
			height: 40px;
			border-radius: 20px;
		}
		.ball1{
			background: red;
		}
		.ball2{
			background: yellow;
		}
		.ball3{
			background: green;
		}
	</style>
</head>
<body>
	<div class="ball ball1" style="margin-left:0px;"></div>
	<div class="ball ball2" style="margin-left:0px;"></div>
	<div class="ball ball3" style="margin-left:0px;"></div>
	<script type="text/javascript">
		
		var ball1 = document.querySelector('.ball1')
		var ball2 = document.querySelector('.ball2')
		var ball3 = document.querySelector('.ball3')
		function animate(ball,distance,callback){
			setTimeout(function(){
				var marginLeft = parseInt(ball.style.marginLeft,10)
				if (marginLeft === distance) {
					callback && callback()
				}
				else {
					if (marginLeft < distance) {
						marginLeft ++
					}
					else{
						marginLeft --
					}
				ball.style.marginLeft = marginLeft+'px'
	
				animate(ball, distance,callback)
				}
			},13)
		}
		
		animate(ball1,100,function(){
			animate(ball2,200,function(){
				animate(ball3,300,function(){
					animate(ball3,150,function(){
						animate(ball2,150,function(){
							animate(ball1,150,function(){
								})
							})
						})
					})
				})
		})
	</script>
</body>
</html>

这种方式存在 回调地狱

我们用promise来实现一下

promise的厉害之处就在于只用了一个api接口同时解决回调地狱和异步异常流程控制，还能轻松处理异步和同步流程混杂，说是JS语言内部缺少的一部分也不为过（实际上已经出现了原生Promise）

这里用bluebird这个库

1
npm install bluebird

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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
 <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Promise animation</title>
	<style type="text/css" media="screen">
		.ball{
			width: 40px;
			height: 40px;
			border-radius: 20px;
		}
		.ball1{
			background: red;
		}
		.ball2{
			background: yellow;
		}
		.ball3{
			background: green;
		}
	</style>
	<script type="text/javascript" src="node_modules/bluebird/js/browser/bluebird.js"></script>
</head>
<body>
	<div class="ball ball1" style="margin-left:0px;"></div>
	<div class="ball ball2" style="margin-left:0px;"></div>
	<div class="ball ball3" style="margin-left:0px;"></div>
	<script type="text/javascript">
		
		var ball1 = document.querySelector('.ball1')
		var ball2 = document.querySelector('.ball2')
		var ball3 = document.querySelector('.ball3')
		function animate(ball,distance,callback){
			setTimeout(function(){
				var marginLeft = parseInt(ball.style.marginLeft,10)
				if (marginLeft === distance) {
					callback && callback()
				}
				else {
					if (marginLeft < distance) {
						marginLeft ++
					}
					else{
						marginLeft --
					}
				ball.style.marginLeft = marginLeft+'px'
	
				animate(ball, distance,callback)
				}
			},13)
		}
		
		// animate(ball1,100,function(){
		// 	animate(ball2,200,function(){
		// 		animate(ball3,300,function(){
		// 			animate(ball3,150,function(){
		// 				animate(ball2,150,function(){
		// 					animate(ball1,150,function(){
		// 						})
		// 					})
		// 				})
		// 			})
		// 		})
		// })
		
		var Promise =window.Promise
		function promiseAnimate(ball,distance){
			return new Promise(function(resolve,reject){
				
				function _animate(){
					
					setTimeout(function(){
						var marginLeft = parseInt(ball.style.marginLeft,10)
						if (marginLeft === distance) {
							resolve()
						}
						else {
							if (marginLeft < distance) {
								marginLeft ++
							}
							else{
								marginLeft --
							}
						ball.style.marginLeft = marginLeft+'px'
			
						_animate()
						}
					},13)
				}
				_animate()
			})
		}
		promiseAnimate(ball1,100)
		.then(function(){
			return promiseAnimate(ball2,200)
		})
		.then(function(){
			return promiseAnimate(ball3,300)
		})
		.then(function(){
			return promiseAnimate(ball3,150)
		})
		.then(function(){
			return promiseAnimate(ball2,150)
		})
		.then(function(){
			return promiseAnimate(ball1,150)
		})
	</script>
</body>
</html>

前面只是初探。
Promise学习什么？

  • ES6的Promise语言标准、Promise/A+ 规范
  • 如何使用
  • 在什么场景使用

Promise是javascript针对异步操作这种场景的解决方案

Javascript异步编程的4种方法

  • 回调函数
  • 事件监听
  • 发布/订阅
  • Promises对象

Promise对象三种状态

  • 未完成（pending）
  • 已完成（fufilled）
  • 失败 （rejected）

参考教程

进击Node.js基础（二）
Javascript异步编程的4种方法
Understanding Async Programming in Node.js

  |   字数统计: 991(字)

发表于 | 分类于 | 阅读次数

CSS Sprite 雪碧图

为了减少http请求数量，加速网页内容显示，很多网站的导航栏图标、登录框图片等，使用的并不是<image>标签，而是CSS Sprite雪碧图。

说到雪碧图，我们需要稍微扯一扯，浏览器端优化。

在下面这篇文章 在浏览器输入url到页面打开，都做了些什么？

我们知道了，http发出和响应的全过程。而要优化页面显示，加快速度，这个过程过程中大部分，我们是控制不了的，我们只能从浏览器端入手来找一些可以做的事情。那么，我们可以做些什么呢？

  • 少发送请求
    • 把要加载的js文件（css文件同理）合并成一个（尽量少）文件，则可以向服务器少发送请求，从而减少等待时间。
  • 压缩文件
    • 使用压缩之后的js、css、img文件，同样可以减少请求时间。这里可以使用gulp，webpack这些自动化工具
  • Css Sprite
    • 这是css的一项技术，将图片尽可能多的合并成一个图片文件，第一次使用的时候加载这张图片，然后浏览器会缓存下来，其他地方再使用的时候就不需要重新请求了。
  • js／css位置
    • css引用建议放在head标签里面；js脚本建议放到body内容的最后，原因：等待js加载或者脚本有错误的时候不会影响html页面的展示。

ps:更多详细内容可以看这里

百度速度统计及优化

github仓库

预览效果

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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<!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>
</head>
<style>
*{margin: 0;
padding: 0;
}
.container{
	width: 220px;
	height: 400px;
	background: #ebfafa;
}
.login-form{
	padding: 15px;
}
.login-input{
	display: block;
	height: 32px;
	width: 188px;
	margin-top: 15px;
	border: 1px solid #adb6c9;
	border-radius: 3px;
	text-indent: 30px;
	font-size: 15px;
}
p{
	height: 13px;
	margin-top: 15px;
}
p label{
	font-size: 13px;
	vertical-align: top;
}
p a{
	font-size: 13px;
	text-decoration: none;
	float: right;
}
.btn{
	width: 190px;
	height: 38px;
	margin-top: 15px;
	border: 0;
	background: url(login.jpg) no-repeat;
	text-indent: -9999em;
	cursor: pointer;
}
.register-btn{
	background-position:0 -38px;
}
hr{margin-top: 20px;}	
</style>
<body>
	<div class="container">
		<form class="login-form">
			<input class="login-input" type="text" placeholder="邮箱/手机号/用户名" />
			<input class="login-input" type="password" placeholder="请输入密码" />
			<p>
				<input type="checkbox" id="autologin">
				<label for="autologin">下次自动登录</label>
				<a href="javascipt:;" title="">忘记密码？</a>
			</p>
			<input type="submit" class="btn login-btn" value="登录" />
			<input type="button" class="btn register-btn" value="注册" />
		</form>
	</div>
</body>
</html>

预览效果

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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8" http-equiv="Content-Type" content="text/html">
	<title>css sprite | 雪碧图</title>
	<style>
		h3,ul{margin: 0;padding: 0;}
		ul{
			list-style: none;
		}
		li{display: block;height: 31px;
			line-height: 31px;
			overflow: hidden;
			border-bottom: 1px solid #dedede;
		}
		li i{background:url(sidebar.png);
			display: inline;
			width: 30px;
			height: 24px;
			float: left;
			margin: 3px 10px 0 0;
		}
		li h3{
			font-size: 14px;
			font-weight:400; 
		}
		.cat{
			width: 150px;
			background: #f8f8f8;
			border:1px solid #bbb ;
		}
		.cat-1 i{
			background-position:0 0; 
		}
		.cat-2 i{
			background-position:0 -24px; 
		}
		.cat-3 i{
			background-position:0 -48px; 
		}
		.cat-4 i{
			background-position:0 -72px; 
		}
		.cat-5 i{
			background-position:0 -96px; 
		}
		.cat-6 i{
			background-position:0 -120px; 
		}
		.cat-7 i{
			background-position:0 -144px; 
		}
		.cat-8 i{
			background-position:0 -168px; 
		}
		.cat-9 i{
			background-position:-40px 0px; 
		}
	</style>
</head>
<body>
	<div class="cat">
		<ul>
			<li class="cat-1">
				<i></i>
				<h3>服装内衣</h3>
			</li>
			<li class="cat-2">
				<i></i>
				<h3>鞋包配饰</h3>
			</li>
			<li class="cat-3">
				<i></i>
				<h3>运动户外</h3>
			</li>
			<li class="cat-4">
				<i></i>
				<h3>珠宝手表</h3>
			</li>
			<li class="cat-5">
				<i></i>
				<h3>手机数码</h3>
			</li>
			<li class="cat-6">
				<i></i>
				<h3>办公家电</h3>
			</li>
			<li class="cat-7">
				<i></i>
				<h3>护肤彩妆</h3>
			</li>
			<li class="cat-8">
				<i></i>
				<h3>母婴用品</h3>
			</li>
			<li class="cat-9">
				<i></i>
				<h3>其他分类</h3>
			</li>
		</ul>
	</div>
</body>
</html>

雪碧图的优点：1、减少http访问次数；
缺点：1、内存缺陷；2、页面缩放有暴露风险3、对爬虫不友好
参考

CssGaga 生成雪碧图工具
慕课网 CSS Sprite雪碧图应用

  |   字数统计: 538(字)

发表于 | 分类于 | 阅读次数

CSS3实现旋转名片效果

效果

技术点

  • -webkit-animation
  • -webkit-box-reflect
  • -webkit-transform
  • 媒体查询

代码

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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>css3名片特效 | 镜心书社</title>
	<link rel="stylesheet" type="text/css" href="style/pic-scroll-out.css">
</head>
<body>
	<img src="images/me.jpg" alt="" class="pic">
	<div class="line"></div>
	<div class="text">A CSS3 Demo. Do you like it?</div>
	<div class="contact">
		<p>E-mail: sha5xiang@gmail.com</p>
		<p>Blog: http://jxdxsw.com</p>
		<p>微信公众号：镜心的小树屋</p>
	</div>
	<!--[if lt IE 9]>
        <script type="text/javascript">
        //<![[
            var box = document.createElement("div"),
                bug = {
                    position:'absolute',
                    'z-index': 9999,
                    top:'-51px',
                    height:'50px',
                    width:'100%',
                    'border-bottom':'1px solid #238432',
                    background:'orange',
                    'text-align': 'center',
                    'line-height': '50px',
                    'font-weight': 'bold'
                }, key, csses = '', timer = null;
            for(key in bug){
                csses += key + ":" + bug[key] + ";";
            }
            box.style.cssText = csses;
            box.setAttribute('id', 'bug');
            box.innerHTML = "这个Demo只为Chrome准备，屌丝浏览器看不到效果~";
            document.getElementsByTagName('body')[0].appendChild(box);
            function ani(){
                timer = setTimeout(ani, 10);
                var top = parseInt(box.style.top);
                if(top >= -1) clearTimeout(timer);
                box.style.top = top + 1 + 'px';
            }
            setTimeout(ani, 800);
        //]]>
        </script>
    <![end if]-->
	<a href="https://github.com/AlexZ33/HTML5_CSS3/tree/master/CSS3_demo"><img style="position: absolute; top: 0; right: 0; border: 0;" src="images/forkme.png" alt="Fork me on GitHub"></a>
</body>
</html>
`
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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
html{
	height: 100%;
	overflow: hidden;
}
body{
	position: relative;
	background: -webkit-gradient(linear,left top,left bottom,from(#666),colo-stop(0.5,#fff),to(#666));
	height: 100%;
	margin: 0;
	padding: 0;
}
.line{
	height:3px;
	background: red;
	opacity: 0.3;
	width: 100%;
	position: absolute;
	top: 50%;
	-webkit-animation:stecth 2s linear;
}
.text{
	height: 90px;
	width: 50%;
	position: absolute;
	left: 50%;
	top:44%;
	color: rgba(168,0,0,0.6);
	font-weight: bold;
	line-height: 45px;
	font-size: 32px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow:clip;
	text-transform: uppercase; 
	text-shadow:3px 3px 5px rgba(130,0,0,0.6);
	-webkit-box-reflect:below -80px -webkit-gradient(linear,0 0,0 100%,from(transparent),to(white));
	-webkit-animation:Tstecth 2s linear;
}
.pic{
	border-radius: 12px;
	position: absolute;
	top: 28%;
	left: 12%;
	opacity: 0.9;
	height: 40%;
	box-shadow: 5px 5px 10px raba(15,13,13,0.6);
	z-index:100;
	-webkit-transform:rotate(-10deg);
	-webkit-animation:pic 1s linear;
}
.contact{
	position:absolute;
	bottom:20%;
	left: 40%;
	left:40%;
	line-height:24px;
	color: #666;
}
.contact p{
	margin:0;
	-webkit-animation:contact 2s linear;
	text-shadow:1px 1px 3px #666;
}
@-webkit-keyframes stecth{
	from{width: 0}
	to {width:100%}
}
@-webkit-keyframes Tstecth{
	0%{width:0;}
	50%{width: 0;}
	100%{width: 50%;}
}
@-webkit-keyframes pic{
	0%{-webkit-transform:rotate(8deg); opacity: 0;}
	20%{-webkit-transform:rotate(8deg);height:0;top:44%;left:18%;opacity: 0;}
	50% {-webkit-transform:rotate(178deg);heihgt:20%;top:36%;left:16%;opacity: 0.5;}
	100%{-webkit-transform:rotate(348deg);height: 40%;top: 28%;left: 12%;opacity: 1;}
}
@-webkit-keyframes contact{
	0%{opacity: 0;}
	50%{opacity: 0;color:#fff;}
	100%{opacity: 1;color: #666;}
}
  |   字数统计: 942(字)

发表于 | 分类于 | 阅读次数

ajax跨域请求

一、什么是跨域

我们先回顾一下域名地址的组成：

1
http:// www . google : 8080 / script/jquery.js
  • http:// （协议号）
  • www （子域名）
  • google （主域名）
  • 8080 （端口号）
  • script/jquery.js （请求的地址）

  • 当协议、子域名、主域名、端口号中任意一个不相同时，都算不同的“域”。

  • 不同的域之间相互请求资源，就叫“跨域”。

比如：http://www.jxdxsw.com/index.html 请求 http://www.unclay.com/sever.php

二、出现跨域问题的情况

工作中需要使用AJAX请求其他域名下的请求，但是会出现拒绝访问的情况，这是因为基于安全的考虑，AJAX只能访问本地的资源，而不能跨域访问。

比如说你的网站域名是jxdsxw.com，想要通过AJAX请求unclay.com域名中的内容，浏览器就会认为是不安全的，所以拒绝访问。

会出现跨域问题的几种情况：

三、处理跨域的方法1 – 代理

这种方式是通过后台(ASP、PHP、JAVA、ASP.NET)获取其他域名下的内容，然后再把获得内容返回到前端，这样因为在同一个域名下，所以就不会出现跨域的问题。

比如在北京（www.beijing.com/sever.php）和上海（www.shanghai.com/sever.php）各有一个服务器，北京的后端（www.beijing.com/sever.php）直接访问上海的服务，然后把获取的响应值返回给前端。也就是北京的服务在后台做了一个代理，前端只需要访问北京的服务器也就相当与访问了上海的服务器。这种代理属于后台的技术，所以不展开叙述。

处理跨域的方法2 – JSONP
jsonp本质上就是一个script的标签

假设在http://www.jxdxsw.com/index.php这个页面中向http://www.unclay.com/getinfo.php提交GET请求，那么我们在www.jxdxsw.com页面中添加如下代码：

1
2
3
4
5
6
7
var eleScript= document.createElement("script"); //创建一个script元素
 
eleScript.type = "text/javascript"; //声明类型、
 
eleScript.src = "http://www.unclay.com/getinfo.php"; //添加src属性 引入跨域访问的url
 
document.getElementsByTagName("HEAD")[0].appendChild(eleScript); //在页面中添加新创建的script元素

当GET请求从http://www.unclay.com/getinfo.php返回时，可以返回一段JavaScript代码，这段代码会自动执行，可以用来负责调用http://www.jxdxsw.com/index.php页面中的一个callback函数。看下面一个列子：

在www.jxdxsw.com页面中：

1
2
3
4
5
6
7
8
<script>
　　function jsonp( json ){
  　
  　document.write( json.name ); //输出镜心
 
}
<script> 
<script src="http://www.unclay.com/getinfo.php"></script>

在www.unclay.com页面中：

　　

1
jsonp({ "name":"镜心","age":8 });

也就是在www.jxdxsw.com页面中声明，在www.unclay.com页面中调用。但是JSONP只支持 “GET” 请求，但不支持 “POST” 请求。

处理跨域的方法3 – XHR2（推荐方法）

以前 xhr时候

这里的 url必须在同域，如果主域同，子域不同是绝对不能跨域的

现在升级成xhr2后

“XHR2” 全称 “XMLHttpRequest Level2” 是HTML5提供的方法，对跨域访问提供了很好的支持，并且还有一些新的功能。

  • IE10一下的版本都不支持

  • 只需要在服务器端头部加上下面两句代码：

    1
    header( "Access-Control-Allow-Origin:*" );

打成*是所有域，如果限定特定的域,我们希望百度和镜心的服务器能跨域请求我们的接口

1
header( 'Access-Control-Allow-Origin:www.baidu.com');

　我们以MDN这个网站为例，看看，就是允许任何域向这个域发起请求

1
header( "Access-Control-Allow-Methods:POST,GET" );

处理跨域的方法4 – 利用hash来进行iframe结构的跨域访问

更多内容参考这两篇博文

iframe跨域访问

JavaScript跨域脚本调用（iframe方式）

  |   字数统计: 564(字)

发表于 | 分类于 | 阅读次数

移动端的WEB相册实例代码

效果

代码：

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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap beign</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	<script src="zepto.min.js"></script>
	<link href="animate.css" rel="stylesheet" type="text/css">
	<style>
	   blockquote, body, button, dd, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, hr, input, legend, li, ol, p, pre, td, textarea, th, ul,img{
		margin: 0;
		padding: 0;
		}
	   body{background:black;overflow:hidden}
	   ul{list-style:none}
	   .clearfix:after{display: block; content: "\20"; height: 0; clear: both; overflow: hidden; visibility: hidden;}/*ie8以上*/
     
	   .img-container li img{}
	   .img-container li {overflow:hidden;float:left;}
	   .large{width:100%;height:100%;position:absolute;top:0px;left:0px;background-color:black}
	</style>
  <body>
	<ul class="img-container clearfix" id="container">
	</ul>
	<div class="large animated fadeInDown" id="large_container" style="display:none">
		<img id="large_img">
	</div>
	<script>
	var total = 17;
	var zWin = $(window);
	var render = function(){
		var tmpl = '';
		var padding = 2;
		var scrollBarWidth = 0;
		var winWidth = $(window).width();
		var picWidth = Math.floor((winWidth-padding*3-scrollBarWidth)/4);
		for(var i=1;i<=total;i++){
			var p = padding;
			if(i%4==1){
				p = 0;
			}
			tmpl+='<li data-id="'+i+'" class="animated bounceIn" style="width:'+picWidth+'px;height:'+picWidth+'px;padding-left:'+p+'px;padding-top:'+padding+'px;"><img src="img/'+i+'.jpg"></li>';
		}
		$('#container').html(tmpl);
	}
	render();
	var cid;
	var wImage = $('#large_img');
	var domImage = wImage[0];
	var loadImg = function(id,callback){
		$('#container').css({height:zWin.height(),'overflow':'hidden'})
		$('#large_container').css({
			width:zWin.width(),
			height:zWin.height()
			//top:$(window).scrollTop()
		}).show();
		var imgsrc = 'img/'+id+'.large.jpg';
		var ImageObj = new Image();
		ImageObj.src = imgsrc;
		ImageObj.onload = function(){
			var w = this.width;
			var h = this.height;
			var winWidth = zWin.width();
			var winHeight = zWin.height();
		    var realw = parseInt((winWidth - winHeight*w/h)/2);
			var realh = parseInt((winHeight - winWidth*h/w)/2);
			wImage.css('width','auto').css('height','auto');
			wImage.css('padding-left','0px').css('padding-top','0px');
			if(h/w>1.2){
				 wImage.attr('src',imgsrc).css('height',winHeight).css('padding-left',realw+'px');;
			}else{	
				 wImage.attr('src',imgsrc).css('width',winWidth).css('padding-top',realh+'px');
			}
			
			callback&&callback();
		}
		
	}
	$('#container').delegate('li','tap',function(){
		var _id = cid = $(this).attr('data-id');
		loadImg(_id);
	});
	$('#large_container').tap(function(){
		$('#container').css({height:'auto','overflow':'auto'})
		$('#large_container').hide();
	});
	$('#large_container').mousedown(function(e){
		e.preventDefault();
	});
	var lock = false;
	$('#large_container').swipeLeft(function(){
		if(lock){
			return;
		}
		cid++;
		
		lock =true;
		loadImg(cid,function(){
			domImage.addEventListener('webkitAnimationEnd',function(){
				wImage.removeClass('animated bounceInRight');
				domImage.removeEventListener('webkitAnimationEnd');
				lock = false;
			},false);
			wImage.addClass('animated bounceInRight');
		});
	});
	$('#large_container').swipeRight(function(){
		if(lock){
			return;
		}
		cid--;
		lock =true;
		if(cid>0){
			loadImg(cid,function(){
				domImage.addEventListener('webkitAnimationEnd',function(){
					wImage.removeClass('animated bounceInLeft');
					domImage.removeEventListener('webkitAnimationEnd');
					lock = false;
				},false);
				wImage.addClass('animated bounceInLeft');
			});
		}else{
			cid = 1;
		}
	});
	</script>
  </body>
</html>

慕课网移动端的WEB相册课程

demo示例预览
github地址

use your mobile phone

二维码


环境参数

  • CSS3
  • HTML5
  • animate.css
  • zepto.js

知识点

  • 针对WEB相册的tap、touch事件
  • CSS3 动画
  • Zepto框架
  • Canvas等知识的应用。

这里存在一个问题，因为用的七牛的图床 url太多图片加载慢 回头研究前端优化时候补上改进

  |   字数统计: 1,879(字)

发表于 | 分类于 | 阅读次数

2017读书计划

我这人比较懒散，兴之所至往往能把一本书一口气看完，或言“毎归私第,阖户启箧取书,读之竟日”。而大多数时候，都是拿起书来提起了兴趣便读一读，失却了兴致就放在一边，所以留下很多“半读品”。

时至今日，再也不想东一榔头西一棒子，捡起什么就看什么。所以又起了建构、丰满自身识见体系的抱负。

于是，便有了这篇2017年读书计划。其实，这不仅仅是一个书单列表，也是一份学习计划。

细心的朋友会发现，它主要涉及三个方面 ：

历史文学阅读+编程知识+经济财务。
历史类将以两宋和伊斯兰文明和美国史为主。
编程以前端为主，兼有建站、小程序到Linux，看学习进度。全栈将是一个长期目标
经济财务类主要是经济理论和服务于cpa考试的财务知识。

有兴趣的书友可以一起参与。

文末可加读书群。

以下所列书目有不少以前已经看过或者开了篇没有看完。

①已读 下面标有此类的将视时间温故

②未读

③读未尽

历史

历史类书籍一直是我的最爱，“一切历史都是当代史。” 这些历史材料就像今日和未来的镜子，镜人，镜心。

易中天老师在《文明的意志与中华的位置》一书中言：

只有中华，伊斯兰，和西方现代才代表了三代文明。同时最具世界性。

所以本年度将以此三者作为读史的重点。

《人类群星闪耀时》①

《你一定喜爱的欧洲极简史》①

《易中天中华史》① 截止2017年1月9日出版的已读

《赫逊河畔谈中国历史》①

《全球通史》① 这本书作为读史的框架不错

《丝绸之路》

《宋代政治史》③

《剑桥中国 辽西夏金元史》①

《剑桥伊朗史》(Cambridge History of Iran) ③

《草原帝国》(The Empire of the Steppes)中文版，作者：（法）格鲁塞(Grousset) ③

《阿拉伯通史》中文版，作者：（美）希提(Philip Khuri Hitti)

《 文明的冲突与世界秩序的重建 》 （美） 赛缪尔.亨廷顿

《 重回耶路撒冷 - 犹太人的三千年 》 （中）张力升

《土耳其通史》①

《埃及通史》①

《费城风云：美国宪法的诞生及启示》

《1491》

《1493》

《殖民地》

《美国宪法的经济观》

《万历十五年》①

《明朝那些事儿》①

《明史讲义》

互联网&编程

《JavaScript设计模式与开发实践》

《JavaScript高级程序设计》

《你不知道的JavaScript》

《jQuery权威指南》

《微信小程序入门指南》

编程相关只是近期想看的 更多内容请留意公众号的技术文章和博客（http://jxdxsw.com）

《数据之巅》①

《大数据时代》①

KK三部曲

《失控》①

《科技想要什么》③

《必然》③

经济&财务

《魔鬼经济学》

《历代经济变革》①

《理念的力量》①

《市场的逻辑》①

《理解公司》①

《国富论》

（《资本论》这本看情况吧）

《激荡30年》①

《哈耶克传》①

《变革中国：市场经济的中国之路》③

《让数字说话：审计就这么简单》③

《一本书读懂财报》③

cpa相关以 镜心的小树屋 推送的笔记为准

文学&写作&相关

《千面英雄》①

《故事：材质、结构、风格和银幕剧作的原理》

《故事策略：电影剧本必备的23个故事段落》

《小说写作教程：虚构文学》

《作家之旅：源自神话的写作要义》

《写作这回事：创作生涯回忆录》 史蒂芬金

《纸牌屋》

《无声告白》

《虫：2.5次世界大战》③

《马克吐温小说全集》③

《迟子建散文》

《三体》①

《皮囊》蔡崇达 ①

注 : 镜心书社 『读书给你听』 系列会读到

《战争与和平》

《雾都孤儿》

《培根随笔》

《毛姆读书笔记》①

《毛姆短篇小说精选集》③

《京华烟云》

《一个陌生女人的来信》①

《査令十字街84号》

《文学回忆录 》③

《纪伯伦散文集》

《世界最好的杂文》

《变形记》①

《三个火枪手》

《朱自清散文集》③

《了不起的盖茨比》①

《东野圭吾全集》

注： 书友可以挑选着看 真的很多

推荐《彷徨之刃》《嫌疑人x的献身》《虚无的十字架》

《24个比利》

《东方快车谋杀案》

《无人生还》

《大江东去》

《巨人的陨落》

思想&社会&哲学

《顾准文集》③

《胡适的北大哲学课（四卷）》

《西方哲学史》伯特兰罗素①

《论美国的民主》①

《旧制度与大革命》①

《君主论论李维》①

《社会契约论》①

《中国哲学简史》冯友兰

《宽容》房龙

《公正》迈克尔?桑德尔 有公开课视频，书友可以去找下

《反对完美》

诗集

《随园诗话》

《人间词话》①

《万叶集》①

注：日本俳句 中译版本众多，不记得以前买的是哪本了，有时间回味下。《言叶之庭》里面经典那句出自于此

杂

《我可以咬你一口吗》

《从0到1》①

《异类》①

《美食家》

《雅舍谈吃》

《如何阅读一本书》①

《自私的基因》

《谈美书简》

《听音乐》罗杰·凯密恩（Roger Kamien）

《认识电影》[美] 路易斯·贾内梯 / [瑞典] 英格玛·伯格曼 [日] 黑泽明 等供图

《七堂极简物理课》

《时间简史》

文末引用狄更斯说过的话：

“这是最好的时代，这是最坏的时代；这是智慧的时代，这是愚蠢的时代；这是信仰的时期，这是怀疑的时期；这是光明的季节，这是黑暗的季节；这是希望之春，这是失望之冬；人们面前有着各样事物，人们面前一无所有；人们正在直登天堂，人们正在直下地狱。”

诸君，有长风起于青萍之末，你可曾听到？

如有疏漏或删减我会在留言中补上，以实际阅读为准

1.10《虫：2.5次世界大战》 已读

1.14 《易中天中华史：国家》 已读

1.16 《变革中国：市场经济的中国之路》 已读

1.21 《宋史十讲》 已读

1.23 《我的剑桥历史笔记》已读

1.27 《如果这就是宋史7》 已读

1.30 《如果这就是宋史6》 已读

2.2 《虫：虫子的世界》 已读

2.5 《如果这就是宋史5》 已读

2.10 《培根随笔》 已读 建议反复阅读

2.13 《你一定爱读的法国极简史》 这本书写的很差 条理不清，语句颠三倒四 看了一半弃了

转战 《法国通史》 吕一民

2.15 《神探伽利略》东野圭吾 已读

2.17 《最璀璨的银河》 刘慈欣经典作品集 已读

有一两篇不太喜欢，大部分比较有意思。推荐

2.21 《法国通史》 吕一民已读 详实有条例，但众所周知的原因，一写到左派或者罢工革命之类的就不那么客观。

2.22 《未来边缘》已读 5个科幻小故事。大刘的脑洞确实大，简直科幻沙漠里的一股清泉。对比同侪的科幻作者的作品就能发现。

2.24 《如果这就是宋史4》 已读 主要是仁宗期间的事

2.25《追杀k星人》 王晋康 10篇科幻短篇 作者的脑洞虽不及大刘 、故事却更为完整，充满人性的冲突与讨论。

  |   字数统计: 2,279(字)

发表于 | 分类于 | 阅读次数

网页定位特效

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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>网页定位导航特效</title>
	<style type="text/css" media="screen">
	*{
		margin: 0;
		padding: 0;
	}
	body{
		font-size: 12px;
		line-height: 1.7;
	}
	li{
		list-style: none;
	}
	#content{
		width: 800px;
		margin: 0 auto;
		padding: 20px;
	}
	#content h1{
		color: #0088bb;
	}
	#content .item{
		padding: 20px;
		margin-bottom: 20px;
		border: 1px dotted #0088bb;
	}
	#content .item h2{
		font-size: 16px;
		font-weight: bold;
		border-bottom:  2px solid #0088bb;
		margin-bottom: 10px;
	}
	#content .item li{
		display: inline;
		margin-right: 10px; 
	}
	#content .item li a img{
		width:230px;
		height: 230px;
		border: none;
	}
	#menu{
		position: fixed;
		top: 100px;
		left: 50%;
		margin: 400px;
		width: 80px;
	}
	#menu ul li a{
		display: block;
		margin: 5px 0;
		font-size: 14px;
		font-weight: bold;
		color: #333;
		width: 80px;
		height: 50px;
		text-decoration:none;
		text-align: center;
	}
	#menu ul li a:hover,
	#menu ul li a.current{
		color: #fff;
		background: #0088bb;
	}
	/*hack*/
	* html #menu {
		position: absolute;
		top: expression(((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+'px');
	}
	</style>
	
	<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			$(window).scroll(function(){
				var top = $(document).scrollTop();
				var menu = $("#menu");
				var items = $("#content").find(".item");
				var currentId="";//当前所在楼层（item）id
				items.each(function(){
					var _this = $(this);
					var itemTop = _this.offset().top;
					if (top>itemTop-200) {
						currentId = "#"+_this.attr("id");
					}
					else{
						return false;
					}
				});
				//给相应楼层链接设置 current这个class，取消其他链接的current
				var currentLink = menu.find(".current")
				if (currentId&&currentLink.attr("href")!=currentId) {
					currentLink.removeClass('current');
					menu.find("[href="+currentId+"]").addClass('current');
				}
			})
		})
	</script>
	
</head>
<body>
<div id="menu">
	<ul>
		<li><a href="#item1">1F 男装</a></li>
		<li><a href="#item2">2F 女装</a></li>
		<li><a href="#item3">3F 美妆</a></li>
		<li><a href="#item4">4F 数码</a></li>
		<li><a href="#item5">5F 母婴</a></li>
	</ul>
</div>
<div id="content">
	<h1>祥华百货</h1>
	<div id="item1" class="item">
		<h2>1F 男装</h2>
		<ul>
			<li><a href="#" class="current"><img src="1F.jpg" alt=""></a></li>
			<li><a href="#"><img src="1F.jpg" alt=""></a></li>
			<li><a href="#"><img src="1F.jpg" alt=""></a></li>
			<li><a href="#"><img src="1F.jpg" alt=""></a></li>
			<li><a href="#"><img src="1F.jpg" alt=""></a></li>
			<li><a href="#"><img src="1F.jpg" alt=""></a></li>
			<li><a href="#"><img src="1F.jpg" alt=""></a></li>
			<li><a href="#"><img src="1F.jpg" alt=""></a></li>
			<li><a href="#"><img src="1F.jpg" alt=""></a></li>
		</ul>
		
	</div>
	<div id="item2" class="item">
		<h2>2F 女装</h2>
		<ul>
			<li><a href="#"><img src="2F.jpg" alt=""></a></li>
			<li><a href="#"><img src="2F.jpg" alt=""></a></li>
			<li><a href="#"><img src="2F.jpg" alt=""></a></li>
			<li><a href="#"><img src="2F.jpg" alt=""></a></li>
			<li><a href="#"><img src="2F.jpg" alt=""></a></li>
			<li><a href="#"><img src="2F.jpg" alt=""></a></li>
			<li><a href="#"><img src="2F.jpg" alt=""></a></li>
			<li><a href="#"><img src="2F.jpg" alt=""></a></li>
			<li><a href="#"><img src="2F.jpg" alt=""></a></li>
		</ul>
		
	</div>
	<div id="item3" class="item">
		<h2>3F 美妆</h2>
		<ul>
			<li><a href="#"><img src="3F.jpg" alt=""></a></li>
			<li><a href="#"><img src="3F.jpg" alt=""></a></li>
			<li><a href="#"><img src="3F.jpg" alt=""></a></li>
			<li><a href="#"><img src="3F.jpg" alt=""></a></li>
			<li><a href="#"><img src="3F.jpg" alt=""></a></li>
			<li><a href="#"><img src="3F.jpg" alt=""></a></li>
			<li><a href="#"><img src="3F.jpg" alt=""></a></li>
			<li><a href="#"><img src="3F.jpg" alt=""></a></li>
			<li><a href="#"><img src="3F.jpg" alt=""></a></li>
		</ul>
		
	</div>
	<div id="item4" class="item">
		<h2>4F 数码</h2>
		<ul>
			<li><a href="#"><img src="4F.png" alt=""></a></li>
			<li><a href="#"><img src="4F.png" alt=""></a></li>
			<li><a href="#"><img src="4F.png" alt=""></a></li>
			<li><a href="#"><img src="4F.png" alt=""></a></li>
			<li><a href="#"><img src="4F.png" alt=""></a></li>
			<li><a href="#"><img src="4F.png" alt=""></a></li>
			<li><a href="#"><img src="4F.png" alt=""></a></li>
			<li><a href="#"><img src="4F.png" alt=""></a></li>
			<li><a href="#"><img src="4F.png" alt=""></a></li>
		</ul>
		
	</div>
	<div id="item5" class="item">
		<h2>5F 母婴</h2>
		<ul>
			<li><a href="#"><img src="5F.jpg" alt=""></a></li>
			<li><a href="#"><img src="5F.jpg" alt=""></a></li>
			<li><a href="#"><img src="5F.jpg" alt=""></a></li>
			<li><a href="#"><img src="5F.jpg" alt=""></a></li>
			<li><a href="#"><img src="5F.jpg" alt=""></a></li>
			<li><a href="#"><img src="5F.jpg" alt=""></a></li>
			<li><a href="#"><img src="5F.jpg" alt=""></a></li>
			<li><a href="#"><img src="5F.jpg" alt=""></a></li>
			<li><a href="#"><img src="5F.jpg" alt=""></a></li>
		</ul>
		
	</div>
</div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
/*ie6 hack*/
	html, *html body{
		background-image: url('about:blank');
		background-attachment:fixed;
	}
	* html #menu {
		/*position: fixed;*/
		position: absolute;
		top: expression(((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+100+'px');
	}

这一段是css hack 解决ie6 兼容性问题
测试IE兼容性可以用IEtester 点这里

IETester包含多个版本的IE，可以方便的用来进行兼容性测试，获取下载或者更多信息可以访问：http://www.my-debugbar.com/wiki/IETester/HomePage

原生javascript实现代码

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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>网页定位导航特效</title>
	<style type="text/css" media="screen">
	*{
		margin: 0;
		padding: 0;
	}
	body{
		font-size: 12px;
		line-height: 1.7;
	}
	li{
		list-style: none;
	}
	#content{
		width: 800px;
		margin: 0 auto;
		padding: 20px;
	}
	#content h1{
		color: #0088bb;
	}
	#content .item{
		padding: 20px;
		margin-bottom: 20px;
		border: 1px dotted #0088bb;
	}
	#content .item h2{
		font-size: 16px;
		font-weight: bold;
		border-bottom:  2px solid #0088bb;
		margin-bottom: 10px;
	}
	#content .item li{
		display: inline;
		margin-right: 10px; 
	}
	#content .item li a img{
		width:230px;
		height: 230px;
		border: none;
	}
	#menu{
		position: fixed;
		top: 100px;
		left: 50%;
		margin: 400px;
		width: 80px;
	}
	#menu ul li a{
		display: block;
		margin: 5px 0;
		font-size: 14px;
		font-weight: bold;
		color: #333;
		width: 80px;
		height: 50px;
		text-decoration:none;
		text-align: center;
	}
	#menu ul li a:hover,
	#menu ul li a.current{
		color: #fff;
		background: #0088bb;
	}
	/*ie6 hack*/
	html, *html body{
		background-image: url('about:blank');
		background-attachment:fixed;
	}
	* html #menu {
		/*position: fixed;*/
		position: absolute;
		top: expression(((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+100+'px');
	}
	</style>
	
	<script type="text/javascript">
	//定义getByClassName函数，让函数实现根据class name获取对象并返回
    function getByClassName(obj, cls){
        var elements = obj.getElementsByTagName("*");
        var result = [];
        for(var i = 0; i < elements.length; i++){
            if(elements[i].className == cls){
                result.push(elements[i]);
            }
        }
        return result;
    }
    
	function hasClass( obj, cls ){ 
	    return obj.className.match(new RegExp("(\\s|^)" + cls + "(\\s|$)"));
	}
	
	function removeClass( obj, cls ){ 
	    if( hasClass( obj, cls )){ 
		    //remove
			var reg = new RegExp("(\\s|^)" + cls + "(\\s|$)");
			obj.className = obj.className.replace(reg, "");
		}
	}
   
    //定义getByClassName函数，让函数实现给对象增加class 
    function addClass(obj, cls){
        if(!hasClass(obj, cls)){
            obj.className += " " + cls;
        }
    }
	
	window.onload = function(){ 
		
	    window.onscroll = function(){ 		
		    var top = document.documentElement.scrollTop || document.body.scrollTop;
			
			var menus = document.getElementById("menu").getElementsByTagName("a");
			
			var items = getByClassName(document.getElementById("content"), "item");
			
			var currentId = "";
			
			for ( var i=0; i< items.length; i++ ){ 
			    var _item = items[i];
			    var _itemTop = _item.offsetTop;
				if( top > _itemTop - 200 ){ 
				    currentId = _item.id;
				} else { 
				    break;
				}			
			}
		
			 				
      //请补充此处代码，给正确的menu下的a元素class赋值current
           if(currentId){
               for(var j = 0; j < menus.length; j++){
                   var _menu = menus[j];
                   var _href = _menu.href.split("#");
                   if(_href[_href.length - 1] != currentId){
                       removeClass(_menu, "current");
                   } else {
                       addClass(_menu, "current");
                   }
               }
           } 
      	
		}	
	}
	</script>
	
</head>
<body>
<div id="menu">
	<ul>
		<li><a href="#item1">1F 男装</a></li>
		<li><a href="#item2">2F 女装</a></li>
		<li><a href="#item3">3F 美妆</a></li>
		<li><a href="#item4">4F 数码</a></li>
		<li><a href="#item5">5F 母婴</a></li>
	</ul>
</div>
<div id="content">
	<h1>祥华百货</h1>
	<div id="item1" class="item">
		<h2>1F 男装</h2>
		<ul>
			<li><a href="#" class="current"><img src="1F.jpg" alt=""></a></li>
			<li><a href="#"><img src="1F.jpg" alt=""></a></li>
			<li><a href="#"><img src="1F.jpg" alt=""></a></li>
			<li><a href="#"><img src="1F.jpg" alt=""></a></li>
			<li><a href="#"><img src="1F.jpg" alt=""></a></li>
			<li><a href="#"><img src="1F.jpg" alt=""></a></li>
			<li><a href="#"><img src="1F.jpg" alt=""></a></li>
			<li><a href="#"><img src="1F.jpg" alt=""></a></li>
			<li><a href="#"><img src="1F.jpg" alt=""></a></li>
		</ul>
		
	</div>
	<div id="item2" class="item">
		<h2>2F 女装</h2>
		<ul>
			<li><a href="#"><img src="2F.jpg" alt=""></a></li>
			<li><a href="#"><img src="2F.jpg" alt=""></a></li>
			<li><a href="#"><img src="2F.jpg" alt=""></a></li>
			<li><a href="#"><img src="2F.jpg" alt=""></a></li>
			<li><a href="#"><img src="2F.jpg" alt=""></a></li>
			<li><a href="#"><img src="2F.jpg" alt=""></a></li>
			<li><a href="#"><img src="2F.jpg" alt=""></a></li>
			<li><a href="#"><img src="2F.jpg" alt=""></a></li>
			<li><a href="#"><img src="2F.jpg" alt=""></a></li>
		</ul>
		
	</div>
	<div id="item3" class="item">
		<h2>3F 美妆</h2>
		<ul>
			<li><a href="#"><img src="3F.jpg" alt=""></a></li>
			<li><a href="#"><img src="3F.jpg" alt=""></a></li>
			<li><a href="#"><img src="3F.jpg" alt=""></a></li>
			<li><a href="#"><img src="3F.jpg" alt=""></a></li>
			<li><a href="#"><img src="3F.jpg" alt=""></a></li>
			<li><a href="#"><img src="3F.jpg" alt=""></a></li>
			<li><a href="#"><img src="3F.jpg" alt=""></a></li>
			<li><a href="#"><img src="3F.jpg" alt=""></a></li>
			<li><a href="#"><img src="3F.jpg" alt=""></a></li>
		</ul>
		
	</div>
	<div id="item4" class="item">
		<h2>4F 数码</h2>
		<ul>
			<li><a href="#"><img src="4F.png" alt=""></a></li>
			<li><a href="#"><img src="4F.png" alt=""></a></li>
			<li><a href="#"><img src="4F.png" alt=""></a></li>
			<li><a href="#"><img src="4F.png" alt=""></a></li>
			<li><a href="#"><img src="4F.png" alt=""></a></li>
			<li><a href="#"><img src="4F.png" alt=""></a></li>
			<li><a href="#"><img src="4F.png" alt=""></a></li>
			<li><a href="#"><img src="4F.png" alt=""></a></li>
			<li><a href="#"><img src="4F.png" alt=""></a></li>
		</ul>
		
	</div>
	<div id="item5" class="item">
		<h2>5F 母婴</h2>
		<ul>
			<li><a href="#"><img src="5F.jpg" alt=""></a></li>
			<li><a href="#"><img src="5F.jpg" alt=""></a></li>
			<li><a href="#"><img src="5F.jpg" alt=""></a></li>
			<li><a href="#"><img src="5F.jpg" alt=""></a></li>
			<li><a href="#"><img src="5F.jpg" alt=""></a></li>
			<li><a href="#"><img src="5F.jpg" alt=""></a></li>
			<li><a href="#"><img src="5F.jpg" alt=""></a></li>
			<li><a href="#"><img src="5F.jpg" alt=""></a></li>
			<li><a href="#"><img src="5F.jpg" alt=""></a></li>
		</ul>
		
	</div>
</div>
</body>
</html>

因为IE 对getElementsByClassName支持比较差，这里我们创建一个函数 根据class name 获取元素

1
2
3
4
5
6
7
8
9
10
11
function getByClassName(obj,cls){
			var elements =obj.getElementsByTagName("*");
			var result = [];
			for (var i = 0; i < elements.length; i++)
			{
				if (elements[i].className == cls) {
					result.push(elements[i]);
				}
				//注意：这里的elements[i].className == cls判断条件在多个class情况下是不成立的，所以在页面复杂，class很多时候就不能这么用，这里不赘述
			return result;
		}

"(\\s|^)"是什么意思?

\s

空白符

^

  • 在字符集中表示反向选取，比如[^abc] 表示字符集中不包括 a,b,c
  • 表示字符串的开始
    所以(\\s|^)表示 空白符或者字符串的开始

备注：代码里的\s有两个\ ,是java,js等一些语言里的转义

正则表达式

1
RegExp("(\\s|^)"+cls+"(\\s|$)")

含有传入参数cls 且 首尾有空白符或者什么都没有的的字符串

  • \\s|^ 表示空白符或者 什么都没有（起始位置）
  • \\s|$ 表示 空白符或者什么都没有（结束位置）
    例如：”className” 或者 “ className ”

参考：

慕课网 网页定位导航特效
正则表达式语法手册，以及一些实例
揭开正则表达式的神秘面纱

  |   字数统计: 1,260(字)

发表于 | 分类于 | 阅读次数

如何评价嵇康？

本文系博主回答知乎同名问题所写文章，谢绝转载。
知乎问题链接

这个问题太大了，大到可以写一篇论文了。
不过我觉得评价文人何必争第一第二。（虽然我认为嵇康强点）
所谓“文无第一，武无第二”。文学哲学上的造诣你很难用量化对比的方式进行评析，只能从审美情趣的角度来。“嵇康师心以遣论，阮籍使气以命诗”，这二人一个文章写的好学问高，一个诗词作的好格调高。很难说是孰优孰劣。而且我们在讨论三国两晋南北朝时期的人物时候，并不能和当时的历史割裂开来，他们是一种时代群像，有着特定的历史含义和文化意象。在这一时期，几乎每一项人文学科我们都能找到开拓性的巨匠，乱世出英雄，乱世也出哲人思想家和文学巨匠。
曹操、曹丕、曹植、诸葛亮、“竹林七贤”、“建安风骨”几乎每一位都开一代之文宗。不过最能代表三国两晋南北朝的时代文化特征的，并不是曹操诸葛亮他们，而是一群被称为“魏晋文士”的人。曹操诸葛亮他们毕竟是残酷时代的制造者和参与者，而真正的文人却是放荡形骸、纵情自然，因此也称为了主流价值体系的叛离者。真正的魏晋风度。
就是他们这一群主流价值体系的叛离者为我们描绘出了一副丧乱年代的历史群像。在这样一个混乱年代的大舞台，一大群政治家、军事家、雄辩家、阴谋家、文化精英活跃其上。贵族有贵族的派头，布衣有布衣的风采。美男子受崇尚，丑男子也有充分的表演机会。七贤中的刘伶生得矮小丑陋，可他能量不小，一辈子花样百出。丑人能像他，也能活得魅力四射。
在此时代，又是一个充满时尚的年代，而时尚的倡导者就是这些魏晋文士。时尚随处可见。穿漂亮衣裳是时尚，扪虱而谈也是时尚；平民走路像军人，时尚；贵族躺在路边睡大觉，同样时尚……
这些时尚中，更是产生了两个特殊艺术人格的意象，这两个意象非常奇特，难以解释，但却贯通古今。
第一个意象是阮籍的哭。他经常坐着牛车往前走，到哪里也不知道。当时的路，四通八达的不多。走着走着就走不通了，于是牛车停下来，他就嚎啕大哭，然后让车子调转头，走另一条里，等再走到了尽头，又嚎啕大哭。这是荒野中的哭号，没有任何人能看见，他是在哭给自己听。
他这种哭号在现在人看来很是后现代主义。

中古的文人们不是特别认同，王勃在《滕王阁序》中言：
孟尝高洁，空余报国之情；阮籍猖狂，岂效穷途之哭！
他对此噗之以鼻，以为不值得效仿。
然而我们真的能这么理解吗，显然不是的，之前我们说过，这是一种特殊艺术人格的神秘部位。
余秋雨在答北大学生问时候是这么解释的

他这种哭，既不是针对古人，也不是针对世道，也不针对自己。那是一种宏大的哭，具有整体象征意义的哭，却又说不清象征什么。我看中的> 正是这点。好像是在哭人生途穷、长天冷漠。更重要的是，这种苦又是与一般意义上的悲伤不同，他一次次地重复寻找这种哭的机会，一次次> 寻找走不通的路。他追求这种体验，而且是一种隐秘的、纯个人的体验。这是极为超越的大人格、大行为，足以凌驾古今中外。

常人无法理解阮籍，就跟钥匙和锁不配套一样。他这把孤独的锁，找不到钥匙，一如“高尚流水”，得真正碰到知音。
第二个意象是“啸”。（待续 先把文章骨架写出来 时间来不及）
总之，那年代挺丰富的，也挺有趣的，城里的各色人等，各成姿态。中国的历史长河，这样的景观可不多。竹林七贤，是魏晋风度的一个缩影。而我们的嵇康，走在最前面。
嵇康比阮籍更厉害之处在于，他是大学问家，对道家和易经的研究很深。。。。。待续

身贵名贱。荣辱何在。贵得肆志。纵心无悔。
人生寿促。天地长久。百年之期。孰云其寿。

旷然无忧患，宁然无思虑。