Shine.js 是一个用于实现美丽阴影的 JS 库。

特性

1、可动态旋转光的位置,投影出不同的阴影效果  

2、可定制的阴影,  

3、没有库依赖关系,AMD兼容使用基于内容的文本或框阴影  

4、在浏览器支持textShadow或boxShadow 会自己主动加入前缀

效果图例如以下:

代码引用及编写:

嵌入js文件

<script src="path/to/shine.min.js"></script>

实例化:

var shine = new Shine(document.getElementById('my-shine-object'));

改变光的位置:

window.addEventListener('mousemove', function(event) {
shine.light.position.x = event.clientX;
shine.light.position.y = event.clientY;
shine.draw();
}, false);

原文:shine

Shine.js实现动态阴影效果的更多相关文章

  1. Shine.js – 帮助你实现各种好看的阴影效果

    Shine.js 是一个用于实现漂亮阴影的 JavaScript 库.您可以设置动态光的位置,可定制的阴影.不依赖于第三方库,兼容 AMD.能在支持 textShadow 或 boxShadow 的浏 ...

  2. js实现动态操作table

     本章案例为通过js,动态操作table,实现在单页面进行增删改查的操作. 简要案例如下: <%@ page language="java" contentType=&quo ...

  3. 初探JavaScript(二)——JS如何动态操控HTML

    除去五一三天,我已经和<JavaScript Dom编程艺术>磨合了六天,第一印象很好.慢慢的,我发现这是一块排骨,除了肉还有骨头.遇到不解的地方就会多看几遍,实在不懂的先跳过,毕竟,初次 ...

  4. js的动态加载、缓存、更新以及复用(四)

    本来想一气呵成,把加载的过程都写了,但是卡着呢,所以只好在分成两份了. 1.页面里使用<script>来加载 boot.js . 2.然后在boot.js里面动态加载 bootLoad.j ...

  5. JS怎么动态命名变量名

    [摘要]本文是对JS怎么动态命名变量名的讲解,对学习JavaScript编程技术有所帮助,与大家分享. 1.用eval,例子: 1 2 3 4 5 6 7 <script> var Thr ...

  6. js中动态载入css js样式

    js中动态载入css样式,方法如下: //<link rel="stylesheet" type="text/css" href="http:/ ...

  7. js插件动态加载js、css解决方案

    最近因为工作需要做了一个js自动导入的插件,一开始很天真的以为动态创建个script添加到head中就ok了,试了之后才发现了问题,就是如果同时引入了多个js文件,而且后一个文件中用到了前一个文件中的 ...

  8. JS & JQuery 动态添加 select option

    因为是转载文章 在此标明出处,以前有文章是转的没标明的请谅解,因为有些已经无法找到出处,或者与其它原因. 如有冒犯请联系本人,或删除,或标明出处. 因为好的文章,以前只想收藏,但连接有时候会失效,所以 ...

  9. 【ASP.NET Web API教程】2.3.5 用Knockout.js创建动态UI

    原文:[ASP.NET Web API教程]2.3.5 用Knockout.js创建动态UI 注:本文是[ASP.NET Web API系列教程]的一部分,如果您是第一次看本博客文章,请先看前面的内容 ...

随机推荐

  1. 记一个java.lang.NoClassDefFoundError的问题

    如题,即找不到对应class,出现这个问题,很可能是文件路径配置错误,也可能是jar包丢失. 比如我今天遇到的问题,就是IDEA没有把mybatis的jar包复制到编译目录造成的.

  2. Pro ASP.NET Core MVC 6th 第三章

    第三章 MVC 模式,项目和约定 在深入了解ASP.NET Core MVC的细节之前,我想确保您熟悉MVC设计模式背后的思路以及将其转换为ASP.NET Core MVC项目的方式. 您可能已经了解 ...

  3. mongo 3.4分片集群系列之四:搭建分片集群--哈希分片 + 安全 + 区域

    这个系列大致想跟大家分享以下篇章: 1.mongo 3.4分片集群系列之一:浅谈分片集群 2.mongo 3.4分片集群系列之二:搭建分片集群--哈希分片 3.mongo 3.4分片集群系列之三:搭建 ...

  4. MFC_2.5 选项卡控件的使用

    选项卡控件的使用 1.新建默认MFC文件. 2.资源-添加Dialog-添加类.(假设生成3个,Dialog1Dialog2Dialog3) 3.类向导,添加类,点小三角形,添加MFC类.添加CTab ...

  5. mysql (5.7版本)---的配置

    1.去到官方网站下载 https://dev.mysql.com/downloads/installer/ 或者直接下载  -->  https://dev.mysql.com/get/Down ...

  6. MySql-了解存储引擎

    怎么应对不同版本 在不同的 mysql 版本中,很多特性和语法有可能是不一样的,我们怎么样才能知道当前版本的语法是什么样呢?最好的办法是学会使用 mysql 的帮助. A.按照层次看帮助 例如:mys ...

  7. buf.writeFloatBE()函数详解

    buf.writeFloatBE(value, offset[, noAssert]) buf.writeFloatLE(value, offset[, noAssert]) value {Numbe ...

  8. reshape column vector data in Matlab

    input: import  data 2. transpose the data 3. reshape the data into array code: matlab load x.dat X=x ...

  9. BZOJ 1832、1787 洛谷 4281 [AHOI2008]紧急集合

    [题解] 题目要求找到一个集合点,使3个给定的点到这个集合点的距离和最小,输出集合点的编号以及距离. 设三个点为A,B,C:那么我们可以得到Dis=dep[A]+dep[B]+dep[C]-dep[L ...

  10. PAT 1137 Final Grading

    For a student taking the online course "Data Structures" on China University MOOC (http:// ...