[英]How to trigger onclick event only in the child div element but not in the parent div?
[英]How to make an onclick event on child div affect the transparency of parent div?
我正在尝试修改一个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");
})
演示: http : //codepen.io/placidcow/pen/ogNRKL
说明:
具有三个范围,而不是附加以单击的点为中心,只是会逐渐增长和逐渐消失的范围,而是:
三个跨度之间的间隙给人以透明波纹的印象。 (用于使透明效果逐渐消失的渐变,而不是缺少移动的矩形。
最重要的是,对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);}
}
新版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);
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.