بویکا 124 ارسال شده در شهریور 92 گزارش بازنشر ارسال شده در شهریور 92 (ویرایش شده) دوستان شاید خیلی ها مثل من بخوان افکت سیاه سفید به عکسهاشون بدن که بعد از رفتن موس روی عکس عکس رنگی بشه . من اکثر راههای این روش تو تست کردم که دو تا راه جواب داد که .1 - فقط با css : تو این روش فقط با css انجام می شکه فقط یه مشکل داره . اونم اینه که تو گوگل کروم با انمیشن تغییر رنگ پیدا می کنه ولی تو فایرفاکس انمیشنش کار نمی کنه . تاکید می کنم کد کار میکنه فقط انیمیشنش کار نمی کنه . در حالی که واسه اونم نوشته شده . اینم کدش . اگه کسی بدونه چرا کار نمی کنه به ما هم بگه . مرسی.picss img{filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\'values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); filter: gray; -webkit-filter: grayscale(100%); filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%);transition: 1.5s; -webkit-transition: 1.5s; -moz-transition: 1.5s; -o-transition: 1.5s; -ms-transition: 1.5s; -khtml-transition: 1.5s; }.picss img:hover{ -webkit-filter: grayscale(0%); -moz-filter: grayscale(0%); -ms-filter: grayscale(0%);-o-filter: grayscale(0%); filter: none; transition: 1.5s; -webkit-transition: 1.5s; -moz-transition: 1.5s; -o-transition: 1.5s; -ms-transition: 1.5s; -khtml-transition: 1.5s; }در کد بالا من عکسهایی که داخل تگ picss باشن رو افکتی کردم اگه بخواین کل عکسهای وب اینطوری بشه می تونین picss رو پاک کنین و فقط img بمونه که روی همه ی عکسها اعمال بشه .2 - استفاده از css و جی کوئری : تو این روش هم می تونین با استفاده از جی کوئری و سی اس اس افکت رو اعمال کنین به درد خود من نخورد چون با جی کوئری سایتم تداخل داشت .کد جی کوئری<script>// On window load. This waits until images have loaded which is essential$(window).load(function(){// Fade in images so there isn't a color "pop" document load and then on window load$(".picss img").fadeIn(500);// clone image$('.picss img').each(function(){var el = $(this);el.css({"position":"absolute"}).wrap("<div class='img_wrapper' style='display: inline-block'>").clone().addClass('img_grayscale').css({"position":"absolute","z-index":"998","opacity":"0"}).insertBefore(el).queue(function(){var el = $(this);el.parent().css({"width":this.width,"height":this.height});el.dequeue();});this.src = grayscale(this.src);});// Fade image$('.picss img').mouseover(function(){$(this).parent().find('img:first').stop().animate({opacity:1}, 1000);})$('.img_grayscale').mouseout(function(){$(this).stop().animate({opacity:0}, 1000);});});// Grayscale w canvas methodfunction grayscale(src){var canvas = document.createElement('canvas');var ctx = canvas.getContext('2d');var imgObj = new Image();imgObj.src = src;canvas.width = imgObj.width;canvas.height = imgObj.height;ctx.drawImage(imgObj, 0, 0);var imgPixels = ctx.getImageData(0, 0, canvas.width, canvas.height);for(var y = 0; y < imgPixels.height; y++){for(var x = 0; x < imgPixels.width; x++){var i = (y * 4) * imgPixels.width + x * 4;var avg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2]) / 3;imgPixels.data[i] = avg;imgPixels.data[i + 1] = avg;imgPixels.data[i + 2] = avg;}}ctx.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height);return canvas.toDataURL();}</script>در کد بالا من در 3 جا از تگ .picss img استفاده کردم که می تونین picss رو با هر تگی که خواستین عوض کنین . فقط باید هر 3 شون هم نام باشن . عکستون هم به این صورت قرار بدید :<div class="picss"><img src="icondock.jpg"></div>در ضمن فراموش نشه برای روش دوم باید کتابخانه jquery.min باید فراخوانی بشه . امیدوارم استفاه کرده باشین . در ضمن منتظر ایراد روش اول هستم اگه کسی بتونه کمک کنه ویرایش شده شهریور 92 توسط بویکا 3 نقل قول لینک به ارسال
Morteza 34190 ارسال شده در شهریور 92 گزارش بازنشر ارسال شده در شهریور 92 یکسری پلاگین با جی کوئری نوشته شده اما هنوز 100% درست کار نمیکننفعلا راه 100% مناسبی ندیدم 2 نقل قول لینک به ارسال
بویکا 124 ارسال شده در شهریور 92 مالک گزارش بازنشر ارسال شده در شهریور 92 یکسری پلاگین با جی کوئری نوشته شده اما هنوز 100% درست کار نمیکننفعلا راه 100% مناسبی ندیدمنمیشه فهمید چرا روش اول تو فایرفاکس انمیشنش فعال نمیشه ؟ بدون انمیشن هم که فایده نداره کد . بد دیده میشه نقل قول لینک به ارسال
Morteza 34190 ارسال شده در شهریور 92 گزارش بازنشر ارسال شده در شهریور 92 احتمالا چون انیمیشن با فیلتر عمل نمیکنه 1 نقل قول لینک به ارسال
بویکا 124 ارسال شده در شهریور 92 مالک گزارش بازنشر ارسال شده در شهریور 92 احتمالا چون انیمیشن با فیلتر عمل نمیکنهاحتمالا . با تشکر نقل قول لینک به ارسال
پست های پیشنهاد شده
به گفتگو بپیوندید
هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .