個別に画像の拡大縮小ができるリストをjQueryで作ってみました。
画像をクリックすると拡大します。
↓以下が実際のソースサンプルです。
<script> $(function () { var x = 100, zoom = 1.2, imgWidthInit = parseInt($("img").css("width")), imgWidth = 100; $("ul li img").wrap("<div class='box'></div>").before("<div class='init'>元に戻す</div>").after("<div class='out'>縮小する</div>"); $("ul li img").click(function(){ var $this = $(this); imgWidth = parseInt($this.css("width")); if (imgWidth === imgWidthInit) { x = 100; $this.animate({ "width": x * zoom + "%" },500); } else { $this.animate({ "width": x * ((imgWidth / imgWidthInit) + (zoom - 1)) + "%" },500); } }); $(document).on("click", ".init",function(){ var $this = $(this); $this.next("img").animate({ "width": "100%" },1000); }); $(document).on("click", ".out",function(){ var $this = $(this); imgWidth = parseInt($this.prev("img").css("width")); if (imgWidth === imgWidthInit) { x = 100; $this.prev("img").animate({ "width": x / zoom + "%" },500); } else { $this.prev("img").animate({ "width": x / ((imgWidthInit / imgWidth) + (zoom - 1)) + "%" },500); } }); }); </script>
<style> * { margin: 0; padding: 0; border: 0; } #main { position: relative; width: 960px; border: 1px solid #000; margin: 0 auto; overflow: hidden; } #main ul li { position: relative; width: 960px; height: 415px; } #main ul li img { display: block; width: 100%; height: auto; vertical-align: bottom; } .box { width: 960px; height: 400px; overflow: scroll; } .init { position: absolute; top: 0; display: inline-block; padding: 5px; background: rgba(200,200,200,0.5); } .out { position: absolute; top: 0; right: 0; display: inline-block; padding: 5px; background: rgba(200,200,200,0.5); } </style>
<div id="main"> <ul><!-- --><li><img src="image/topimg1.jpg"></li><!-- --><li><img src="image/topimg2.jpg"></li><!-- --><li><img src="image/topimg3.jpg"></li><!-- --><li><img src="image/topimg4.jpg"></li><!-- --><li><img src="image/topimg5.jpg"></li><!-- --></ul> </div>