General-Xenon
پنج شنبه 13 تیر 1392, 09:34 صبح
سلام دوستان
من مي خوام يك سايت دقيقا شبيه http://press.jamejamonline.ir/ طراحي كنم.
اگه به اين سايت بريد متوجه مي بينيد كه متن هاي صفحات روزنامه به صورت box هايي كه دورشون سايه داره و مي شه روشون كليك كرد خيلي زيبا نمايش داده مي شه و بعد از كليك متن مورد نظر توي يك پنجره popup نمايش داده ميشه. خب از افكت هاي ورق زدن و popup كه بگذريم... مي رسيم به اينكه: " چطور اين متن ها به اين عكس ها لينك شدن؟"
من اولش فكر مي كردم image Map استفاده شده، اما سورس رو كه نگاه كردم توجه شدم تمام اين باكسها به صورت div تعريف شده. يه خورده گيج شدم نمي دونم از كجا شروع كنم؟ اگه كسي بتونه ايده اي ارائه بده ممنونش ميشم.
سلام
این کد مخصوص صفحه اولش هست . ببین
<div id="page-20" class="turn-page p20" style="width: 415px; height: 570px; position: absolute; top: 0px; left: 0px; bottom: auto; right: auto; -webkit-transform-origin: 0% 100%;">
<div class="PageBg" style="background:url(Media/NewspaperImages/266/3732/266_3732_1.jpg);"> </div><div class="Content" id="1105452594038778483" rutitr="" titr="جابه‌جایی قدرت در مصر" style="height: 156px; left: 120px; top: 71px; width: 232px;"></div><div class="Content" id="1105453904778522275" rutitr="عدم اصلاح قیمت حامل‌های انرژی، چگونگی تامین منابع پرداخت یارانه نقدی را مبهم کرده است" titr="بلاتکلیفی قیمت حامل‌های انرژی در سال 92" style="height: 152px; left: 120px; top: 228px; width: 232px;"></div><div class="Content" id="1105454760144734510" rutitr="امسال حقوق سربازان نیروی انتظامی 25 درصد و سربازان مناطق مرزی 50 درصد افزایش یافته است" titr="2 ماه مرخصی تشویقی برای سربازان حافظ قرآن" style="height: 140px; left: 61px; top: 380px; width: 145px;"></div><div class="Content" id="1105455260318541820" rutitr="" titr="جابه‌جایی قدرت در مصر" style="height: 138px; left: 5px; top: 381px; width: 56px;"></div><div class="Content" id="1105456678586115169" rutitr="تیم کشورمان برای نخستین بار در رقابت‌های آسیایی فینالیست شد" titr="این بار، بانوان فوتسال درخشیدند" style="height: 168px; left: 5px; top: 66px; width: 114px;"></div><div class="Content" id="1105458082018755943" rutitr="4 نفر دیگر از مصدومان حادثه در بیمارستان بستری شدند" titr="خزر 6 نوجوان را بلعید" style="height: 143px; left: 4px; top: 235px; width: 115px;"></div><div class="Content" id="1105459650638947128" rutitr="رئیس‌جمهور منتخب از روحانیون و مراجع تقلید خواست نقد‌های دلسوزانه خود را به دولت ارائه کنند" titr="روحانی: مشکلات چند ماهه حل نمی‌شود" style="height: 313px; left: 352px; top: 65px; width: 59px;"></div><div class="Content" id="1105460593224171069" rutitr="گفت‌وگو با فرهاد قائمی، ستاره تیم ملی والیبال:" titr="منتظر شگفتی‌های بعدی باشید" style="height: 61px; left: 343px; top: 1px; width: 67px;"></div><div class="Content" id="1105461461203695280" rutitr="هورمون رشد برای افراد کوتاه قدی که صفحات استخوانی‌شان بسته نشده و بیماری زمینه‌ای نداشته باشند، موثر‌است" titr="هر قدی بلندشدنی نیست" style="height: 59px; left: 276px; top: 2px; width: 66px;"></div></div>
برای این کار طراحش اومده یک Div رو بصورت یک صفحه کلی در نظر گرفته و عکس کل صفحه اول در این Div قرار داره . یعنی شما الا یک صفحه کامل از خود روزنامه رو داری میبینی ...
div class="PageBg" style="background:url(Media/NewspaperImages/266/3732/266_3732_1.jpg);"
بعد اومده با این Div ها قسمت به قسمت کرده. که شما روی هر بخش میری با استفاده از CSS3 یک حاشیه و در نهایت یک Popup به شما نمایش میده
<div class="Content" id="1105458082018755943" rutitr="4 نفر دیگر از مصدومان حادثه در بیمارستان بستری شدند" titr="خزر 6 نوجوان را بلعید" style="height: 143px; left: 4px; top: 235px; width: 115px;"></div>
<div class="Content" id="1105459650638947128" rutitr="رئیس‌جمهور منتخب از روحانیون و مراجع تقلید خواست نقد‌های دلسوزانه خود را به دولت ارائه کنند" titr="روحانی: مشکلات چند ماهه حل نمی‌شود" style="height: 313px; left: 352px; top: 65px; width: 59px;"></div>
اینم CSS یکی از این بلوک ها -webkit-background-clip: border-box;
-webkit-background-origin: padding-box;
-webkit-background-size: auto;
-webkit-box-shadow: rgb(30, 56, 89) 0px 0px 10px 5px;
background-attachment: scroll;
background-clip: border-box;
background-color: rgba(0, 0, 0, 0);
background-image: url(http://press.jamejamonline.ir/styles/images/NewsBG.png);
background-origin: padding-box;
background-size: auto;
border-bottom-color: rgb(30, 56, 89);
border-bottom-style: solid;
border-bottom-width: 2px;
border-image-outset: 0px;
border-image-repeat: stretch;
border-image-slice: 100%;
border-image-source: none;
border-image-width: 1;
border-left-color: rgb(30, 56, 89);
border-left-style: solid;
border-left-width: 2px;
border-right-color: rgb(30, 56, 89);
border-right-style: solid;
border-right-width: 2px;
border-top-color: rgb(30, 56, 89);
border-top-style: solid;
border-top-width: 2px;
box-shadow: rgb(30, 56, 89) 0px 0px 10px 5px;
box-sizing: border-box;
display: block;
font-family: JameJam, Tahoma, sans-serif;
font-size: 13px;
font-style: normal;
font-variant: normal;
font-weight: normal;
height: 168px;
left: 5px;
line-height: normal;
position: absolute;
top: 66px;
width: 114px;
z-index: 1020;