şurda 2. yorumdaki şeyi yapıyorum olmuyo taktik?
http://stackoverflow.com/questions/30074246/how-to-create-ripple-effect-on-click-material-design
Buton üzerine damla efekti yapamıyorum |
7 Mesajlar | 904 Okunma |
<script></script>
<script></script>
<script>
$("div").click(function (e) {
// Remove any old one
$(".ripple").remove();
// Setup
var posX = $(this).offset().left,
posY = $(this).offset().top,
buttonWidth = $(this).width(),
buttonHeight = $(this).height();
// Add the element
$(this).prepend("");
// Make it round!
if(buttonWidth >= buttonHeight) {
buttonHeight = buttonWidth;
} else {
buttonWidth = buttonHeight;
}
// Get the center of the element
var x = e.pageX - posX - buttonWidth / 2;
var y = e.pageY - posY - buttonHeight / 2;
// Add the ripples CSS and start the animation
$(".ripple").css({
width: buttonWidth,
height: buttonHeight,
top: y + 'px',
left: x + 'px'
}).addClass("rippleEffect");
});
</script>
snneee
CodePen - A Pen by Alex Rutherford
<script>
window.console = window.console || function(t) {};
</script>
Button
<script></script>
<script></script>
<script>
$('div').click(function (e) {
$('.ripple').remove();
var posX = $(this).offset().left, posY = $(this).offset().top, buttonWidth = $(this).width(), buttonHeight = $(this).height();
$(this).prepend('');
if (buttonWidth >= buttonHeight) {
buttonHeight = buttonWidth;
} else {
buttonWidth = buttonHeight;
}
var x = e.pageX - posX - buttonWidth / 2;
var y = e.pageY - posY - buttonHeight / 2;
$('.ripple').css({
width: buttonWidth,
height: buttonHeight,
top: y + 'px',
left: x + 'px'
}).addClass('rippleEffect');
});
//# sourceURL=pen.js
</script>
<script>
if (document.location.search.match(/type=embed/gi)) {
window.parent.postMessage("resize", "*");
}
</script>
CodePen - A Pen by Alex Rutherford
<script>
window.console = window.console || function(t) {};
</script>
Button
<script></script>
<script></script>
<script>
$('.buton').click(function (e) {
$('.ripple').remove();
var posX = $(this).offset().left, posY = $(this).offset().top, buttonWidth = $(this).width(), buttonHeight = $(this).height();
$(this).prepend('');
if (buttonWidth >= buttonHeight) {
buttonHeight = buttonWidth;
} else {
buttonWidth = buttonHeight;
}
var x = e.pageX - posX - buttonWidth / 2;
var y = e.pageY - posY - buttonHeight / 2;
$('.ripple').css({
width: buttonWidth,
height: buttonHeight,
top: y + 'px',
left: x + 'px'
}).addClass('rippleEffect');
});
//# sourceURL=pen.js
</script>
<script>
if (document.location.search.match(/type=embed/gi)) {
window.parent.postMessage("resize", "*");
}
</script>