可创建gooey效果抖动窗口的jquery插件

当前位置:主页 > Html5库 > html5 canvas > 可创建gooey效果抖动窗口的jquery插件
小编推荐: 掘金是国内最活跃的技术社区,从 jQuery到vue,从前端教程到开源库,无论是入门还是进阶,来掘金你不会错过前端开发的任何一个技术干货。
可创建gooey效果抖动窗口的jquery插件
分享:

    插件介绍

    这是一款可以创建gooey效果抖动窗口的jquery插件。该gooey效果抖动窗口基于HTML5 canvas来制作,可以在鼠标移入和移出HTML元素时,为其边框制作波浪状的抖动效果。

    浏览器兼容性

    浏览器兼容性
    时间:2017-04-06
    阅读:
简要教程

这是一款可以创建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元素设置下面的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样式

为抖动窗口元素设置下面的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

网友评论