如何在子div上创建onclick事件会影响父div的透明度？

时间：2014-11-16 23:33:14

标签： javascript jquery html css plugins

我尝试修改jquery插件，以便在点击时通过涟漪效果可见背景画，而不仅仅是黑色波纹。所以我希望纹波影响白柱的透明度。我不确定它是否可能。这是一个快速的SS，说明我的意思：http://oi60.tinypic.com/34xhkdk.jpg。

http://codepen.io/anon/pen/gbOQOX

非常感谢您的任何见解。

代码：

HTML：

<h1>Ripple Click Effect</h1>
<ul>
    <li><a>Dashboard</a></li>
    <li><a>My Account</a></li>
    <li><a>Direct Messages</a></li>
    <li><a>Chat Rooms</a></li>
    <li><a>Settings</a></li>
    <li><a>Logout</a></li>
</ul>

<!-- jQuery -->
<script src="http://thecodeplayer.com/u/js/jquery-1.9.1.min.js" type="text/javascript"></script>

的CSS：

/*custom fonts - Bitter, Montserrat*/
@import url('http://fonts.googleapis.com/css?family=Montserrat|Bitter');
/*basic reset*/
* {margin: 0; padding: 0;}
body {
    background: url('http://wallpaper4me.com/images/wallpapers/greekpainting-361526.jpeg') no-repeat center center fixed;
    background-size: cover;
}

/*nav styles*/
ul {
    background: rgba(255,255,255,1); border-top: 6px solid #70C2C2;
    width: 600px; margin: 0 auto;
}
ul li {
    list-style-type: none;
    /*relative positioning for list items along with overflow hidden to contain the overflowing ripple*/
    position: relative;
    overflow: hidden;
}
ul li a {
    font: normal 14px/28px Montserrat; color: #3D8F8F;
    display: block; padding: 10px 15px;
    text-decoration: none;
    cursor: pointer; /*since the links are dummy without href values*/
    /*prevent text selection*/
    user-select: none;
    /*static positioned elements appear behind absolutely positioned siblings(.ink in this case) hence we will make the links relatively positioned to bring them above .ink*/
    position: relative;
}

/*.ink styles - the elements which will create the ripple effect. The size and position of these elements will be set by the JS code. Initially these elements will be scaled down to 0% and later animated to large fading circles on user click.*/
.ink {
    display: block; position: absolute;
    background: rgba(0,0,0,1);
    border-radius: 100%;
    transform: scale(0);
}
/*animation effect*/
.ink.animate {animation: ripple 0.65s linear;}
@keyframes ripple {
    /*scale the element to 250% to safely cover the entire link and fade it out*/
    100% {opacity: 0; transform: scale(1.5);}
}

jquery的：

//jQuery time
var parent, ink, d, x, y;
$("ul li a").click(function(e){
    parent = $(this).parent();
    //create .ink element if it doesn't exist
    if(parent.find(".ink").length == 0)
        parent.prepend("<span class='ink'></span>");

    ink = parent.find(".ink");
    //incase of quick double clicks stop the previous animation
    ink.removeClass("animate");

    //set size of .ink
    if(!ink.height() && !ink.width())
    {
        //use parent's width or height whichever is larger for the diameter to make a circle which can cover the entire element.
        d = Math.max(parent.outerWidth(), parent.outerHeight());
        ink.css({height: d, width: d});
    }

    //get click coordinates
    //logic = click coordinates relative to page - parent's position relative to page - half of self height/width to make it controllable from the center;
    x = e.pageX - parent.offset().left - ink.width()/2;
    y = e.pageY - parent.offset().top - ink.height()/2;

    //set the position and add class .animate
    ink.css({top: y+'px', left: x+'px'}).addClass("animate");
})

1 个答案:

答案 0 :(得分：0)

演示：http://codepen.io/placidcow/pen/ogNRKL

说明：

不是追加一个以点击为中心并且只是增长和渐变的跨度，而是有三个跨度：

  1. 从点击点向左缩小的一个
  2. 一个在向外成长的中心
  3. 缩小到右边的一个

    4. 三个跨距之间的间隙给人一种透明波纹的印象。 （用于制作透明度的渐变似乎逐渐而不是仅仅移动时丢失的矩形。

    除此之外，一个额外的动画应用于li从透明背景渐变为实心背景，因此纹波似乎逐渐消失而不是移动，然后突然一切都恢复。

    编辑CSS：

    ul {
    /*no background otherwise can't see through the links!*/
}
ul li {
    /*add background to this instead!*/
    background: #fff;
}
.ink {
    background: rgba(255,255,255,1);
    /*gradient*/
    background: linear-gradient(to left, transparent, #fff, #fff);
}
.rink {
    display: block; position: absolute;
    background: rgba(255,255,255,1);
    border-radius: 100%;
    background: linear-gradient(to right, transparent, #fff, #fff);
}

/*animation effect*/
.ink.animate {
    transform-origin: 0 50%;
    animation: ripple 0.65s linear;
}
.rink.animater {
    transform-origin: 100% 50%;
    animation: ripple 0.65s linear;
}
.cink.animate2 {
    animation: ripple2 0.65s linear;
}
.recover {
    animation: fade 0.65s linear;
}

@keyframes fade {
    0% {background: transparent;}
    100% { background: #fff;}
}

@keyframes ripple {
    100% {opacity: 1; transform: scale(0.1);}
}

@keyframes ripple2 {
    100% {opacity: 1; transform: scale(2.5);}
}

    Newish JS：

    var parent, ink, d, x, y, rink;
$("ul li a").click(function(e){
  parent = $(this).parent();

 this.parentNode.style.background = 'transparent';

  if(parent.find(".ink").length == 0)
    parent.prepend("<span class='ink'></span>"); //left slide
  if(parent.find(".rink").length == 0)
    parent.prepend("<span class='rink'></span>"); //right slide
  if(parent.find(".cink").length == 0)
    parent.prepend("<span class='cink'></span>"); //centre slide

  ink = parent.find(".ink");
  rink = parent.find(".rink");
  cink = parent.find(".cink");

  //in case of quick double clicks stop the previous animation
  ink.removeClass("animate");
  rink.removeClass("animater");
  cink.removeClass("animate2");
  parent.removeClass("recover");

  if(!ink.height() && !ink.width()) {
    d = Math.max(parent.outerWidth(), parent.outerHeight());
    ink.css({height: d, width: d});
    rink.css({height: d, width: d});
    cink.css({height: d, width: d/5});
  }

  parent.addClass("recover");

  //centre slide:
  x = e.pageX - parent.offset().left - cink.width()/2;
    y = e.pageY - parent.offset().top - cink.height()/2;

    //set the position and add class .animate
    cink.css({top: y+'px', left: x+'px'}).addClass("animate2");


  //left and right slides positions, widths and animation:
  x = -20;
  y = e.pageY - parent.offset().top - ink.height()/2;

  //set widths so fit edges/reach click point
  ink.css({width:e.pageX-parent.offset().left/2});
  rink.css({width:parent.width()-e.pageX+parent.offset().left+20});

  //set the position and add class .animate
  ink.css({top: y+'px', left: x+'px'}).addClass("animate"); 
  x=e.pageX-parent.offset().left;
  rink.css({top: y+'px', left: x+'px'}).addClass("animater");  

  //need cleaner way to reset back colour!
  var self = this;
  setTimeout(function() { self.parentNode.style.background = '#fff';},650);
})

    Demo Result

相关问题
最新问题