js阴影跟随插件realshaow.js

所属分类:UI-悬停

 3292  64  查看评论 (2)
js阴影跟随插件realshaow.js ie兼容9

首先引入 jQuery 框架及 Real Shadow 插件:

然后初始化

$(selector).realshadow(); // options are optional
$(selector).realshadow({
    followMouse: false,   // 默认为true
    pageX:       x,       // 光源 X 轴的坐标
    pageY:       y        // 光源 y 轴的坐标
    c: {                  // 阴影的颜色
        r: 1,             // red   channel for shadow
        g: 1,             // green channel for shadow
        b: 1,             // blue  channel for shadow
    }
});

相关插件参数这个插件拥有几个简单的选项可以帮助你自定义,如下:followMouse:缺省为false,指定阴影是否跟随鼠标移动变化pageX:用来产生阴影的光源x坐标 pageY:用来产生阴影的光源y坐标 c:阴影颜色定义,包括r, g, b如果你需要给不同的元素指定颜色,你可以使用如下方法:

<span rel="r"></span>
<span rel="g"></span>
<span rel="b"></span>
<span rel="rg"></span>
<span rel="gb"></span>
<span rel="br"></span>
<span rel="rgb"></span>

 以上代码中我们使用rel来定义对应元素的阴影颜色。

相关插件-悬停

响应式网站图标

悬停变换效果
  悬停
 14264  69

JS超酷图片翻动展示效果

JS超酷图片翻动展示效果
  悬停
 12603  235

常用鼠标经过遮罩层动画效果

常用鼠标经过遮罩层动画效果,点击弹窗动画效果
  悬停
 9808  90

图片添加遮罩

根据鼠标进入的位置插入遮罩
  悬停
 11099  100

讨论这个项目(2)回答他人问题或分享插件使用方法奖励jQ币

    九尾狐的yi巴 0
    2018/1/7 12:11:18
    总督sir 0
    2017/11/21 21:10:01
取消回复