打算向网站中添加支持率最好的TOP10妹子图,在各种前端相册之间删选了半天,确定了使用该动画效果的展示方式,鼠标划过,类似抚摸lol http://www.js-css.cn/a/jscode/album/2014/0916/1321.html.

展示代码如下:

<!doctype html>
<html>
<head>
<script type="text/javascript" class="library" src="js/jquery-1.8.0.min.js"></script>
<style>	
.part{ width: 80%; margin: 0  auto;}
.part ul{ overflow: hidden; }
#xiangce-2 .list{ width: 330px; height: 300px; float: left; overflow: hidden; zoom:1; list-style: none; margin-right: 0px; }
</style>
<script>
if(!zuley){
	var zuley = {};
}
zuley.xiangce = function(n){
	// 相册盒子
	var $box = $(n.box) || null;
	// 相册图片
	var $img = $box.find("img");
	// 图片地址
	var $imgurl = null;
	// 弹窗box
	if($("#zuley_xiangce_box").size() == 0){
		$("body").append('<div id="zuley_xiangce_box"><img src="" /></div>');
	}
	// 初始化样式
	$box.css({position:"relative","z-index":"10"});
	$img.css({position:"relative",cursor:"pointer","z-index":"9"});
	$("#zuley_xiangce_box").css("z-index","11").hide();
	
	// 鼠标滑过
	$box.on("mousemove ",function(event){
		var $this = $(this);
		var xx = (event.pageX - $this.offset().left)/$this.width()*($this.width() - $this.find("img").width());
		var yy = (event.pageY - $this.offset().top)/$this.height()*($this.height() - $this.find("img").height());
		$this.find("img").stop(true,true).animate({left:xx,top:yy},800);
	});
	
	// 点击相册图片
	$box.on("click",function(event){
		$imgurl = $(this).find("img").attr("src");
		var $imgbox = $("#zuley_xiangce_box");
		$imgbox.find("img").attr("src",$imgurl);
		$imgbox.css({left:"35%", top:"5%", position:"absolute","border":"0px solid #fff","box-shadow":"0 0 50px #000"});
		$imgbox.show().animate({width:$(this).find("img").width(),height:$(this).find("img").height()},400);
	});
	
	// 点击弹窗图片关闭
	$(document).on("click","#zuley_xiangce_box",function(){
		$(this).fadeOut(500);
	});
}</script> 
</head>
<body>
	<div class="part">
		<ul id="xiangce-2">
			<li class="list"><img src="images/1.jpg" /></li>
			<li class="list"><img src="images/1.jpg" /></li>
			<li class="list"><img src="images/1.jpg" /></li>
            </ul>
		<ul id="xiangce-2">
			<li class="list"><img src="images/1.jpg" /></li>
			<li class="list"><img src="images/1.jpg" /></li>
			<li class="list"><img src="images/1.jpg" /></li>
            </ul>
		<ul id="xiangce-2">
			<li class="list"><img src="images/1.jpg" /></li>
			<li class="list"><img src="images/1.jpg" /></li>
			<li class="list"><img src="images/1.jpg" /></li>

		</ul>
	</div>
<script type="text/javascript">
	$(function(){
		zuley.xiangce({
			'box' : '#xiangce-2 > .list'
		});
	});
</script>
</body>
</html>


blog comments powered by Disqus

Published

13 January 2015

Tags