网站首页  汉语字词  英语词汇  考试资料  写作素材  旧版资料

请输入您要查询的范文：

　

标题 jQuery实现点击水纹波动动画
范文
    今天要为大家绍一款由jquery实现的鼠标单击出现水波特效。用鼠标点击页面,你可以看到页面不断出面水波纹效果。然后水波纹渐渐消失。效果非常不错
    jQuery点击水纹波动动画原理:
    1.在需要实现水波纹效果的标签中添加<XXX></XXX>
    2.代码会定位 鼠标相对 与 标签的位置，以鼠标点为圆心画圆
    3.圆的半径 可以自定义(默认为标签的最大宽或高度)
    4.圆点颜色，和动画时间等可以自行修改内部代码，或直接 调用 $().css({})方法 进行覆盖
    ripple-wrapper.js
    $(function(){
      $(".ripple-wrapper").css(
        {
      "position": " absolute",
      "top": " 0",
      "left": " 0",
      "z-index": " 1",
      "width": " 100%",
      "height": " 100%",
      "overflow": " hidden",
      "border-radius": " inherit",
      "pointer-events": " none"
      });
        $(".ripple-wrapper").parent().click(function(e){
         var ripple_obj=$(this).find(".ripple-wrapper");
         if(ripple_obj.find("div").length){ripple_obj.find("div").remove();}
         ripple_obj.prepend("<div></div>");
         var ripple_div=ripple_obj.find("div");
         ripple_div.css(
           {
      "display": " block",
      "background": " rgba(255, 255, 255, 0.7)",
      "border-radius": " 50%",
      "position": " absolute",
      "-webkit-transform": " scale(0)",
      "transform": " scale(0)",
      "opacity": " 1",
      "transition": " all 0.7s",
      "-webkit-transition": " all 0.7s",
      "-moz-transition": " all 0.7s",
      "-o-transition": " all 0.7s",
      "z-index": " 1",
      "overflow": " hidden",
      "pointer-events": " none"
        });
         var R= parseInt(ripple_obj.outerWidth());/*默认半径为ripple-wrapper宽*/
         if(parseInt(ripple_obj.outerWidth())<parseInt(ripple_obj.outerHeight())){
             R= parseInt(ripple_obj.outerHeight());/*如果高度大于宽半径为ripp，le-wrapper高*/
         }
          ripple_div.css({"width":(R*2)+"px","height":(R*2)+"px","top": (e.pageY -ripple_obj.offset().top - R)+'px', "left": ( e.pageX -ripple_obj.offset().left -R)+'px',"transform":"scale(1)", "-webkit-transform":"scale(1)","opacity":"0"});;
        }); 
        });
    HTML
    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="UTF-8">
      <title>Document</title>
      <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.4.min.js"></script>
      <script src="ripple-wrapper.js"></script> 
      <style>
        .ck {
          cursor: pointer;
          display: block;
          padding: 1em;
          text-decoration: none;
          width: 200px;
          height: 20px;
          position: relative;
          overflow: hidden; 
          color: #fff;
        }
      </style>
    </head>
    <body >
      <div>
        点一下
        <div></div>
      </div> 
    </body>
    </html>
    演示图
    名单
    未封装代码
    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="UTF-8">
      <title>Document</title>
      <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.4.min.js"></script>
      <style>
        .ck {
          background: #ffab91;
          display: block;
          padding: 1em;
          text-decoration: none;
          width: 200px;
          height: 20px;
          position: relative;
          overflow: hidden;
        }
        .ck .bd {
          background: rgba(0, 0, 0,0.8);
          border-radius: 50%;
          width: 0px;
          height: 0px;
          position: absolute;
           -webkit-transform: scale(0);
           transform: scale(0);
           opacity: 1;
        }
        .dh {
          animation: ldm 0.8s ;
          -moz-animation: ldm 0.8s ;
          -o-animation: ldm 0.8s ;
          -webkit-animation: ldm 0.8s  ;
        }
        @-webkit-keyframes ldm {
          100% {
            -webkit-transform: scale(1);
            opacity: 0
          }
        }
        @keyframes ldm {
           100% {
            -webkit-transform: scale(1);
            opacity: 0
          }
        }
      </style>
    </head>
    <body>
      <div>
        <span></span> adasdsd
      </div>
      <script>
        $(".ck").click(function(e){
           $(this).find(".bd").removeClass("dh");
          var R=6;
          R= parseInt($(this).outerWidth());
          if(parseInt($(this).outerWidth())<parseInt($(this).outerHeight())){
            R= parseInt($(this).outerHeight());
          }
          $(this).find(".bd").css({"width":(R*2)+"px","height":(R*2)+"px"});
        $(this).find(".bd").css({"left":(e.pageX-$(this).position().left-R)+"px","top":(e.pageY-$(this).position().top-R)+"px" });
        // $(this).find(".bd").css({"left":(e.pageX-$(this).position().left-R/2 )+"px","top":(e.pageY-$(this).position().top-R/2 )+"px" });
        $(this).find(".bd").addClass("dh");
        });
      </script>
    </body>
    </html>
随便看

　

在线学习网范文大全提供好词好句、学习总结、工作总结、演讲稿等写作素材及范文模板，是学习及工作的有利工具。

　

Copyright © 2002-2024 cuapp.net All Rights Reserved
更新时间：2025/5/12 22:13:07