jquery.waterrippleeffect模拟真实水面触碰涟漪水纹动画效果代码
代码语言:html
所属分类:动画
代码描述:jquery.waterrippleeffect模拟真实水面触碰涟漪水纹动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.waterrippleeffect.min.js"></script> <style type="text/css"> html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; /*background: transparent;*/ box-sizing: border-box; } body {} .container { width: 480px; height: 480px; margin: 20px auto; position: relative; } .clear { clear: both; height: 0; font-size: 0; line-height: 0; } </style> <script> $(document).ready(function() { //------------------------------------------------------------------------ $('#preloaderDiv').delay(1000).fadeTo(1000, 0, function() { $(this).css('display', 'none'); }); $('#startDiv').css('cursor', 'pointer').click(function() { //$( this ).css( 'display', 'none' ); $(this).delay(10).fadeTo(1000, 0, function() { $(this).css('display', 'none'); }); init(); }); //------------------------------------------------------------------------ function init() { //Settings - params for WaterRippleEffect var settings = { .........完整代码请登录后点击上方下载按钮下载查看
网友评论0