Home > Article > Web Front-end > Simple jQuery click water ripple animation example
This time I will bring you a simple jQuery click water ripple animation example. Use jQuery to create a click water ripple animation. What are the precautions? . Here is a practical case. Let’s take a look.
jQuery click water ripple animation principle:
1. Add 5c8b9de9fb73f56628b30e4b50c5fd36da7a5c458c43e8ac4398bd2378cdb6be# to the tag that needs to achieve the water ripple effect. ## 2. The code will position the mouse relative to the label, and draw a circle with the mouse point as the center
3. The radius of the circle can be customized (the default is the maximum width or height of the label)
4. Dot color , and animation time, etc. You can modify the internal code by yourself, or directly call the $().css({}) method to overwrite
--Encapsulation example address: http://daxianshiyanshi.sinaapp.com/data/jsdata/2016 -4-8/ripplewrapperdemo1/index1.html
-- Unencapsulated example address: 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)+'px', "left": ( e.pageX -ripple_obj.offset().left -R)+'px',"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> I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website! Simple image click upload function
The text in ionic app cannot be copied by long pressing , How to paste
The above is the detailed content of Simple jQuery click water ripple animation example. For more information, please follow other related articles on the PHP Chinese website!