前端开发jQuery_制作放大镜

jquery前端开发工程师 会的|jquery 视觉设计 前端开发|网站前端开发

html 代码

<!DOCTYPE html>
<head>
<metacharset=”UTF-8″>
<title>jquery前端开发:放大镜</title>
<script type=”text/javascript” src=’http://libs.baidu.com/jquery/2.0.0/jquery.js’></script>
<style>
*{
margin:0;
padding:0;
}
.box{
width:400px;
height:255px;
position:relative;
margin:30px;
border:solid1px#ccc
}
.small-img{
display:block;
width:400px;
height:255px;
position:relative;
}
.cursor{
display:block;
width:400px;
height:255px;
position:absolute;
z-index:2;
top:0;
left:0;
}
.mask-float{
display:none;
width:160px;
height:120px;
position:absolute;
background:#ffffcc;
border:1pxsolid#ccc;
filter:alpha(opacity=50);
opacity:0.5;
top:0;
}
.max-img{
width:400px;
height:300px;
position:absolute;
left:460px;
top:0;
overflow:hidden;
border:solid1px#ccc;
display:none;
z-index:100;
}
.mask-float{
position:absolute;
}
.max-imgimg{
position:absolute;
z-index:555;
}
</style>
</head>
<body>
<divclass=”box”>
<divclass=”small-img”>
<imgsrc=”http://cdn.attach.qdfuns.com/notes/pics/201611/14/160302fcxlfywtxmx6lkxt.jpg”>
<divclass=”mask-float”></div>
<divclass=”cursor”></div>
</div>
<divclass=”max-img”>
<imgsrc=” http://cdn.attach.qdfuns.com/notes/pics/201611/14/160302scs99chmlz70ts03.jpg”>
</div>
</div>
<script>
$(function(){
varbox=$(“.box”);//盒子
varsmallImg=box.find(“.small-img”);//小图片
varmask=smallImg.find(“.mask-float”) //放大镜
varmoveObj=smallImg.find(“.cursor”) //
varbig=box.find(“.max-img”);
varbigImg=big.children(“img”);//大图片
//放大镜和大图片显示与隐藏
smallImg.hover(function(){
$(this).children(“.mask-float”).show();
$(this).siblings(“.max-img”).show();
},function(){
$(this).children(“.mask-float”).hide();
$(this).siblings(“.max-img”).hide();
})
//放大镜移动
moveObj.on(“mousemove”,function(event){//通过获取鼠标的坐标赋值给放大镜的left和top值
varevent= event || window.event;
varleft= event.pageX -box.offset().left -smallImg.position().left -mask.width() /
2;
vartop= event.pageY -box.offset().top -smallImg.position().top -mask.height() /2;
if (left<0) {//放大镜left的最小值
left=0;
}elseif (left>$(this).width() -mask.width()) {//放大镜left的最大值
left=$(this).width() -mask.width();
}
if (top<0) {//放大镜top的最小值
top=0;
}elseif (top>$(this).height() -mask.height()) {//放大镜top的最大值
top=$(this).height() -mask.height();
}
mask.css({
“left”:left+”px”,
“top”:top+”px”
});
//大图与小图存在下面的比例关系
varbigX=left/ ($(this).width() -mask.width());
varbigY=top/ ($(this).height() -mask.height());
varbigImgLeft=bigX* (bigImg.width() -big.width());
varbigImgTop=bigY* (bigImg.height() -big.height());
//大图放大
bigImg.css({
“left”:-bigImgLeft+”px”,
“top”:-bigImgTop+”px”
})
})
})
</script>
</body>
</html>
javascript jquery 交互式web前端开发|jquery前端开发框架|web前端开发主要是怎么学?
» 本文来自:前端开发者 » 《前端开发jQuery_制作放大镜》
» 本文链接地址:https://www.rokub.com/3583.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!