这是一款可以创建gooey效果抖动窗口的jquery插件。该gooey效果抖动窗口基于HTML5 canvas来制作,可以在鼠标移入和移出HTML元素时,为其边框制作波浪状的抖动效果。
在页面中引入jquery和jquery.wobblewindow.min.js文件。
<script src='path/to/jquery.min.js'></script> <script src='path/to/jquery.wobblewindow.min.js'></script>
为要制作抖动窗口效果的HTML元素设置下面的HTML结构:
<!--包裹元素--> <div id='holder' style='width:480px; height:480px; position:relative; background-color: #562A72'> <!--抖动窗口元素--> <div id='window'> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ac elementum tortor, eget efficitur quam. </div> </div>
为抖动窗口元素设置下面的CSS样式:
#window { width:350px; height:350px; left:65px; top:65px; position:absolute; padding: 50px 50px 50px 50px; pointer-events: none; }
在页面DOM元素加载完毕之后,通过wobbleWindow()
方法来初始化该插件。
$( '#window' ).wobbleWindow();
也可以使用纯js的方法来调用插件:
var wobbleWindow = new WobbleWindow( document.getElementById( 'window' ) ); //带配置参数 var wobbleWindow = new WobbleWindow( document.getElementById( 'window' ), settings );
该抖动窗口效果插件的可用配置参数如下:
var settings = { name: 'window_1',//name depth: 1,//depth for zIndex offsetX: 0,//+ or - value the size of the div offsetY: 0,//+ or - value the size of the div moveTypeIn: 'move',//method points follow the mouse moveTypeOut: 'wobble',//method points go back to init position wobbleFactor: 0.9,//control the wobble effect wobbleSpeed: 0.1,//control the wobble speed moveSpeed: 3,//control the move speed lineWidth: 1,//lineWidth lineColor: '',//no value = no line or hex values bodyColor: '#FFF',//no value = no body color or hex values numberOfXPoints: 7,//quantity of points horizontal. must be an odd int numberOfYPoints: 5,//quantity of points vertical. must be an odd int movementLeft: true,//if true the points at the left can be moved movementRight: true,//if true the points at the right can be moved movementTop: true,//if true the points at the top can be moved movementBottom: true,//if true the points at the bottom can be moved debug: false//if true debug mode is on }; $( '#window' ).wobbleWindow( settings );
关于jquery.wobblewindow.js抖动窗口插件的更多信息,请参考:https://github.com/NiklasKnaack/jquery-wobblewindow-plugin