风中的纸屑

我天性不宜交际。在多数场合,我不是觉得对方乏味,就是害怕对方觉得我乏味。可是我既不愿忍受对方的乏味,也不愿费劲使自己显得有趣,那都太累了。我独处时最轻松,因为我不觉得自己乏味,即使乏味,也自己承受,不累及他人,无需感到不安。——周国平

icon动画图标

当鼠标指针穿过元素时,会发生 mouseenter 事件,与 mouseover 事件不同,只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件。如果鼠标指针穿过任何子元素,同样会触发 mouseover 事件。

animate() 方法执行 CSS 属性集的自定义动画 例子:

1
$(".btn1").click(function(){ $("#box").animate({height:"300px"}); });

效果地址:http://www.29ym.com/demo/icoanimate.html

富爸爸穷爸爸

为了钱而工作,得到报酬后,贪婪的买回来一堆没用的东西,形成了一种模式:起床-上班-付账单-再起床-再上班-再付账。

为了跳出这种恶性循环,首先要转换思维方式,不能为了钱工作,而是让钱为你工作。

正因为你没钱,就更要去学习。你所拥有的唯一真正的资产就是你的头脑。

CSS实现电池充电效果

学会如何运用animation属性的定义以及效果

1
animation

属性是一个简写属性,用于设置六个动画属性:

  • animation-name,绑定动画keyframe
  • animation-duration,规定完成动画所花费的时间
  • animation-timing-function,规定动画的速度曲线
  • animation-delay,规定动画开始之前的延迟
  • animation-iteration-count,规定动画应该播放的次数
  • animation-direction,规定是否应该轮流反向播放

效果地址:http://www.29ym.com/demo/dianchi.html

JQ上下切换幻灯效果

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
$(function(){
var index=0;
var len=$(".num>li").length;
var adTimer;
$(".num li").mouseover(function(){
index=$(".num li").index(this);
showImg(index);
}).eq(0).mouseover();
$(".ad").hover(function(){
clearInterval(adTimer);
},function(){
adTimer=setInterval(function(){
showImg(index)
index++;
if(index==len){
index=0;
}
}, 3000);
}).trigger("mouseleave")
function showImg(index){
var adHeight=$(".ad").height();
$(".slider").stop(true,false).animate(
{top:-adHeight*index},1000
);
$(".num li").removeClass('on').eq(index)
.addClass("on");
}
})

幻灯效果地址

较常用的头部META信息

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
<!-- 字体编码 -->
<meta charset="utf-8" />
<!-- 关键字 -->
<meta name="keywords" content="" />
<!-- 说明 -->
<meta name="description" content="" />
<!-- 作者 -->
<meta name="author" content="" />
<!-- 设置文档宽度、是否缩放 -->
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" />
<!-- 优先使用IE最新版本或chrome -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<!-- 360读取到这个标签立即钱换到极速模式 -->
<meta name="renderer" content="webkit" />
<!-- 禁止百度转码 -->
<meta http-equiv="Cache-Control" content="no-siteapp" />
<!-- UC强制竖屏 -->
<meta name="screen-orientation" content="portrait" />
<!-- QQ强制竖屏 -->
<meta name="x5-orientation" content="portrait" />
<!-- UC强制全屏 -->
<meta name="full-scerrn" content="yes" />
<!-- QQ强制全屏 -->
<meta name="x5-fullscreen" content="ture" />
<!-- QQ应用模式 -->
<meta name="x5-page-mode" content="app" />
<!-- UC应用模式 -->
<meta name="browsermode" content="application">
<!-- window phone 点亮无高光 -->
<meta name="msapplication-tap-highlight" content="no" />
<!-- 安卓设备不自动识别邮件地址 -->
<meta name="format-detection" name="email=no" />
<!-- iOS设备 -->
<!-- 添加到主屏幕的标题 -->
<meta name="apple-mobile-web-app-title" content="标题" />
<!-- 是否启用webApp全屏 -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<!-- 设置状态栏的背景颜色,启用webapp模式时生效 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent/black/default" /><!-- 半透明/黑色/默认白色 -->
<!-- 禁止数字识别为电话号码 -->
<meta name="format-detection" content="telephone=no" />
<!--
iOS图标
iPhone/iTouch默认是57*57
iPad,72*72,可以没有,但推荐有
Retina iPhone/Retina iTouch,114*114,可以没有,但推荐有
Retina iPad,144*144,可以没有,但推荐有
iPhone 6 plus是180*180,iPhone 6 是120*120
-->
<link rel="apple--touch-icon-precomposed" sizes="width*height" href="xxx.png" />
<!-- iOS启动画面 -->
<!-- iPad启动是不包含状态栏的 -->
<!-- 标准分辨率:1、竖屏(768*1004);2、横屏(1024*748)
Retina:1、竖屏(1536*2008);2、横屏(2048*1496) -->
<!-- iPhone/iTouch启动是包含状态栏的 -->
<!-- 标准分辨率(320*480)、Retina(640*960)、iPhone 5/iTouch 5(640*1136) -->
<link rel="apple-touch-startup-image" sizes="width*height" href="xxx.png" />
<!-- iPhone 6对应的图片大小是750×1294,iPhone 6 Plus 对应的是1242×2148 -->
<link rel="apple-touch-startup-image" href="xxx.png" media="(device-width:375px)">
<link rel="apple-touch-startup-image" href="xxx.png" media="(device-width:414px)">
<!-- 智能添加广告条 -->
<meta name="apple-itunes-app" content="app-id=myappstoreID,affiliate-data=myaffiliatedata,app-argument=myurl" />

门前

我多么希望,有一个门口
早晨,阳光照在草上

我们站着
扶着自己的门扇
门很低,但太阳是明亮的

草在结它的种子
风在摇它的叶子
我们站着,不说话
就十分美好

门头是矮矮的,有阳
光照进来,我们靠着什
麽都不说,就十分美好。

有门,不用开开
是我们的,就十分美好

早晨,黑夜还要流浪
我们把六弦琴交给他
我们不走了

我们需要土地
需要永不毁灭的土地
我们要乘着它
度过一生

土地是粗糙的,有时狭隘
然而,它有历史
有一份天空,一份月亮
一份露水和早晨

我们爱土地
我们站着
用木鞋挖着泥土
门也晒热了
我们轻轻靠着,十分美好

墙后的草
不会再长大了,它只用指
尖,触了触阳光

 

淘宝搜索框切换效果

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
$(function(){
$(".bodys p").not(':first').hide();
$(".searchbox ul li").mouseover(function(){
var index=$(this).index();
if(index==0){
$(this).find("a").addClass
("style1");
$("li").eq(1).find("a")
.removeClass("style2");
$("li").eq(2).find("a").
removeClass("style3");
}
if (index==1) {
$(this).find("a").addClass
("style2");
$("li").eq(0).find("a")
.removeClass("style1");
$("li").eq(2).find("a")
.removeClass("style3");
}
if (index==2) {
$(this).find("a").addClass
("style3");
$("li").eq(0).find("a")
.removeClass("style1");
$("li").eq(1).find("a")
.removeClass("style2");
};
var index=$(this).index();
$(".bodys p").eq(index).show()
.siblings().hide();
})
})

效果地址

http://www.29ym.com/demo/tb_tab.html