小悠Shine Plugin v1.0，实现鼠标悬浮光晕效果

本文出自悠然品鉴原创，转载请注明出处:http://www.youranshare.com/codeorg/sid/132.html

今天偶然间看到了QQ表情商店里的鼠标悬浮光晕特效，感觉挺不错的，于是自己就研究了一下，然后用JQuery也模仿着写了一个类似特效的插件，实现了鼠标悬浮的光晕效果，这里就和大家简单介绍下实现的原理。

这里先展示一下效果，然后根据效果来说明原理:

    从效果中可以看出，当鼠标悬浮的时候图片的表面会有一层光晕的效果划过，也就是说我们只需要实现光晕的显示即可。

    这里我使用了一张光晕效果的图片，当鼠标hover的时候，向结点插入这张图片，并且调整图片的大小和结点相同，同时将图片放置到结点的最左侧隐藏起来，然后光晕图片从左到右移动产生一个动画效果，也就实现了鼠标悬浮的光晕的效果.

看一下是如何使用的

首先你得配置一下你需要的效果，配置只需要四个参数:

var shineIMGPath="./image/shine.png";//光云层的图片,的位置
var   ShineSpeed = 800;//光晕的速度ms
var   ShineDelay = 100;//如果需要循环显示光晕的话，这个表示显示的时间间隔ms
var LOOP  = 1;          //是否循环显示，0表示只执行一次动画，1表示循环显示

    通过上面的配置你可以设置光晕显示的动画时间，如果你设置循环动画的话，还可以设置每次动画之间的间隔，其中LOOP是一个布尔值，表示是否循环播放动画。

    然后直接调用函数RunAction(selector)，设置对应的元素产生光晕效果，其中参数selector表示的是Jquery中$()这个函数的参数，例如这个参数可以是#id-demo、.classDemo、div、ul li等，但是这个参数不能是img等不能拥有子元素的类型，因为核心的实现部分是向这个元素插入一个新的光晕结点的!

你的html应该如何写

    Html的写法很简单，但是要注意的是：如果你需要对某一个元素增加光晕，你必须要在这个元素的style中指定position，position可以是absolute、relative、等，然后指明 overflow:hide，要不光晕执行的时候会超出范围的.

看一下我们下面的一个例子:

. page1title{
   width: auto;
   height: 56px;
   line-height: 56px;
   font-family: 'Open Sans',Arial, Helvetica, sans-serif;
   font-size: 36px;
   color: #fff;
   overflow: hidden!important;
   position: absolute;
   font-weight: bold;
}
<div class="page1title">小悠 </div>

//然后直接调用函数

RunAction(".page1title");

就可以实现悬浮的光晕效果了

    下面附上相关的示例代码，为了发方便，相关的JS直接写到了html文件里面，虽然IE的效果可能差点儿，但是兼容IE.

百度网盘下载地址:http://pan.baidu.com/s/1ntNXROP