집 >웹 프론트엔드 >JS 튜토리얼 >간단한 jQuery 클릭 물 파문 애니메이션 예

간단한 jQuery 클릭 물 파문 애니메이션 예

php中世界最好的语言원래의: 2018-03-08 11:35:291630검색

이번에는 간단한 jQuery 클릭 물 파문 애니메이션 예제를 가져오겠습니다. jQuery를 사용하여 클릭 물 파문 애니메이션을 만들 때 주의 사항은 무엇입니까? 다음은 실제 사례입니다.
jQuery 클릭 물 파급 애니메이션 원리:

1. 물 파급 효과를 달성해야 하는 태그에 5c8b9de9fb73f56628b30e4b50c5fd36da7a5c458c43e8ac4398bd2378cdb6be

를 추가합니다. 2. 코드는 라벨의 위치는 마우스 포인트를 중심으로 원을 그립니다.
3. 원의 반경은 사용자 정의할 수 있습니다. (기본값은 라벨의 최대 너비 또는 높이입니다.) 4. 점 색상, 애니메이션 시간 등은 내부 코드로 수정하거나 $().css({}) 메서드를 직접 호출하여 덮어쓸 수 있습니다
--캡슐화된 예시 주소: http://daxianshiyanshi.sinaapp.com/data/jsdata/2016- 4-8/ripplewrapperdemo1/index1.html
--캡슐화되지 않은 예 주소: http://daxianshiyanshi.sinaapp.com/data/jsdata/2016-4-8/ripplewrapperdemo1/indexlod.html

$(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)+&#39;px&#39;, "left": ( e.pageX -ripple_obj.offset().left -R)+&#39;px&#39;,"transform":"scale(1)", "-webkit-transform":"scale(1)","opacity":"0"});;
       });
        
       });
<!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 class="ck" style="background: #5f5f5f">
        点一下
        <div class="ripple-wrapper"></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 style=" background: #aaab91;">
    <div class="ck">
        <span class="bd"></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>

나는 당신이 이 기사의 사례를 읽은 후 더 흥미로운 정보를 보려면 다른 PHP 중국어 웹사이트 관련 기사를 주목하세요!