比妹子网站设计---TOP10
打算向网站中添加支持率最好的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