Shine.js实现动态阴影效果
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实现动态阴影效果的更多相关文章
- Shine.js – 帮助你实现各种好看的阴影效果
Shine.js 是一个用于实现漂亮阴影的 JavaScript 库.您可以设置动态光的位置,可定制的阴影.不依赖于第三方库,兼容 AMD.能在支持 textShadow 或 boxShadow 的浏 ...
- js实现动态操作table
本章案例为通过js,动态操作table,实现在单页面进行增删改查的操作. 简要案例如下: <%@ page language="java" contentType=&quo ...
- 初探JavaScript(二)——JS如何动态操控HTML
除去五一三天,我已经和<JavaScript Dom编程艺术>磨合了六天,第一印象很好.慢慢的,我发现这是一块排骨,除了肉还有骨头.遇到不解的地方就会多看几遍,实在不懂的先跳过,毕竟,初次 ...
- js的动态加载、缓存、更新以及复用(四)
本来想一气呵成,把加载的过程都写了,但是卡着呢,所以只好在分成两份了. 1.页面里使用<script>来加载 boot.js . 2.然后在boot.js里面动态加载 bootLoad.j ...
- JS怎么动态命名变量名
[摘要]本文是对JS怎么动态命名变量名的讲解,对学习JavaScript编程技术有所帮助,与大家分享. 1.用eval,例子: 1 2 3 4 5 6 7 <script> var Thr ...
- js中动态载入css js样式
js中动态载入css样式,方法如下: //<link rel="stylesheet" type="text/css" href="http:/ ...
- js插件动态加载js、css解决方案
最近因为工作需要做了一个js自动导入的插件,一开始很天真的以为动态创建个script添加到head中就ok了,试了之后才发现了问题,就是如果同时引入了多个js文件,而且后一个文件中用到了前一个文件中的 ...
- JS & JQuery 动态添加 select option
因为是转载文章 在此标明出处,以前有文章是转的没标明的请谅解,因为有些已经无法找到出处,或者与其它原因. 如有冒犯请联系本人,或删除,或标明出处. 因为好的文章,以前只想收藏,但连接有时候会失效,所以 ...
- 【ASP.NET Web API教程】2.3.5 用Knockout.js创建动态UI
原文:[ASP.NET Web API教程]2.3.5 用Knockout.js创建动态UI 注:本文是[ASP.NET Web API系列教程]的一部分,如果您是第一次看本博客文章,请先看前面的内容 ...
随机推荐
- poj1787 Charlie's Change
思路: 完全背包,记录路径. 实现: #include <bits/stdc++.h> using namespace std; const int INF = 0x3f3f3f3f; ] ...
- Android RecyclerView 滑动时图片加载的优化
RecyclerView 滑动时的优化处理 在滑动时停止加载图片,在滑动停止时开始加载图片,这里用了Glide.pause 和Glide.resume.这里为了避免重复设置增加开销,设置了一个标志变量 ...
- C语言常见问题总结
1.多次运行程序 解决方法: 错误原因是,已经编译运行出一个exe,没有关闭此exe,又点击编译运行. 应该将之前运行出的exe关闭,再来运行代码 2.单精度类型和双精度类型如何区分使用... 解决方 ...
- re.S解析
转自:https://www.cnblogs.com/xieqiankun/p/re-sinpython.html 在Python的正则表达式中,有一个参数为re.S.它表示“.”(不包含外侧双引号, ...
- Java 基础入门随笔(4) JavaSE版——程序流程控制
上一节对于运算符有了大致的了解,这一节针对程序流程控制进行复习!程序流程控制包括顺序结构.判断结构(if).选择结构(switch).循环结构. 1.判断结构 ①if语句的第一种格式: ...
- 【alert(1) to win】不完全攻略
alert(1) to win 一个练习XSS的平台,地址:https://alf.nu/alert1 Warmup 给出了一段JavaScript代码 function escape(s) { re ...
- HDU_1114_piggy-bank
Piggy-Bank Time Limit:1000MS Memory Limit:32768KB 64bit IO Format:%I64d & %I64u Submit S ...
- POJ_3565_Ants
题意:给出N个白点和N个黑点,要求用N条不相交的线段把它们连接起来,其中每条线段恰好连接一个白点和一个黑点,每个点恰好连接到一条线段. 分析:因为有结点黑白两色,我们不难想到构造一个二分图,其中每个白 ...
- 梦想CAD控件安卓交互绘图
在cad使用过程中,动态绘制的使用会使我们绘图速度大大加快.在此演示中,我们绘制了直线.多段线.点.样条线.圆.圆弧.椭圆.椭圆弧等实体. 用户可以在CAD控件视区任意位置绘制直线. 主要用到函数说明 ...
- 3D NAND闪存是个啥?让国内如此疯狂
Repost: https://news.mydrivers.com/1/477/477251.htm 上个月底武汉新芯科技主导的国家级存储器产业基地正式动工,在大基金的支持下该项目将投资240亿美元 ...