رفتن به مطلب

افکت دادن به دکمه ها مانند اندروید 5


پست های پیشنهاد شده

سلام دوستان

لطفاً به زیر منو ها و دکمه های این سایت نگاه کنید

وقتی روشون کلیک میکنی بکگرداندش از جایی که ماوس قرار داده رنگ عوض میکنه میره به اطراف

درست مثل دکمه های اندروید 5!

چطور میشه همچین چیزی درست کرد ؟

با تشکر.

لینک

لینک به ارسال

سلام ، یه نمونه:

http://www.cssscript...cript-and-css3/

سلام دوست عزیز

خیلی ممنون

یک خرده باهاش مشکل دارم که درستش میکنم

باتشکر

لینک به ارسال

سلام ، یه نمونه:

http://www.cssscript...cript-and-css3/

ببخشید یه مشکل دارم

چطور میشه این ویژگی هم برا div باشه هم برا a ؟

کد جاوااسکریپت به این صورته شرط رو به هر صورتی مینویسم کد دیگه کار نمیکنه


var addRippleEffect = function (e) {
var target = e.target;
if (target.tagName.toLowerCase() !== 'a') return false;
var rect = target.getBoundingClientRect();
var ripple = target.querySelector('.ripple');
if (!ripple) {
ripple = document.createElement('span');
ripple.className = 'ripple';
ripple.style.height = ripple.style.width = Math.max(rect.width, rect.height) + 'px';
target.appendChild(ripple);
}
ripple.classList.remove('show');
var top = e.pageY - rect.top - ripple.offsetHeight / 2 - document.body.scrollTop;
var left = e.pageX - rect.left - ripple.offsetWidth / 2 - document.body.scrollLeft;
ripple.style.top = top + 'px';
ripple.style.left = left + 'px';
ripple.classList.add('show');
return false;
}
document.addEventListener('mousedown', addRippleEffect, false);

لینک به ارسال
ببخشید یه مشکل دارم چطور میشه این ویژگی هم برا div باشه هم برا a ؟ کد جاوااسکریپت به این صورته شرط رو به هر صورتی مینویسم کد دیگه کار نمیکنه
 var addRippleEffect = function (e) { var target = e.target; if (target.tagName.toLowerCase() !== 'a') return false; var rect = target.getBoundingClientRect(); var ripple = target.querySelector('.ripple'); if (!ripple) { ripple = document.createElement('span'); ripple.className = 'ripple'; ripple.style.height = ripple.style.width = Math.max(rect.width, rect.height) + 'px'; target.appendChild(ripple); } ripple.classList.remove('show'); var top = e.pageY - rect.top - ripple.offsetHeight / 2 - document.body.scrollTop; var left = e.pageX - rect.left - ripple.offsetWidth / 2 - document.body.scrollLeft; ripple.style.top = top + 'px'; ripple.style.left = left + 'px'; ripple.classList.add('show'); return false; } document.addEventListener('mousedown', addRippleEffect, false); 

حوصله داری برادر من؟

خب اینجوری استفاده کن ازشون:

<a href="http://example.com"><button>Button</button></a>

______

دلیل اینکه این اتفّاق میفته اینکه شما CSS ها رو تغییر نمیدین

اگر میخواین کار کنه باید CSS ها هم تغییر بدید (استایل دادنش با خودتون):

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>Android L Ripple Click Effect Demos</title>

<style>

body {

margin: 0;

padding: 0;

}

#wrap {

position: absolute;

width: 100%;

margin-top:150px;

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-flex-flow: column;

-ms-flex-flow: column;

flex-flow: column;

-webkit-box-pack: center;

-webkit-justify-content: center;

-ms-flex-pack: center;

justify-content: center;

-webkit-box-align: center;

-webkit-align-items: center;

-ms-flex-align: center;

align-items: center;

}

h1 {

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

margin: 0;

padding: 0;

-webkit-box-align: center;

-webkit-align-items: center;

-ms-flex-align: center;

align-items: center;

-webkit-box-flex: 2;

-webkit-flex: 2;

-ms-flex: 2;

flex: 2;

}

#main {

-webkit-box-flex: 5;

-webkit-flex: 5;

-ms-flex: 5;

flex: 5;

}

a {

position: relative;

display: block;

width: 13em;

height: 3em;

margin: 2em;

border: none;

outline: none;

letter-spacing: .2em;

font-weight: bold;

background: #dfdfdf;

cursor: pointer;

overflow: hidden;

-webkit-user-select: none;

-moz-user-select: none;

-ms-user-select: none;

user-select: none;

border-radius: 2px;

}

a:nth-child(2) {

color: #fff;

background: #4285f4;

}

a:nth-child(3) {

color: #fff;

background: #00bad2;

}

a:nth-child(4) {

color: #fff;

background: #ff8a80;

}

.ripple {

position: absolute;

background: rgba(0,0,0,.25);

border-radius: 100%;

-webkit-transform: scale(0);

-ms-transform: scale(0);

transform: scale(0);

pointer-events: none;

}

.ripple.show {

-webkit-animation: ripple .5s ease-out;

animation: ripple .5s ease-out;

}

@-webkit-keyframes

ripple { to {

-webkit-transform: scale(1.5);

transform: scale(1.5);

opacity: 0;

}

}

@keyframes

ripple { to {

-webkit-transform: scale(1.5);

transform: scale(1.5);

opacity: 0;

}

}

</style>

</head>

<body>

<div id="main">

<a href="http://test.com">Button</a>

<a>Button</a>

<a>Button</a>

<a>Button</a>

</div>

</div>

<script>

var addRippleEffect = function (e) {

var target = e.target;

if (target.tagName.toLowerCase() !== 'a') return false;

var rect = target.getBoundingClientRect();

var ripple = target.querySelector('.ripple');

if (!ripple) {

ripple = document.createElement('span');

ripple.className = 'ripple';

ripple.style.height = ripple.style.width = Math.max(rect.width, rect.height) + 'px';

target.appendChild(ripple);

}

ripple.classList.remove('show');

var top = e.pageY - rect.top - ripple.offsetHeight / 2 - document.body.scrollTop;

var left = e.pageX - rect.left - ripple.offsetWidth / 2 - document.body.scrollLeft;

ripple.style.top = top + 'px';

ripple.style.left = left + 'px';

ripple.classList.add('show');

return false;

}

document.addEventListener('click', addRippleEffect, false);

</script>

<script>

(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){

(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),

m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)

})(window,document,'script','//www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-46156385-1', 'cssscript.com');

ga('send', 'pageview');

</script>

</body>

</html>

لینک به ارسال

به گفتگو بپیوندید

هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .

مهمان
ارسال پاسخ به این موضوع ...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  تنها استفاده از 75 اموجی مجاز می باشد.

×   لینک شما به صورت اتوماتیک جای گذاری شد.   نمایش به صورت لینک

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.

×
×
  • اضافه کردن...