هاست لینوکس

آخرین بسته‌ی MyBB: نسخه‌ی 1.8.27 MyBB منتشر شد


امتیاز موضوع:
  • 0 رأی - میانگین امتیازات: 0
  • 1
  • 2
  • 3
  • 4
  • 5
ساخت کد قفسه کتاب ( کتابخانه )
#1
اول یه فایل text بسازید اسمشو بزارید books.html بعد کد زیرو داخلش کپی کنید بقیه کارارو تو کد نوشتم چیکار کنید حالا فایلیو که ساختید داخل هاستتون کپی کنید.مثلا اگه آدرس سایتتون mybbiran.com باشه آدرس کتابخونتون میشه mybbiran.com/books.html

کد:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>نام کتاب خانه</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script>
$(document).ready(function() {

 $("ul.bookRacks li").prepend('<div class="divLamp" style="width:182px; height:135px; display:none; position:absolute"><img class="lamp" src="http://moisrex.rozup.ir/Pictures/tools/library/library_lamp.png" /></div>');

 $("a.bookHover").html('<img class="bookSpacer" src="http://moisrex.rozup.ir/Pictures/tools/library/spacer.gif"/>');

 $("ul.selectedPersons li a").hover(function() {
   $(this).children("div.personHover").stop(true, true).fadeIn("fast");
 }, function() {
   $(this).children("div.personHover").fadeOut("slow");
 });

 $("a.bookHover, div#tooltip").mousemove(function(e) {
   $("div#tooltip").css({"top":e.pageY + 30,"left":e.pageX - parseInt($("div#tooltip").outerWidth() / 2) - 1,"display":"block"})
 });

 $("a.bookHover").hover(function(e) {
   if ($.browser.msie) {
     $(this).parent("li").children(".divLamp").stop(true, true).fadeIn("slow");
   } else {
     $(this).parent("li").children(".divLamp").stop(true, true).fadeIn("fast");
   }
   $("div#tooltip").text($(this).attr("rel")).stop(true, true).fadeIn("fast");
 }, function() {
   $(this).parent("li").children(".divLamp").fadeOut("slow");
   $("div#tooltip").fadeOut("fast")
 });

 for (i = 1; i <= $("ul.bookRacks li").length; i++) {
   if (i % 3 != 0) {
     $("ul.bookRacks li:eq(" + i + ")").css("margin-right", -44);
   }
 }

});
</script>

<style>
.bookRacks{list-style:none; display:inline; float:right; width:558px; padding:0; margin:20px; background:url(http://moisrex.rozup.ir/Pictures/tools/library/library_rack.jpg) repeat-y right top; overflow:hidden;}
.bookRacks li{display:inline; float:right; width:182px; height:135px; margin:0 49px 21px 0; background-position:59px 27px; background-repeat:no-repeat;background-size:65px 97px;}
.bookRacks li img.lamp{background: transparent;-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#01FFFFFF,endColorstr=#01FFFFFF)"; /* IE8 */filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#01FFFFFF,endColorstr=#01FFFFFF);/* IE6 & 7 */zoom: 1;}
.bookSpacer{position:absolute; width:65px; height:97px; margin:27px 58px 0 0; border:0;}
.library{display:inline;float:right;width:600px;background:#103b7f;border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px;-webkit-border-radius:5px;-o-border-radius:5px;-khtml-border-radius:5px;overflow:hidden;}
#tooltip { position:absolute; z-index:1000; display:none; background:#000; color:#FFF; padding:5px 10px; border:1px solid #FFF; border-radius:5px;font:11px tahoma;}
</style>

</head>

<body>

<div id="tooltip"></div>
<center>
 <center style="width:600px;">
   <div class="library">
     <ul class="bookRacks">
       <li style="background-image:url(آدرس عکس کتاب)"><a href="لينک کتاب" rel="نام کتاب" class="bookHover"></a></li>
        براي گذاشتن کتاب هاي ديگه همون مراحل بالارو انجام بديد
     </ul>
   </div>
 </center>
</center>
</body>
</html>

در این کد در هر قفسه 3 کتاب قرار می گیرد که شما می بایست تصاویر کتاب های خود را در اندازه های 65px 97px در بیاورید تا نمایش درستی داشته باشند.

نمونه آنلاین: http://geodabir.rozblog.com/page/lib

 
پاسخ
 سپاس شده توسطمحمد محمدی (۱۳۹۳/۱۲/۱۹، ۰۰:۲۴:۱۹ صبح) ، reus (۱۳۹۳/۱۲/۱۹، ۱۰:۲۴:۱۱ صبح) ، firstboy000 (۱۳۹۳/۱۲/۱۹، ۱۱:۳۶:۱۳ صبح) ، شماره مجازی (۱۴۰۱/۸/۲۶، ۰۱:۴۷:۰۹ صبح) ، گراف مسنجر (۱۴۰۱/۱۰/۳، ۰۴:۰۹:۴۵ صبح) ، چارتر ۴۲۴ (۱۴۰۲/۹/۱۲، ۱۵:۰۸:۴۵ عصر)


پرش به انجمن:


کاربرانِ درحال بازدید از این موضوع: 1 مهمان