hamid_khaleghi

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

5 پست در این موضوع قرار دارد

سلام دوستان

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

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

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

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

با تشکر.

لینک

0

به اشتراک گذاری این پست


لینک به پست

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

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

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

خیلی ممنون

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

باتشکر

1

به اشتراک گذاری این پست


لینک به پست

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

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);

0

به اشتراک گذاری این پست


لینک به پست
ببخشید یه مشکل دارم چطور میشه این ویژگی هم برا 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>

0

به اشتراک گذاری این پست


لینک به پست

برای ارسال نظر یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

برای اینکه بتوانید نظر ارسال کنید نیاز دارید که کاربر سایت شوید

ایجاد یک حساب کاربری

برای حساب کاربری جدید در انجمن ما ثبت نام کنید. عضویت خیلی ساده است !


ثبت نام یک حساب کاربری جدید

ورود به حساب کاربری

دارای حساب کاربری هستید؟ از اینجا وارد شوید


ورود به حساب کاربری