图片放大轮播效果

hehongwei44 · Aug 5, 2014 · 7a1bcbf · 7a1bcbf
1 parent f3dc125
commit 7a1bcbf
Show file tree

Hide file tree

Showing 8 changed files with 1,181 additions and 0 deletions.
diff --git a/图片放大轮播效果/css/jquery.fs.zoomer.css b/图片放大轮播效果/css/jquery.fs.zoomer.css
@@ -0,0 +1,102 @@
+/*
+ * Zoomer [Formstone Library]
+ * @author Ben Plum
+ * @version 0.2.5
+ *
+ * Copyright © 2013 Ben Plum <[email protected]>
+ * Released under the MIT License <http://www.opensource.org/licenses/mit-license.php>
+ */
+
+ 	.zoomer, .zoomer * {
+	 	-webkit-user-select: none;
+		   -moz-user-select: none;
+		    -ms-user-select: none;
+		     -o-user-select: none;
+		        user-select: none;
+ 	}
+	.zoomer { background: #eee url(fs-zoomer-loading.gif) no-repeat center; height: 100%; overflow: hidden; position: relative; width: 100%; 
+		-webkit-transition: none;
+		   -moz-transition: none;
+		   	-ms-transition: none;
+		   	 -o-transition: none;
+		   	 	transition: none;
+	}
+	.zoomer .zoomer-positioner { margin: 0; height: 1px; position: absolute; width: 1px; }
+	.zoomer .zoomer-holder { box-shadow: 0 0 3px rgba(0, 0, 0, 0.5); opacity: 0; position: relative; 
+		-webkit-transition: none;
+		   -moz-transition: none;
+		   	-ms-transition: none;
+		   	 -o-transition: none;
+		   	 	transition: none;
+	}
+	.zoomer .zoomer-image { cursor: move; float: left; height: 100%; width: 100%; 
+		-webkit-transition: opacity 0.25 linear;
+		   -moz-transition: opacity 0.25 linear;
+		   	-ms-transition: opacity 0.25 linear;
+		   	 -o-transition: opacity 0.25 linear;
+		   	 	transition: opacity 0.25 linear;
+	}
+	.zoomer .zoomer-tiles { height: 100%; position: relative; width: 100%; }
+	.zoomer .zoomer-tile { height: auto; position: absolute; width: auto; }
+
+	/* CONTROLS */
+	.zoomer .zoomer-controls { background: rgba(0, 0, 0, 0.8); box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); border-radius: 3px; padding: 5px; position: absolute; 
+		-webkit-transition: opacity 0.25 linear;
+		   -moz-transition: opacity 0.25 linear;
+		   	-ms-transition: opacity 0.25 linear;
+		   	 -o-transition: opacity 0.25 linear;
+		   	 	transition: opacity 0.25 linear;
+	}
+	.zoomer .zoomer-controls span { border-radius: 3px; color: #fff; cursor: pointer; display: block; font-size: 20px; font-weight: bold; height: 30px; line-height: 30px; margin: 0; text-align: center; width: 30px; }
+	.zoomer .zoomer-controls .zoomer-next,
+	.zoomer .zoomer-controls .zoomer-previous { display: none; }
+
+	.zoomer.zoomer-gallery .zoomer-controls .zoomer-next,
+	.zoomer.zoomer-gallery .zoomer-controls .zoomer-previous { display: block; }
+
+	/* CONTROLS - TOP, BOTTOM */
+	.zoomer .zoomer-controls-top,
+	.zoomer .zoomer-controls-bottom { height: 40px; left: 50%; margin: 0 0 0 -35px; width: 71px; }
+	.zoomer .zoomer-controls-top { bottom: auto; top: 10px; }
+	.zoomer .zoomer-controls-bottom { bottom: 10px; top: auto; }
+
+	.zoomer.zoomer-gallery .zoomer-controls-top,
+	.zoomer.zoomer-gallery .zoomer-controls-bottom { margin: 0 0 0 -65px; width: 131px; }
+
+	.zoomer .zoomer-controls-top span,
+	.zoomer .zoomer-controls-bottom span { float: left; }
+	.zoomer .zoomer-controls-top span:first-child,
+	.zoomer .zoomer-controls-bottom span:first-child { margin: 0 1px 0 0; }
+
+	/* CONTROLS - LEFT, RIGHT, TOP LEFT, TOP RIGHT, BOTTOM LEFT, BOTTOM RIGHT */
+	.zoomer .zoomer-controls-left,
+	.zoomer .zoomer-controls-top-left,
+	.zoomer .zoomer-controls-bottom-left
+	.zoomer .zoomer-controls-right,
+	.zoomer .zoomer-controls-top-right,
+	.zoomer .zoomer-controls-bottom-right { height: 71px; width: 40px; }
+
+	.zoomer.zoomer-gallery .zoomer-controls-left,
+	.zoomer.zoomer-gallery .zoomer-controls-top-left,
+	.zoomer.zoomer-gallery .zoomer-controls-bottom-left
+	.zoomer.zoomer-gallery .zoomer-controls-right,
+	.zoomer.zoomer-gallery .zoomer-controls-top-right,
+	.zoomer.zoomer-gallery .zoomer-controls-bottom-right { height: 131px; }
+
+	.zoomer .zoomer-controls-left,
+	.zoomer .zoomer-controls-right { margin: -35px 0 0 0; top: 50%; }
+
+	.zoomer.zoomer-gallery .zoomer-controls-left,
+	.zoomer.zoomer-gallery .zoomer-controls-right { margin: -65px 0 0 0; }
+
+	.zoomer .zoomer-controls-left { left: 10px; }
+	.zoomer .zoomer-controls-top-left { left: 10px; top: 10px; }
+	.zoomer .zoomer-controls-bottom-left { bottom: 10px; left: 10px; }
+
+	.zoomer .zoomer-controls-right { right: 10px; }
+	.zoomer .zoomer-controls-top-right { right: 10px; top: 10px; }
+	.zoomer .zoomer-controls-bottom-right { bottom: 10px; right: 10px; }
+
+	@media screen and (min-width: 980px) { 
+		.zoomer .zoomer-controls span:hover { background: #000; }
+	}
diff --git a/图片放大轮播效果/css/site.css b/图片放大轮播效果/css/site.css
diff --git a/图片放大轮播效果/images/nasa-bw-1.jpg b/图片放大轮播效果/images/nasa-bw-1.jpg
diff --git a/图片放大轮播效果/images/nasa-bw-2.jpg b/图片放大轮播效果/images/nasa-bw-2.jpg
diff --git a/图片放大轮播效果/images/nasa-bw-3.jpg b/图片放大轮播效果/images/nasa-bw-3.jpg
diff --git a/图片放大轮播效果/index.html b/图片放大轮播效果/index.html
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
+<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
+<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
+<title>jQuery图像缩放工具插件Zoomer - 站长素材</title>
+<link href="http://fonts.googleapis.com/css?family=Lato:300,400,900" rel="stylesheet" type="text/css" media="all" />
+<link href="css/site.css" rel="stylesheet" type="text/css" media="all" />
+</head>
+
+<body class="gridlock">
+
+<style>
+  .zoomer_wrapper { border: 1px solid #ddd; border-radius: 3px; height: 500px; margin: 10px 0; overflow: hidden; width: 100%; }
+  .zoomer.dark_zoomer img { box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); }
+</style>
+<div id="pronto">
+<article class="project_details lab_details">
+
+	<div class="bordered_bottom project_info">
+		<div class="row">
+			<div class="desktop-8 tablet-6 mobile-3">
+				<h5>Demo</h5>
+				<div class="zoomer_wrapper zoomer_basic">
+					<img src="images/nasa-bw-2.jpg" />
+					<img src="images/nasa-bw-1.jpg" />
+					<img src="images/nasa-bw-3.jpg" />
+				</div>
+				<script src="js/site.js"></script>
+				<link rel="stylesheet" href="css/jquery.fs.zoomer.css" type="text/css" media="all" />
+				<script src="js/jquery.fs.zoomer.js"></script>
+				<script>
+  	$(document).ready(function() {
+      $(".zoomer_basic").zoomer();
+
+      $(".zoomer_custom").zoomer({
+        controls: {
+          	zoomIn: ".zoomer_custom_zoom_in",
+          	zoomOut: ".zoomer_custom_zoom_out"
+		},
+        customClass: "dark_zoomer",
+        increment: 0.03,
+	    interval: 0.1,
+        marginMax: 50
+      });
+
+      $(window).on("snap", function() {
+        	$(".zoomer-element").zoomer("resize");
+      });
+
+    	$(window).one("pronto.load", function() {
+          	$(".zoomer-element").zoomer("destroy");
+          $(window).off("rubberband");
+    	});
+	});
+</script>
+			</div>
+		</div>
+	</div>
+</div>
+<div style="text-align:center;clear:both">
+<p>适用浏览器：FireFox、Chrome、Safari、Opera、傲游、搜狗. 不支持IE8、360、世界之窗。</p>
+<p>来源：<a href="http://sc.chinaz.com/" target="_blank">站长素材</a></p>
+</div>
+</body>
+
+</html>