رفتن به مطلب
توقف فعالیت انجمن وردپرس پارسی، و ادامه فعالیت در انجمن رسمی وردپرس(کلیک کنید) ×
توقف فعالیت انجمن وردپرس پارسی، و ادامه فعالیت در انجمن رسمی وردپرس(کلیک کنید)

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

hamid_khaleghi
دنبال‌کننده 0

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

hamid_khaleghi

hamid_khaleghi 74

ارسال شده در
ارسال شده در

سلام دوستان

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

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

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

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

با تشکر.

لینک

لینک به ارسال
hamid_khaleghi

hamid_khaleghi 74

ارسال شده در
  • مالک
ارسال شده در

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

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

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

خیلی ممنون

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

باتشکر

  • امتیاز 1
لینک به ارسال
hamid_khaleghi

hamid_khaleghi 74

ارسال شده در
  • مالک
ارسال شده در

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

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

لینک به ارسال
علی زینلی

علی زینلی 2114

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


			

			
		

	







	

		
			
				برو به فهرست موضوع ها
			
		
	

	




						


					

					


					

				

			

			
		

		
		


	

		×
		

			
				

					
				

			

			
		

	






	

		×
		

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