jq随手写图片放大

html:
<img id="img1" src="<?php echo $info->business_licence_img; ?>" style="cursor: pointer" width="200" height="200" />  //原图
<style typpe="text/css">
#large{position:absolute;display:none;z-index:999; background: #c6c6c6;}
</style>

js代码:

$(function(){
var ei = $("#large"); //获取图片放大储存框
ei.hide(); //放大储存框默认隐藏
var img = new Image(); //实例化图片方法
$("#img1, img").click(function(){ //点击原图进入放大流程
img.src =$(this).attr("src");//获取原图路径
x=document.body.offsetWidth/2-img.width/2; //计算相对显示屏宽度实际图片位置
y=document.body.scrollTop+$(window).height()/2-img.height/2; //计算相对显示器高度实际图片位置
ei.css({top:y,left:x,cursor: 'pointer'}).html('<img onclick="hide_img()" style="border:1px solid gray;" src="' + this.src + '" />').show(); //订单并展示原图片
});
$(window).scroll(function(){ //为保证原图滚动时也存在于屏幕中间
if($("#large").is(':visible')){ //若图片是展示状态下
x=document.body.offsetWidth/2-img.width/2; //重新计算宽度
y=document.body.scrollTop+$(window).height()/2-img.height/2; //重新计算高度
ei.css({top:y,left:x,cursor: 'pointer'}); //改变css
}
});
//根据鼠标放大图片,原理相同
$("#img1, img").mousemove(function(e){
ei.css({top:e.pageY,left:e.pageX}).html('<img style="border:1px solid gray;" src="' + this.src + '" />').show();
}).mouseout( function(){
ei.hide();
})
});
function hide_img(){ //当点击放大图片时,关闭图片展示
var ei = $("#large");
ei.hide();
}
上一篇:AngularJs遇到的小坑与技巧


下一篇:【前端】特效-Javascript实现购物页面图片放大效果