hamid_khaleghi 74 ارسال شده در تیر 94 گزارش بازنشر ارسال شده در تیر 94 سلام دوستانلطفاً به زیر منو ها و دکمه های این سایت نگاه کنید وقتی روشون کلیک میکنی بکگرداندش از جایی که ماوس قرار داده رنگ عوض میکنه میره به اطرافدرست مثل دکمه های اندروید 5!چطور میشه همچین چیزی درست کرد ؟با تشکر.لینک نقل قول لینک به ارسال
علی زینلی 2114 ارسال شده در تیر 94 گزارش بازنشر ارسال شده در تیر 94 سلام ، یه نمونه:http://www.cssscript.com/android-l-ripple-click-effect-with-javascript-and-css3/ 1 نقل قول لینک به ارسال
hamid_khaleghi 74 ارسال شده در تیر 94 مالک گزارش بازنشر ارسال شده در تیر 94 سلام ، یه نمونه:http://www.cssscript...cript-and-css3/سلام دوست عزیزخیلی ممنونیک خرده باهاش مشکل دارم که درستش میکنمباتشکر 1 نقل قول لینک به ارسال
hamid_khaleghi 74 ارسال شده در تیر 94 مالک گزارش بازنشر ارسال شده در تیر 94 سلام ، یه نمونه: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 ارسال شده در تیر 94 گزارش بازنشر ارسال شده در تیر 94 ببخشید یه مشکل دارم چطور میشه این ویژگی هم برا 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> نقل قول لینک به ارسال
پست های پیشنهاد شده
به گفتگو بپیوندید
هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .