js阴影跟随插件realshaow.js

所属分类:UI-悬停

 5338  86  查看评论 (4)
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来定义对应元素的阴影颜色。

相关插件-悬停

canvas鼠标追随效果

canvas鼠标追随粒子放射效果
  悬停
 9152  85

60种css3鼠标悬停效果

一款使用的效果,数遍悬停会出现相应图片的简介
  悬停
 17679  416

jQuery鼠标悬停方向感知

jQuery鼠标悬停方向感知,穿墙效果
  悬停
 5731  51

css3的button组件

css3的button组件,可以直接调用,使用方便,各种效果
  悬停
 11597  184

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

    一颗心的沦亡 0
    2018/5/23 16:41:04
    很好看,但我在想可以应用在哪些方面呢,要是能实际应用就好了。 回复
    孤独的观测者 0
    2018/4/24 14:25:47
    九尾狐的yi巴 0
    2018/1/7 12:11:18
    总督sir 0
    2017/11/21 21:10:01
取消回复