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. jQuery学习笔记(4)-设置元素的属性和样式

    一.前言 本篇主要讲解如何使用jQuery获取和操作元素的属性和css样式 二."DOM属性"与元素属性 1.运行一下代码 <img src="/images/lo ...

  2. sql server用SQL语句查看字段说明

    SELECT t.[name] AS 表名,c.[name] AS 字段名,cast(ep.[value] )) AS [字段说明] FROM sys.tables AS t INNER JOIN s ...

  3. canvas一周一练 -- canvas绘制立体文字(2)

    运行效果: <!DOCTYPE html> <html> <head> </head> <body> <canvas id=" ...

  4. 【sqli-labs】【jsp/tomcat】 less29 less30 less31 less32 (GET型利用HTTP参数污染的注入)

    sqli-labs带了几个Java版本的web注入,在tomcat-files.zip里 以Less29为例,查看源码,可以看出请求最后还是提交给了php应用,难怪less29文件夹下有一个没有任何防 ...

  5. Understanding and Analyzing Application Crash Reports

    Introduction When an application crashes, a crash report is created and stored on the device. Crash ...

  6. SSH命令行传输文件到远程服务器

    Ubuntu操作系统 SCP命令 使用方式如下: 1.上传本地文件到远程服务器 scp /var/www/test.php root@192.168.0.101:/var/www/ 把本机/var/w ...

  7. docker 1-->docker swarm 转载

    实践中会发现,生产环境中使用单个 Docker 节点是远远不够的,搭建 Docker 集群势在必行.然而,面对 Kubernetes, Mesos 以及 Swarm 等众多容器集群系统,我们该如何选择 ...

  8. python多进程和多线程编程

    17 多线程和多进程并发 The modules described in this chapter provide support for concurrent execution of code. ...

  9. sql常用的命令

    SELECT NAME, database_id,create_date 创建时间,is_auto_shrink_on 自动收缩,state_desc 状态,recovery_model_desc 恢 ...

  10. linux(Ubuntu16)下切换python2和python3(转)

    采用update-alternatives 切换版本 1.打开终端:Ctrl+Alt+T 2.查看update-alternatives的帮助信息:update-alternatives --help ...