<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>jquery图片滑动排列 - 网页模板</title>
<script id="jquery_180" type="text/javascript" class="library" src="js/jquery-1.8.0.min.js"></script>
</head>
<body>
<div class="part">
<ul id="xiangce-2">
<li class="list"><img src="images/ciqing.jpg" /></li>
<li class="list"><img src="images/1.jpg" /></li>
</ul>
<ul id="xiangce">
<li class="list"><img src="images/ciqing.jpg" /></li>
<li class="list"><img src="images/1.jpg" /></li>
<li class="list"><img src="images/2.jpg" /></li>
<li class="list"><img src="images/3.jpg" /></li>
<li class="list"><img src="images/4.jpg" /></li>
<li class="list"><img src="images/5.jpg" /></li>
<li class="list"><img src="images/6.jpg" /></li>
<li class="list"><img src="images/7.jpg" /></li>
<li class="list"><img src="images/8.jpg" /></li>
<li class="list"><img src="images/9.jpg" /></li>
<li class="list"><img src="images/10.jpg" /></li>
<li class="list"><img src="images/11.jpg" /></li>
<li class="list"><img src="images/12.jpg" /></li>
<li class="list"><img src="images/13.jpg" /></li>
<li class="list"><img src="images/14.jpg" /></li>
<li class="list"><img src="images/15.jpg" /></li>
<li class="list"><img src="images/16.jpg" /></li>
<li class="list"><img src="images/17.jpg" /></li>
<li class="list"><img src="images/8.jpg" /></li>
<li class="list"><img src="images/9.jpg" /></li>
<li class="list"><img src="images/10.jpg" /></li>
<li class="list"><img src="images/11.jpg" /></li>
<li class="list"><img src="images/12.jpg" /></li>
<li class="list"><img src="images/13.jpg" /></li>
</ul>
</div>
<script type="text/javascript">
$(function(){
zuley.xiangce({
'box' : '#xiangce > .list'
});
zuley.xiangce({
'box' : '#xiangce-2 > .list'
});
});
</script>
</body>
</html>
<style> .part{ width: 900px; margin: 0 auto; }
.part ul{ overflow: hidden; }
#xiangce .list{ width: 100px; height: 100px; float: left; overflow: hidden; zoom:1; border:1px solid #fff; margin: -1 -1px; list-style: none; }
#xiangce-2{ padding: 30px 100px; }
#xiangce-2 .list{ width: 300px; height: 300px; float: left; overflow: hidden; zoom:1; list-style: none; margin-right: 30px; }</style>
<script>/**
* zuley xiangce JS
* @Descript: 相册组件JS，仿自王子墨的浮云相册（http://julying.com/lab/albums/），鼠标滑过动画还是有点问题 -.-
* @Author : 热血洒红尘
* @blog : http://www.rxshc.com
*/
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");
var xx = $(this).offset().left + (event.pageX -$(this).offset().left)/$(this).width()*($(this).width() - $(this).find("img").width());
var yy = $(this).offset().top + (event.pageY -$(this).offset().top)/$(this).height()*($(this).height() - $(this).find("img").height());
$imgbox.find("img").attr("src",$imgurl);
$imgbox.css({left:xx,top:yy,position:"absolute","border":"5px solid #fff","box-shadow":"0 0 5px #000"});
$imgbox.show().animate({width:$(this).find("img").width(),height:$(this).find("img").height()},400);
});
// 点击弹窗图片关闭
$(document).on("click","#zuley_xiangce_box",function(){
$(this).fadeOut(200);
});
}</script>
<div style="text-align:center;clear:both">
<p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. </p>
<p>来源：<a href="http://www.moobnn.com/" target="_blank">网页模板</a></p>
</div>
jquery图片滑动排列 jquery图片滑动排列代码下载.zip
版权申诉
197 浏览量
2022-11-22
17:15:53
上传
评论
收藏 931KB ZIP 举报
jquery图片滑动排列 jquery图片滑动排列代码下载.zip （20个子文件） 
jquery图片滑动排列 jquery图片滑动排列代码下载 jiaoben940 images 
8.jpg 49KB 15.jpg 44KB 14.jpg 69KB 2.jpg 67KB 1.jpg 75KB 6.jpg 67KB 3.jpg 59KB 5.jpg 43KB 11.jpg 78KB 4.jpg 79KB 10.jpg 70KB 17.jpg 67KB ciqing.jpg 25KB 13.jpg 68KB 16.jpg 46KB 12.jpg 67KB 9.jpg 54KB 7.jpg 44KB
index.html 5KB js 
jquery-1.8.0.min.js 90KB资源评论
芝麻粒儿
- 粉丝: 5w+
- 资源: 2万+
