init

css/imgbox.css

@@ -0,0 +1,129 @@
+#imgbox-loading {
+	position: absolute;
+	top: 0;
+	left: 0;
+	background: url('imgbox-spinner.gif') center center no-repeat;
+	cursor: pointer;
+	display: none;
+	z-index: 90;
+}
+
+#imgbox-loading div {
+	background: #FFF;
+	width: 100%;
+	height : 100%;
+}
+
+#imgbox-overlay {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	background: #000;
+	display: none;
+	z-index: 80;
+}
+
+.imgbox-wrap {
+	position: absolute;
+	top: 0;
+	left: 0;
+	background: #FFF;
+	display: none;
+	z-index: 90;
+}
+
+.imgbox-img {
+	padding: 0;
+	margin: 0;
+	border: none;
+	width: 100%;
+	height: 100%;
+	vertical-align: top;
+}
+
+.imgbox-close {
+	position: absolute;
+	top: -15px;
+	right: -15px;
+	height: 30px;
+	width: 30px;
+	background: url('imgbox-close.png') top left no-repeat;
+	cursor: pointer;
+	outline: none;
+}
+
+.imgbox-title {
+	padding-top: 10px;
+	font-size: 11px;
+	text-align: center;
+	font-family: Arial;
+	color: #333;
+	display: none;
+}
+
+.imgbox-bg-wrap {
+	position: absolute;
+	padding: 0;
+	margin: 0;
+	display: none;
+}
+
+.imgbox-bg {
+	position: absolute;
+	width: 20px;
+	height: 20px;
+}
+
+.imgbox-bg-n {
+	left: 0;
+	top: -20px;
+	width: 100%;
+	background: url(imgbox-bg-n.png) repeat-x;
+}
+
+.imgbox-bg-ne {
+	right: -20px;
+	top: -20px;
+	background: url(imgbox-bg-ne.png) no-repeat;
+}
+
+.imgbox-bg-e {
+	right: -20px;
+	top: 0;
+	height: 100%;
+	background: url(imgbox-bg-e.png) repeat-y;
+}
+
+.imgbox-bg-se {
+	right: -20px;
+	bottom: -20px;
+	background: url(imgbox-bg-se.png) no-repeat;
+}
+
+.imgbox-bg-s {
+	left: 0;
+	bottom: -20px;
+	width: 100%;
+	background: url(imgbox-bg-s.png) repeat-x;
+}
+
+.imgbox-bg-sw {
+	left: -20px;
+	bottom: -20px;
+	background: url(imgbox-bg-sw.png) no-repeat;
+}
+
+.imgbox-bg-w {
+	left: -20px;
+	top: 0;
+	height: 100%;
+	background: url(imgbox-bg-w.png) repeat-y;
+}
+
+.imgbox-bg-nw {
+	left: -20px;
+	top: -20px;
+	background: url(imgbox-bg-nw.png) no-repeat;
+}

css/style.css

@@ -0,0 +1,111 @@
+@charset "utf-8";
+/* CSS Document */
+/*---------初始样式----------*/
+*{ margin:0px; padding:0px;}
+html,body{
+    -webkit-text-size-adjust:none;
+}
+body,input,textarea{
+	font-size: 12px;
+	line-height: 18px;
+	font-size:12px;
+	font-family: "宋体","微软雅黑", "Microsoft YaHei", "Lucida Grande", "Lucida Sans Unicode", "Microsoft YaHei", Helvetica, Arial, Verdana, sans-serif, STHeiti;
+}
+textarea {
+	resize: none;
+	overflow: hidden;
+	outline: none;
+}
+input {
+	outline: none;
+}
+li {
+	list-style: none;
+}
+body a {
+	outline: none;
+	text-decoration: none;
+    blr:expression(this.onFocus=this.blur());
+}
+img {
+	display: block;
+	border:none;
+}
+.clear {
+	background: none;
+	border: 0;
+	clear: both;
+	display: block;
+	float: none;
+	font-size: 0;
+	list-style: none;
+	margin: 0;
+	padding: 0;
+	overflow: hidden;
+	visibility: hidden;
+	width: 0;
+	height: 0;
+	line-height: 0;
+	font-size: 0;
+}
+/*---------初始样式结束----------*/
+body{}
+/*---------头部--------*/
+.logo{
+	width:100%;
+	height:80px;
+	margin:0 auto;
+	background:url(../images/logo.png) top center no-repeat;
+}
+.head{
+	width:100%;
+	height:100px;
+	margin:0 auto;
+	background:url(../images/head.png) center no-repeat;
+}
+/*---------头部样式结束--------*/
+/* 整个效果就依赖于main_pro 的width 和 img的width调整，a决定响应时事件的区域*/
+.main_pro{
+	width:858px;/*整个图片区域的宽度*/
+	margin:0 auto 20px;
+	text-align:center;
+}
+.main_pro a{
+	float:left;
+	width:250px;
+	height:250px;
+	display:block;
+	position:relative;
+	margin:18px;
+}
+.main_pro a img{
+	width:250px;
+	height:250px;
+}
+
+/*---------尾部样式--------*/
+.foot_top{
+	width:100%;
+	height:10px;
+	background:url(../images/foot_top.jpg) center no-repeat;
+}
+
+.foot{
+	width:100%;
+	padding-top:0px;
+	margin:0 auto;
+	height:30px;
+	color:#333;
+	font-family:"微软雅黑";
+	line-height:24px;
+	text-align:center;
+	#background:url(../images/foot.jpg) top center no-repeat;
+}
+.foot_bot{
+    width:100%;
+    height:10px;
+    background:url(../images/foot_bot.jpg) center no-repeat;
+}
+/*---------尾部样式结束--------*/
+
+

index.html

@@ -0,0 +1,88 @@
+<!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">
+
+    <meta name="keywords" content="X宫格">
+    <meta name="description" content="show">
+    <title>X宫格效果演示</title>
+    <!-- imgbox 默认css，不需要修改 -->
+    <link rel="stylesheet" type="text/css" href="./css/imgbox.css">
+    <!-- 页面的控制在这里 -->
+    <link rel="stylesheet" type="text/css" href="./css/style.css">
+    <!-- imgbox 依赖 -->
+    <script type="text/javascript" src="./js/jquery.min.js"></script>
+    <!-- imgbox js -->
+    <script type="text/javascript" src="./js/jquery.imgbox.js"></script>
+    <!-- imgbox 的实例
+        $("a").imgbox({
+          padding: 10,               // Set the padding/transparent border around the image.
+          border: 2,                 // Set the solid border around the image.
+          alignment: 'center',       // Position - may be auto OR center.
+          allowMultiple: false,      // Allow opening multiple imgBoxes.
+          autoScale: true,           // Scale the image to fit the available space.
+          speedIn: 500,              // Set the zoom-in speed.
+          speedOut: 500,             // Set the zoom-out speed.
+          easingIn: 'swing',         // Set the zoom-in animation easing.
+          easingOut: 'swing',        // Set the zoom-out animation easing.
+          zoomOpacity: false,        // If true, changes image transparency when zooming.
+          overlayShow: true,         // Display an overlay under the imgBox.
+          overlayOpacity: 0.7,       // Set overlay opacity.
+          hideOnOverlayClick: true,  // Hide imgBox when the overlay is clicked.
+          hideOnContentClick: false, // Hide imgBox when the image is clicked.
+          slideshow: true,           // Display next/previous controls.
+          theme: 'light'             // Choose a color scheme (light/black).
+});
+    -->
+    <script type="text/javascript">
+        $(document).ready(function () {
+            $("#qr1,#qr2,#qr3,#qr4,#qr5,#qr6,#qr7,#qr8,#qr9").imgbox({
+                'speedIn': 0,
+                'speedOut': 0,
+                'alignment': 'center',
+                'overlayShow': true,
+                'allowMultiple': false
+            });
+        });
+    </script>
+</head>
+
+<body>
+<div class="head"></div>
+<div class="main_pro">
+    <a id="qr1" title=""
+       href="images/demo.jpg"><img alt="" src="images/demo.jpg"></a>
+    <a id="qr2" title=""
+       href="images/demo.jpg"><img alt="" src="images/demo.jpg"></a>
+    <a id="qr3" title=""
+       href="images/demo.jpg"><img alt="" src="images/demo.jpg"></a>
+    <a id="qr4" title=""
+       href="images/demo.jpg"><img alt="" src="images/demo.jpg"></a>
+    <a id="qr5" title=""
+       href="images/demo.jpg"><img alt="" src="images/demo.jpg"></a>
+    <a id="qr6" title=""
+       href="images/demo.jpg"><img alt="" src="images/demo.jpg"></a>
+    <a id="qr7" title=""
+       href="images/demo.jpg"><img alt="" src="images/demo.jpg"></a>
+    <a id="qr8" title=""
+       href="images/demo.jpg"><img alt="" src="images/demo.jpg"></a>
+    <a id="qr9" title=""
+       href="images/demo.jpg"><img alt="" src="images/demo.jpg"></a>
+    <div class="clear"></div>
+</div>
+
+<!-- 点击的动态效果区域 -->
+<div id="imgbox-loading" style="display: none;">
+    <div style="opacity: 0.4;"></div>
+</div>
+<div id="imgbox-overlay" style="display: none; height: 1005px; opacity: 0.5;"></div>
+
+<!-- 页尾 -->
+<div class="foot_top"></div>
+<div class="foot">
+    <p><a style="color:#333;" href="http://www.goodmemory.cc/" target="_blank">点滴</a></p>
+</div>
+<div class="foot_bot"></div>
+</body>
+</html>