调整目标:1.变更大图时,根据新图片宽高设置边距,保证图片能居中。
2.小伙伴表示下拉条太丑了,所以修改下大图交互方式,去掉下拉条,改为图片可拖拽。
3.样式随便搞搞。
首先,先把布局变下。
修改css,把图片外层的div改为绝对定位,调整样式保证可视区域范围。
.cur_pic{
top: 0;
left: 10%;
height: 100%;
width: 80%;
overflow: hidden;
display: inline-block;
position: absolute;
text-align:left;
}
其次修改js,在刚打开遮罩层以及切换图片时判断图片宽高和可视区域的宽高。决定图片的外边距。
//图片高度不够时设置上边距
var moreHeight=$(".cur_pic").height()-$(".cur_big_pic").height();
if(moreHeight>0){
$(".cur_big_pic").css("margin-top",moreHeight/2+"px");
}else{
$(".cur_big_pic").css("margin-top","0px");
}
//图片宽度不够设置左边距
var moreWidth=$(".cur_pic").width()-$(".cur_big_pic").width();
if(moreWidth>0){
$(".cur_big_pic").css("margin-left",moreWidth/2+"px");
}else{
$(".cur_big_pic").css("margin-left","0px");
}
这样大图加载时基本就居中了,大图就顶边。
然后开搞图片拖拽
修改css,让鼠标在图片范围内变化,改js加鼠标动作的响应。
js调了蛮多时间的,css就不单独贴了,后面一起贴
pagex=0;
pagey=0;
begin=false;
//拖动大图
$(".cur_big_pic").bind("mousedown",function(e){
e.preventDefault();
e.stopPropagation();
//记录坐标,改变鼠标
$(this).css("cursor","-webkit-grabbing");
parentX=parseInt($(this).css("margin-left"));
parentY=parseInt($(this).css("margin-top"));
pagex=e.pageX;
pagey=e.pageY;
begin=true;
}).bind("mousemove",function(e){
//变更位置
if(begin){
$(this).css("margin-left",parentX+e.pageX-pagex+"px");
$(this).css("margin-top",parentY+e.pageY-pagey+"px");
}
}).bind("mouseup",function(e){
//决定最终位置
if(begin){
$(this).css("cursor","-webkit-grab");
$(this).css("margin-left",parentX+e.pageX-pagex+"px");
$(this).css("margin-top",parentY+e.pageY-pagey+"px");
begin=false;
}
}).bind("mouseout",function(e){
//决定最终位置
if(begin){
$(this).css("cursor","-webkit-grab");
$(this).css("margin-left",parentX+e.pageX-pagex+"px");
$(this).css("margin-top",parentY+e.pageY-pagey+"px");
begin=false;
}
});
本来是用offsetX/Y来取距离,但是这个取不到margin,不想调了,直接用margin来做了。
事件触发都是异步的,加个锁更好控制点。
贴上全部代码
<!DOCTYPE HTML>
<html>
<head>
<title>遮罩层大图</title>
<meta charset="UTF-8">
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1">
<script src="./jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
imglist=[];
totalpic=0;
curpic=0;
pointcurX=0;
pointcurY=0;
parentX=0;
parentY=0;
$(".piclist").each(function(){
imglist[totalpic]=$(this).attr("src");
totalpic++;
});
//小图点击事件
$(".piclist").bind("click",function(){
curpic=$(".piclist").index(this);
showControl(curpic);
$(".cur_big_pic_num").html(curpic+1);
$(".total_big_pic_num").html(totalpic);
$(".cur_big_pic").attr("src",$(this).attr("src"));
$(".high_level").attr("style","top:"+getScrollTop()+"px");//触发遮罩层显示时,获取当前的高度
$(".high_level").show();
//添加高斯模糊
$(".maincontent").addClass("gaublue");
//图片高度不够时设置上边距
var moreHeight=$(".cur_pic").height()-$(".cur_big_pic").height();
if(moreHeight>0){
$(".cur_big_pic").css("margin-top",moreHeight/2+"px");
}else{
$(".cur_big_pic").css("margin-top","0px");
}
//图片宽度不够设置左边距
var moreWidth=$(".cur_pic").width()-$(".cur_big_pic").width();
if(moreWidth>0){
$(".cur_big_pic").css("margin-left",moreWidth/2+"px");
}else{
$(".cur_big_pic").css("margin-left","0px");
}
$("body").attr("style","overflow-y:hidden;");//加这个是去掉最外层的滚动条,防止滚到遮罩层挡不住的部分
$("body").bind("touchmove",function(event){event.preventDefault();});//手机端,出遮罩层就禁止滚动内容
});
//关闭遮罩层
$(".close_ico").bind("click",function(){
$(".high_level").hide();
$(".maincontent").removeClass("gaublue");
$("body").attr("style","overflow-y:none;");//关闭时恢复页面的纵向滚动条
$("body").unbind("touchmove");//解除对默认行为的阻止
});
//手机滑动
$(".big-content").bind("touchstart",function(e){
pointcurX=e.targetTouches[0].pageX;
});
$(".big-content").bind("touchmove",function(e){
});
$(".big-content").bind("touchend",function(e){
if(e.changedTouches[0].pageX>pointcurX){//向左
changeBigPic(-1);
}else{//向右
changeBigPic(1);
}
});
pagex=0;
pagey=0;
begin=false;
//拖动大图
$(".cur_big_pic").bind("mousedown",function(e){
e.preventDefault();
e.stopPropagation();
//记录坐标,改变鼠标
$(this).css("cursor","-webkit-grabbing");
parentX=parseInt($(this).css("margin-left"));
parentY=parseInt($(this).css("margin-top"));
pagex=e.pageX;
pagey=e.pageY;
begin=true;
}).bind("mousemove",function(e){
//变更位置
if(begin){
$(this).css("margin-left",parentX+e.pageX-pagex+"px");
$(this).css("margin-top",parentY+e.pageY-pagey+"px");
}
}).bind("mouseup",function(e){
//决定最终位置
if(begin){
$(this).css("cursor","-webkit-grab");
$(this).css("margin-left",parentX+e.pageX-pagex+"px");
$(this).css("margin-top",parentY+e.pageY-pagey+"px");
begin=false;
}
}).bind("mouseout",function(e){
//决定最终位置
if(begin){
$(this).css("cursor","-webkit-grab");
$(this).css("margin-left",parentX+e.pageX-pagex+"px");
$(this).css("margin-top",parentY+e.pageY-pagey+"px");
begin=false;
}
});
});
//大图左右切换
function changeBigPic(index){
var nowindex=curpic;
var newnum=nowindex+index;
if(newnum<0||newnum>totalpic-1)return;
$(".cur_big_pic").fadeOut(500,function(){
$(".cur_big_pic").attr("src",imglist[newnum]);
//图片高度不够时设置上边距
var moreHeight=$(".cur_pic").height()-$(".cur_big_pic").height();
if(moreHeight>0){
$(".cur_big_pic").css("margin-top",moreHeight/2+"px");
}else{
$(".cur_big_pic").css("margin-top","0px");
}
var moreWidth=$(".cur_pic").width()-$(".cur_big_pic").width();
if(moreWidth>0){
$(".cur_big_pic").css("margin-left",moreWidth/2+"px");
}else{
$(".cur_big_pic").css("margin-left","0px");
}
curpic=newnum;
showControl(curpic);
$(".cur_big_pic_num").html(curpic+1);
$(".cur_big_pic").fadeIn(1000);//入场
});//出场
}
//左右按钮的显示
function showControl(index){
if(index==0){
$(".left_control").addClass("disabled");
}else{
$(".left_control").removeClass("disabled");
}
if(index==totalpic-1){
$(".right_control").addClass("disabled");
}else{
$(".right_control").removeClass("disabled");
}
}
//获取滚动条距离顶部位置
function getScrollTop() {
var scrollPos;
if (window.pageYOffset) {
scrollPos = window.pageYOffset; }
else if (document.compatMode && document.compatMode != 'BackCompat')
{ scrollPos = document.documentElement.scrollTop; }
else if (document.body) { scrollPos = document.body.scrollTop; }
return scrollPos;
}
</script>
<style>
body{height:1000px;}
/*小图start*/
ul{
list-style: none;
}
ul li{
padding:5px;
float:left;
}
.piclist{
width:200px;
height:300px;
cursor:pointer;
}
/*小图end*/
/*大图start*/
.gaublue{
-webkit-filter: blur(15px);
-moz-filter: blur(15px);
-o-filter: blur(15px);
-ms-filter: blur(15px);
filter: blur(15px);
}
.high_level{
display:none;
position:absolute;
top:0;
left:0;
height:100%;
width:100%;
}
.opacity_level{
top:0;
left:0;
position:absolute;
height:100%;
width:100%;
filter:alpha(opacity=70);
-moz-opacity:0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
background:#111111;
}
.big-content{
height:100%;
width:100%;
position: absolute;
top:0;
text-align: center;
}
.cur_pic{
top: 0;
left: 10%;
height: 100%;
width: 80%;
overflow: hidden;
display: inline-block;
position: absolute;
text-align:left;
}
.cur_big_pic{
cursor: -webkit-grab;
}
.control{
top:50%;
position:absolute;
padding:20px 25px;
background: #CC1616;
color:#ffffff;
cursor: pointer;
filter:alpha(opacity=70);
-moz-border-radius: 22px; /* Gecko browsers */
-webkit-border-radius: 22px; /* Webkit browsers */
border-radius:29px;
font-weight: bolder;
font-size: 18px;
}
.control:HOVER{
background:#B5143E;
}
.control.disabled{
background:#6A6466;
cursor:default;
}
.left_control{
left:20px;
}
.right_control{
right:20px;
}
.cur_text{
width:100%;
text-align: center;
color:#ffffff;
font-size:18px;
position:absolute;
filter:alpha(opacity=70);
-moz-opacity:0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
background:#111111;
z-index:50;
bottom: 0;
}
.close_ico{
z-index:100;
cursor:pointer;
position:absolute;
top:40px;
right:10%;
padding: 15px 22px;
background: #CC1616;
color: #FFFFFF;
-moz-border-radius: 22px; /* Gecko browsers */
-webkit-border-radius: 22px; /* Webkit browsers */
border-radius:29px;
font-weight: bolder;
font-size: 18px;
}
.close_ico:HOVER{
background:#B5143E;
}
@media screen and (max-width:768px){
.control{
display:none;
}
.cur_pic{
left: 0;
width: 100%;
}
.cur_big_pic{
width:100%;
}
}
/*大图end*/
</style>
</head>
<body>
<div class="maincontent">
<ul>
<li><img class="piclist" src="images/pic1.jpg"/></li>
<li><img class="piclist" src="images/pic2.jpg"/></li>
<li><img class="piclist" src="images/pic3.jpg"/></li>
<li><img class="piclist" src="images/pic4.png"/></li>
<li><img class="piclist" src="images/pic1.jpg"/></li>
<li><img class="piclist" src="images/pic2.jpg"/></li>
<li><img class="piclist" src="images/pic3.jpg"/></li>
<li><img class="piclist" src="images/pic4.png"/></li><li><img class="piclist" src="images/pic1.jpg"/></li>
<li><img class="piclist" src="images/pic2.jpg"/></li>
<li><img class="piclist" src="images/pic3.jpg"/></li>
<li><img class="piclist" src="images/pic4.png"/></li><li><img class="piclist" src="images/pic1.jpg"/></li>
<li><img class="piclist" src="images/pic2.jpg"/></li>
<li><img class="piclist" src="images/pic3.jpg"/></li>
<li><img class="piclist" src="images/pic4.png"/></li><li><img class="piclist" src="images/pic1.jpg"/></li>
<li><img class="piclist" src="images/pic2.jpg"/></li>
<li><img class="piclist" src="images/pic3.jpg"/></li>
<li><img class="piclist" src="images/pic4.png"/></li><li><img class="piclist" src="images/pic1.jpg"/></li>
<li><img class="piclist" src="images/pic2.jpg"/></li>
<li><img class="piclist" src="images/pic3.jpg"/></li>
<li><img class="piclist" src="images/pic4.png"/></li><li><img class="piclist" src="images/pic1.jpg"/></li>
<li><img class="piclist" src="images/pic2.jpg"/></li>
<li><img class="piclist" src="images/pic3.jpg"/></li>
<li><img class="piclist" src="images/pic4.png"/></li><li><img class="piclist" src="images/pic1.jpg"/></li>
<li><img class="piclist" src="images/pic2.jpg"/></li>
<li><img class="piclist" src="images/pic3.jpg"/></li>
<li><img class="piclist" src="images/pic4.png"/></li>
</ul>
</div>
<div class="high_level">
<div class="opacity_level"></div>
<div class="close_ico">X</div>
<div class="big-content">
<div οnclick="changeBigPic(-1)" class="control left_control"><</div>
<div class="cur_pic">
<img class="cur_big_pic">
</div>
<div οnclick="changeBigPic(1)" class="control right_control">></div>
<div class="cur_text">
<span class="cur_big_pic_num">
5
</span>
/
<span class="total_big_pic_num">
10
</span>
</div>
</div>
</div>
</body>
</html>
另外随便调了下效果,顺手丢到刚买的vps上去了,效果差不多了,先不整了,以后有想法再调。
http://www.game-player.cn/showbigpic.html
突然想做个软键盘,输入密码的就好,画草稿去。