一些个人总结的前端特效

来源：互联网发布：js保持两位小数编辑：程序博客网时间：2024/05/17 22:10

用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="重新加载本文" onclick="window.location.reload();" icon="/images/refresh-icon.png"></menuitem>
<menuitem label="跳跃至评论区" onclick="window.location='#comments';" icon="/images/comment_icon.gif"></menuitem>
<menu label="分享本文至..." icon="/images/share_icon.gif">
<menuitem label="新浪微博" icon="/images/twitter_icon.gif" onclick="goTo('//twitter.com/intent/tweet?text=' + document.title + ': ' + window.location.href);"></menuitem>
<menuitem label="QQ空间" icon="/images/facebook_icon16x16.gif" onclick="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里定义的变化动作会在页面生成前应用到网页元素上，所以你看不到发生的过程。然而，这些变化动作也可以由mouseover或其它相似事件触发，这样我们就可以看到它的动作过程。下一节里我们将会看到这些。

在下面，我们放置了4个完全相同的用div做成的盒子，大小是 100x60px，边框宽2px。之后，我们设定-webkit-transform属性来让它发生不同的变化：

box 1移动到右边：-webkit-transform: translate(3em,0);box 2顺时针旋转30度-webkit-transform: rotate(30deg);box 3移动到左下方：-webkit-transform: translate(-3em,1em);box 4尺寸放大两倍：-webkit-transform: scale(2);

<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. 请将下列代码加入页面 head 区域:

<script src="jquery.js" type="text/javascript"></script><script src="jquery.lazyload.js" type="text/javascript"></script>

你必须修改 HTML 代码. 在 src 属性中设置展位符图片, demo 页面使用 1x1 像素灰色 GIF 图片. 并且需要将真实图片的 URL 设置到 data-original 属性. 这里可以定义特定的 class 以获得需要延迟加载的图片对象. 通过这种方法你可以简单地控制插件绑定.

<img class="lazy" src="img/grey.gif" data-original="img/example.jpg"  width="640" heigh="480">

处理图片的代码如下.

$("img.lazy").lazyload();

1、在图片上增加lazyload的类(class='lazyload')2、把真实的图片地址放入自定义属性data-img 中，把图片的SRC属性设置为一个一像素的透明图片，图片需要设置width，height属性，以免布局混乱如下：<img data-img="http://farm6.staticflickr.com/5323/7378265586_e12444509d_n.jpg" src="http://images.cnblogs.com/cnblogs_com/NNUF/379856/t_space.gif" width="640" height="480"  alt="" class='lazyload'>3、在需要延迟加载的页面调用imgLazyLoad()函数；

源：http://www.neoease.com/lazy-load-jquery-plugin-delay-load-image/

jQuery 效果 - slideDown() 方法

slideDown() 方法通过使用滑动效果，显示隐藏的被选元素。

语法

$(selector).slideDown(speed,callback)

参数描述speed

可选。规定元素从隐藏到可见的速度（或者相反）。默认为 "normal"。

可能的值：

毫秒（比如 1500）
"slow"
"normal"
"fast"

在设置速度的情况下，元素从隐藏到可见的过程中，会逐渐地改变其高度。

callback

可选。slideDown 函数执行完之后，要执行的函数。

如需学习更多有关 callback 的内容，请访问我们的 jQuery Callback 这一章。

除非设置了 speed 参数，否则不能设置该参数

<html>

<head>

$(document).ready(function(){

$(".btn1").click(function(){

$("p").slideUp();

});

$(".btn2").click(function(){

$("p").slideDown();

});

</script>

</head>

<body>

<p>This is a paragraph.</p>

</body>

</html>

jQuery响应式图片画廊插件S Gallery

源：http://www.dowebok.com/48.html

各种菜单导航

源：http://sc.chinaz.com/jiaoben/caidanhaohang.html

CSS3圆角的制作

CSS3圆角技术能非常好的美化你的页面效果，而且避免了使用图片辅助，一则省去了制作图片的时间，二则省去了浏览器加载图片造成的延迟和带宽。如今，这种利用CSS制作圆角的技术已经得到了大多数主流浏览器的支持，包括Safari，谷歌浏览器，IE，Opera和火狐浏览器。下面让我们来看看border-radius的语法，解释，以及IE是如何支持它的。

语法和说明

在CSS3中用来生成圆角效果的属性是border-radius.这个属性跟大家熟知的width等属性的用法相似：

.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;}

如果你觉得上面的写法太复杂，可以使用下面border-radius简写的方法：

.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属性，有了这些属性，我们不需要再使用float,clear,margin等属性进行调控，避免了很多麻烦。

CSS代码

CSS3里的column系列属性提供了各种不同的功能，通过组合使用它们，你能得到相应的任何分栏式布局：

column-count: 列数目
column-gap: 各列之间间隙宽度
column-width: 建议宽度；未必会使用，浏览器基于此数值进行计算
column-rule-width：列之间分割线宽度
column-rule-style：列之间分割线风格
column-rule-color：列之间分割线颜色
column-span: 允许一个元素的宽度跨越多列
column-fill: 分列方式

要想制作出一个漂亮的分列布局，你至少需要用到column-count和column-gap：

/* 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)有哪些？

-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 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)的用法

当需要使用浏览器引擎前缀(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中也支持这些属性。

使用HTML5里页面可见性接口判断用户是否正在观看你的页面

长期以来我们一直缺少一个判断用户是否正在浏览某个指定标签页的方法。用户是否去看别的网站了？他们切换回来了么？现在，HTML5里页面可见性接口就提供给了程序员一个方法，让他们使用`visibilitychange`页面事件来判断当前页面可见性的状态，并针对性的执行某些任务。同时还有新的`document.hidden`属性可以使用。
观看演示

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事件呢？比如，如果你的页面上有嵌入视频正在播放，当用户切换到其它标签页时，你的标签页上的视频应自动暂停播放，当用户切换回来时继续接着播放。再比如，如果你的页面有自动刷新动作，当用户切换到其它标签页时，你就应该停止刷新，而当用户切换回来时继续之前的动作。

0 0