اسکریپ بزرگنمایی تصاویر کل وب

این تاپیک 11 پاسخ و 3 مشارکت کننده دارد . آخرین آپدیت توسط :  hapalhapo ،‏ 3 سال و 10 ماه پیش .

این تاپیک تاکنون 2891 بازدید داشته است .

نویسنده پست
شنبه ، 20 اکتبر 2012     12:24 ق.ظ #


morteza

Subscriber
163 پست58 تاپیک

سلام کدی می خواستم که با رفتن موس روی تصاویر کل وب ام کمی بزرگ بشه و دورش کادری کشیده بشه .....

2  تشکر
یکشنبه ، 21 اکتبر 2012     4:31 ب.ظ #


لقمان آوند

مدیر ارشد
VIP
1704 پست5 تاپیک

اینو بزار توی قالبت قبل از تگ head بسته :

<style>

img {
  transform-origin: 80% 80%;
  transition: transform 2s linear;
  transform: scale(2);
}

img:hover{

   border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;

   border:2px solid #eee;

}

</style>

3  تشکر
یکشنبه ، 21 اکتبر 2012     6:13 ب.ظ #


morteza

Subscriber
163 پست58 تاپیک

سلام آقا لقمان واقعا نمی دونم چطوری ازتون تشکر کنم خیلی دنبال این کد بودم .... فقط آقا لقمان این کد رو میشه یه کاری کرد که به بعضی از تصاویر وب تاثیر نزاره و بزرگ نشن مثلا من می خوام تصاویر پست ها فقط اون طوری بشن ؟؟؟ و همچنین چطوری میشه مثل این کد رو به نوشته های ستون وب هم اعمال کرد مثلا : مثل نوشته های موضوعات سون لرن که یکم بزرگ میشه  ؟؟؟؟ بازم ممنون ازتون واقعا کارتون درسته هر کدی که می دید کار می کنه .

0  تشکر
دوشنبه ، 22 اکتبر 2012     2:34 ق.ظ #


لقمان آوند

مدیر ارشد
VIP
1704 پست5 تاپیک

سلام

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

<style>

img.zoom {
  transform-origin: 80% 80%;
  transition: transform 2s linear;
  transform: scale(2);
}

img.zoom:hover{

   border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;

   border:2px solid #eee;

}

</style>

 

بعد هر عکسی رو که می خوای زوم بشه کلاس zoom رو اینطوری بهشت اضافه کن :
<img src="imageURL" class="zoom">

2  تشکر
دوشنبه ، 22 اکتبر 2012     9:29 ق.ظ #


morteza

Subscriber
163 پست58 تاپیک

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

0  تشکر
دوشنبه ، 22 اکتبر 2012     9:29 ب.ظ #


morteza

Subscriber
163 پست58 تاپیک

آقا لقمان این مشکل رو تونستم حل کنم یعنی چندتا کد رو با هم قاطی کردم درس شد ببینید درسته :

<style>
img:hover{
opacity:0.8;filter:alpha(opacity=80);
-webkit-transform: rotate(-2deg);
-moz-transform: rotate(-2deg);

border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;
border:2px solid #eee;
}
img:out{
opacity:1;filter:alpha(opacity=100);
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);

}
</style>

 

راستی با کروم و فایر فاکس سازگار شد الان ولی با  اكسپلورر سازگار نیست یعنی اصلا هیچ تاثیری نداره در  اكسپلورر .

0  تشکر
چهار شنبه ، 24 اکتبر 2012     1:59 ب.ظ #


لقمان آوند

مدیر ارشد
VIP
1704 پست5 تاپیک

سلام

IE رو کلا ولش کن. همیشه نا سازگاره .

1  تشکر
چهار شنبه ، 24 اکتبر 2012     3:44 ب.ظ #


morteza

Subscriber
163 پست58 تاپیک

ممنون آقا لقمان که گفتبن من فکر می کردم با من ناسازگاره .... درضمن آقا لقمان شرمنده بازم سوال : در این کد که گفین می تونم  یه کلاس css تعریف کنیم و فقط به عکسایی که می خوام اضافش کنم میشه برعکس اینو انجام بدم یعنی آدرس عکسی رو بدم که نمی خوام اونطوری بشه ؟؟؟

0  تشکر
چهار شنبه ، 24 اکتبر 2012     8:56 ب.ظ #


لقمان آوند

مدیر ارشد
VIP
1704 پست5 تاپیک

خوب  معمولا اینطوری استفاده میشه .

میتونی از کدهای اولی اسنفاده کنی و بعد یه کلاس css تعریف کنی که همه ی ویژگی های موجود رو مقدارشو none بزاری و از !important آخر ویژگی ها استفاده کنی و کلاس رو به عکسایی که نمی خوای زوم بشن اضافه کنی .

0  تشکر
چهار شنبه ، 24 اکتبر 2012     10:26 ب.ظ #


morteza

Subscriber
163 پست58 تاپیک

راستش آقا لقمان متوجه نشدم ببخشید که کلافه می کنم با سوالاتم باید به این کد چه چیزی اضافه کنم

<style>
img:hover{
opacity:0.8;filter:alpha(opacity=80);
-webkit-transform: rotate(-2deg);
-moz-transform: rotate(-2deg);

border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;
border:2px solid #eee;
}
img:out{
opacity:1;filter:alpha(opacity=100);
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);

}
</style>

0  تشکر
پست 1 تا 10 (از مجموع 12 پست)

برای پاسخ دادن به این تاپیک باید وارد سایت شوید .