用CSS美化被鼠标选中的文字的样式
css:
/* webkit, opera, IE9 */
div.highlightBlue::selection { background:lightblue; } /* mozilla firefox */ div.highlightBlue::-moz-selection { background:lightblue; } /* webkit, opera, IE9 */ div.highlightPink::selection { background:pink; } /* mozilla firefox */ div.highlightPink::-moz-selection { background:pink; } 效果: | ||||||||
给鼠标右键增加菜单项 <section contextmenu="mymenu"> 为了让代码清晰整洁 我会把菜单放到这个元素内部 <menu type="context" id="mymenu" style="background: #eee; border: 1px solid #ccc; padding: 10px;"> <menuitem label="重新加载本文" οnclick="window.location.reload();" icon="/images/refresh-icon.png"></menuitem> <menuitem label="跳跃至评论区" οnclick="window.location='#comments';" icon="/images/comment_icon.gif"></menuitem> <menu label="分享本文至..." icon="/images/share_icon.gif"> <menuitem label="新浪微博" icon="/images/twitter_icon.gif" οnclick="goTo('//twitter.com/intent/tweet?text=' + document.title + ': ' + window.location.href);"></menuitem> <menuitem label="QQ空间" icon="/images/facebook_icon16x16.gif" οnclick="goTo('//facebook.com/sharer/sharer.php?u=' + window.location.href);"></menuitem> </menu> </menu> </section> | ||||||||
HTML5里的placeholder属性<input type="text" name="first_name" placeholder="你的姓名..." /> 改变提示样式: /* all */ ::-webkit-input-placeholder { color:#f00; } ::-moz-placeholder { color:#f00; } /* firefox 19+ */ :-ms-input-placeholder { color:#f00; } /* ie */ input:-moz-placeholder { color:#f00; } /* individual: webkit */ #field2::-webkit-input-placeholder { color:#00f; } #field3::-webkit-input-placeholder { color:#090; background:lightgreen; text-transform:uppercase; } #field4::-webkit-input-placeholder { font-style:italic; text-decoration:overline; letter-spacing:3px; color:#999; } /* individual: mozilla */ #field2::-moz-placeholder { color:#00f; } #field3::-moz-placeholder { color:#090; background:lightgreen; text-transform:uppercase; } #field4::-moz-placeholder { font-style:italic; text-decoration:overline; letter-spacing:3px; color:#999; } | ||||||||
HTML5里autofocus属性 自动聚焦<input autofocus="autofocus" /> <button autofocus="autofocus">Hi!</button> <textarea autofocus="autofocus"></textarea> | ||||||||
CSS transform 简介CSS Transform效果是指通过在浏览器里让网页元素移动、旋转、透明、模糊等方法来实现改变其外观的技术。在CSS里定义的变化动作会在页面生成前应用到网页元素上,所以你看不到发生的过程。然而,这些变化动作也可以由 在下面,我们放置了4个完全相同的用
<style> div { width:100px; height:100px; background-color: #eee; -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; transition: all 1s ease-in-out; } div:hover { background-color: #fc3; -webkit-transform: scale(2); -moz-transform: scale(2); -o-transform: scale(2); -ms-transform: scale(2); transform: ) scale(2); } </style> </head> <body> <div></div> | ||||||||
Lazy Load, 延迟加载图片的 jQuery 插件Lazy Load 依赖于 jQuery. 请将下列代码加入页面
你必须修改 HTML 代码. 在
处理图片的代码如下.
源:http://www.neoease.com/lazy-load-jquery-plugin-delay-load-image/
|
jQuery 效果 - slideDown() 方法slideDown() 方法通过使用滑动效果,显示隐藏的被选元素。 语法$(selector).slideDown(speed,callback)
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".btn1").click(function(){
$("p").slideUp();
});
$(".btn2").click(function(){
$("p").slideDown();
});
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<button class="btn1">Hide</button>
<button class="btn2">Show</button>
</body>
</html>
| ||||||
jQuery响应式图片画廊插件S Gallery | ||||||
各种菜单导航
| ||||||
CSS3圆角的制作CSS3圆角技术能非常好的美化你的页面效果,而且避免了使用图片辅助,一则省去了制作图片的时间,二则省去了浏览器加载图片造成的延迟和带 宽。如今,这种利用CSS制作圆角的技术已经得到了大多数主流浏览器的支持,包括Safari,谷歌浏览器,IE,Opera和火狐浏览器。下面让我们来 看看 语法和说明在CSS3中用来生成圆角效果的属性是 .roundElement { border-radius: 10px; } 上面的这句代码的作用是设置一个元素的四个角的弧度半径值都为10px。你也可以对每个角单独指定: .pearElement { border-top-left-radius: 7px; border-top-right-radius: 5px; border-bottom-right-radius: 6px; border-bottom-left-radius: 8px; } 如果你觉得上面的写法太复杂,可以使用下面 .oddRoundElement { border-radius: 12px 5px 12px 5px; /* or */ border-radius: 12px 5px; } 四个值分别代表的是top-left, top-right, bottom-right, bottom-left四个角。 | ||||||
CSS3 Columns:比table更好用的分列式布局方法CSS里一直有一个让我们头疼的问题,就是创建布局很麻烦。当然,有很多方式,有很多技术都可以创建各种布局,但我们总觉得CSS里应该提供一 些新属性,让我们能更好的管理布局。幸运的是,CSS3里提供了一批新的创建列式布局的column属性,有了这些属性,我们不需要再使用 CSS代码CSS3里的column系列属性提供了各种不同的功能,通过组合使用它们,你能得到相应的任何分栏式布局:
要想制作出一个漂亮的分列布局,你至少需要用到 /* 3 列,每列之间10px间距 */ ul.col-3 { column-count: 3; column-gap: 10px; } 如果你想美化一下列之间的空隙,这也很简单: /* 3 列,每列之间10px间距 ,带有金色的隔离线 */ ul.col-3 { column-count: 3; column-gap: 10px; column-rule: 1px solid #fc0; } |
Vendor Prefix:为什么需要浏览器引擎前缀
浏览器引擎前缀(Vendor Prefix)是什么?
Vendor prefix—浏览器引擎前缀,是一些放在CSS属性前的小字符串,用来确保这种属性只在特定的浏览器渲染引擎下才能识别和生效。谷歌浏览器和 Safari浏览器使用的是WebKit渲染引擎,火狐浏览器使用的是Gecko引擎,Internet Explorer使用的是Trident引擎,Opera以前使用Presto引擎,后改为WebKit引擎。一种浏览器引擎里一般不实现其它引擎前缀标 识的CSS属性,但由于以WebKit为引擎的移动浏览器相当流行,火狐等浏览器在其移动版里也实现了部分WebKit引擎前缀的CSS属性。
Vendor prefix—浏览器引擎前缀,是一些放在CSS属性前的小字符串,用来确保这种属性只在特定的浏览器渲染引擎下才能识别和生效。谷歌浏览器和 Safari浏览器使用的是WebKit渲染引擎,火狐浏览器使用的是Gecko引擎,Internet Explorer使用的是Trident引擎,Opera以前使用Presto引擎,后改为WebKit引擎。一种浏览器引擎里一般不实现其它引擎前缀标 识的CSS属性,但由于以WebKit为引擎的移动浏览器相当流行,火狐等浏览器在其移动版里也实现了部分WebKit引擎前缀的CSS属性。
浏览器引擎前缀(Vendor Prefix)有哪些?
-moz- /* 火狐等使用Mozilla浏览器引擎的浏览器 */
-webkit- /* Safari, 谷歌浏览器等使用Webkit引擎的浏览器 */
-o- /* Opera浏览器(早期) */
-ms- /* Internet Explorer (不一定) */
-moz- /* 火狐等使用Mozilla浏览器引擎的浏览器 */
-webkit- /* Safari, 谷歌浏览器等使用Webkit引擎的浏览器 */
-o- /* Opera浏览器(早期) */
-ms- /* Internet Explorer (不一定) */
为什么需要浏览器引擎前缀(Vendor Prefix)?
这些浏览器引擎前缀(Vendor Prefix)主要是各种浏览器用来试验或测试新出现的CSS3属性特征。可以总结为以下3点:
- 试验一些还未成为标准的的CSS属性——也许永远不会成为标准
- 对新出现的标准的CSS3属性特征做实验性的实现
- 对CSS3中一些新属性做等效语义的个性实现
这些前缀并非所有都是需要的,但通常你加上这些前缀不会有任何害处——只要记住一条,把不带前缀的版本放到最后一行:
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
有些新的CSS3属性已经试验了很久,一些浏览器已经对这些属性不再使用前缀。Border-radius
属性就是一个非常典型的例子。最新版的浏览器都支持不带前缀的Border-radius
属性写法。
这些浏览器引擎前缀(Vendor Prefix)主要是各种浏览器用来试验或测试新出现的CSS3属性特征。可以总结为以下3点:
- 试验一些还未成为标准的的CSS属性——也许永远不会成为标准
- 对新出现的标准的CSS3属性特征做实验性的实现
- 对CSS3中一些新属性做等效语义的个性实现
这些前缀并非所有都是需要的,但通常你加上这些前缀不会有任何害处——只要记住一条,把不带前缀的版本放到最后一行:
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
有些新的CSS3属性已经试验了很久,一些浏览器已经对这些属性不再使用前缀。Border-radius
属性就是一个非常典型的例子。最新版的浏览器都支持不带前缀的Border-radius
属性写法。
需要使用Vendor Prefixes的CSS3属性
主要的需要添加浏览器引擎前缀(vendor-prefix)的属性包括:
- @keyframes
- 移动和变换属性(transition-property, transition-duration, transition-timing-function, transition-delay)
- 动画属性 (animation-name, animation-duration, animation-timing-function, animation-delay)
- border-radius
- box-shadow
- backface-visibility
- column属性
- flex属性
- perspective属性
完整的列表不只这些,而且还会增加。
主要的需要添加浏览器引擎前缀(vendor-prefix)的属性包括:
- @keyframes
- 移动和变换属性(transition-property, transition-duration, transition-timing-function, transition-delay)
- 动画属性 (animation-name, animation-duration, animation-timing-function, animation-delay)
- border-radius
- box-shadow
- backface-visibility
- column属性
- flex属性
- perspective属性
完整的列表不只这些,而且还会增加。
浏览器引擎前缀(vendor-prefix)的用法
当需要使用浏览器引擎前缀(vendor-prefix)时,最好是把带有各种前缀的写法放在前面,然后把不带前缀的标准的写法放到最后。比如:
/* 简单属性 */
.myClass {
-webkit-animation-name: fadeIn;
-moz-animation-name: fadeIn;
-o-animation-name: fadeIn;
-ms-animation-name: fadeIn;
animation-name: fadeIn; /* 不带前缀的放到最后 */
}
/* 复杂属性 keyframes */
@-webkit-keyframes fadeIn {
0% { opacity: 0; } 100% { opacity: 0; }
}
@-moz-keyframes fadeIn {
0% { opacity: 0; } 100% { opacity: 0; }
}
@-o-keyframes fadeIn {
0% { opacity: 0; } 100% { opacity: 0; }
}
@-ms-keyframes fadeIn {
0% { opacity: 0; } 100% { opacity: 0; }
}
/* 不带前缀的放到最后 */
@keyframes fadeIn {
0% { opacity: 0; } 100% { opacity: 0; }
}
当需要使用浏览器引擎前缀(vendor-prefix)时,最好是把带有各种前缀的写法放在前面,然后把不带前缀的标准的写法放到最后。比如:
/* 简单属性 */ .myClass { -webkit-animation-name: fadeIn; -moz-animation-name: fadeIn; -o-animation-name: fadeIn; -ms-animation-name: fadeIn; animation-name: fadeIn; /* 不带前缀的放到最后 */ } /* 复杂属性 keyframes */ @-webkit-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 0; } } @-moz-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 0; } } @-o-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 0; } } @-ms-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 0; } } /* 不带前缀的放到最后 */ @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 0; } }
Internet Explorer
Internet Explorer 9 开始支持很多(但并不是全部)CSS3里的新属性。比如,你也可以在IE里使用不带浏览器引擎前缀(vendor-prefix)的border-radius属性。
IE6到IE8都不支持CSS3,很遗憾的是,使用这些低版本浏览器的用户还很多。所以,确保你的网站设计在不支持CSS3的情况下也能正常显示。对于一些属性:border-radius
, linear-gradient
, 和 box-shadow
, 你可以使用CSS3Pie,它是一个很小的文件,把它放到你的网站的根目录下,就能让你的页面中IE6,IE8中也支持这些属性。
Internet Explorer 9 开始支持很多(但并不是全部)CSS3里的新属性。比如,你也可以在IE里使用不带浏览器引擎前缀(vendor-prefix)的border-radius属性。
IE6到IE8都不支持CSS3,很遗憾的是,使用这些低版本浏览器的用户还很多。所以,确保你的网站设计在不支持CSS3的情况下也能正常显示。对于一些属性:border-radius
, linear-gradient
, 和 box-shadow
, 你可以使用CSS3Pie,它是一个很小的文件,把它放到你的网站的根目录下,就能让你的页面中IE6,IE8中也支持这些属性。
使用HTML5里页面可见性接口判断用户是否正在观看你的页面
长期以来我们一直缺少一个判断用户是否正在浏览某个指定标签页的方法。用户是否去看别的网站了?他们切换回来了么?现在,HTML5里页面可见性接口就提供给了程序员一个方法,让他们使用 |
document.hidden
这个新出现的document.hidden
属性,它显示页面是否为用户当前观看的页面,值为ture或false。
这个新出现的 |
document.visibilityState
visibilityState
的值要么是visible
(表明页面为浏览器当前激活tab,而且窗口不是最小化状态),要么是hidden
(页面不是当前激活tab页面,或者窗口最小化了。),或者prerender
(页面在重新生成,对用户不可见。).
|
visibilitychange事件
监听页面可见性变化非常容易:
// 各种浏览器兼容
var hidden, state, visibilityChange;
if (typeof document.hidden !== "undefined") {
hidden = "hidden";
visibilityChange = "visibilitychange";
state = "visibilityState";
} else if (typeof document.mozHidden !== "undefined") {
hidden = "mozHidden";
visibilityChange = "mozvisibilitychange";
state = "mozVisibilityState";
} else if (typeof document.msHidden !== "undefined") {
hidden = "msHidden";
visibilityChange = "msvisibilitychange";
state = "msVisibilityState";
} else if (typeof document.webkitHidden !== "undefined") {
hidden = "webkitHidden";
visibilityChange = "webkitvisibilitychange";
state = "webkitVisibilityState";
}
// 添加监听器,在title里显示状态变化
document.addEventListener(visibilityChange, function() {
document.title = document[state];
}, false);
// 初始化
document.title = document[state];
上面的代码会在页面可见性发生变化时修改document.title
的值!
那么,什么时候需要使用visibilitychange
事件呢?比如,如果你的页面上有嵌入视频正在播放,当用户切换到其它标签页时,你的标签页上的视频应自动暂停播放,当用户切换回来时继续接着播放。再比如,如果你的页面有自动刷新动作,当用户切换到其它标签页时,你就应该停止刷新,而当用户切换回来时继续之前的动作。
监听页面可见性变化非常容易: // 各种浏览器兼容 var hidden, state, visibilityChange; if (typeof document.hidden !== "undefined") { hidden = "hidden"; visibilityChange = "visibilitychange"; state = "visibilityState"; } else if (typeof document.mozHidden !== "undefined") { hidden = "mozHidden"; visibilityChange = "mozvisibilitychange"; state = "mozVisibilityState"; } else if (typeof document.msHidden !== "undefined") { hidden = "msHidden"; visibilityChange = "msvisibilitychange"; state = "msVisibilityState"; } else if (typeof document.webkitHidden !== "undefined") { hidden = "webkitHidden"; visibilityChange = "webkitvisibilitychange"; state = "webkitVisibilityState"; } // 添加监听器,在title里显示状态变化 document.addEventListener(visibilityChange, function() { document.title = document[state]; }, false); // 初始化 document.title = document[state]; 上面的代码会在页面可见性发生变化时修改 那么,什么时候需要使用 |