jQuery水滴弹性摘取效果
分类:实例代码
不知道这个效果应该如何命名,反正就是具有弹性功能。
类似于把一个小的水滴从大的部分剥取的功能。
代码实例如下:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> <style> *{ padding:0px; margin:0px; } body,html{ width:100%; height:100%; background-color:#000; -webkit-filter: contrast(100); } .leftMenu{ width:150px; height:100%; background-color:#fff; position:relative; left:-50px; -webkit-filter: blur(20px); } .pointer{ width:40px; height:100%; position:absolute; right:-40px; } .pointerTop{ } .pointerCenter{ width:40px; height:90px; position:absolute; border-radius:50%; top:50%; right:-10px; background-color:#fff; -webkit-filter: blur(0px); } </style> <script src="http://sandbox.runjs.cn/uploads/rs/324/8ajgnwcu/hammer.min.js"></script> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script> $(function () { var hammertime = new Hammer($('body')[0]); hammertime.on('pan', function (e) { console.log(e.deltaX); var pointerCenter = $('.pointerCenter'); pointerCenter.css({ 'left': e.deltaX }) }); }) </script> </head> <body> <div class="leftMenu"> <div class="pointer"> <div class="pointerTop"></div> <div class="pointerCenter"></div> <div class="pointerBottom"></div> </div> </div> </body> </html>
演示效果图如下: