Products
GG网络技术分享 2025-03-18 16:14 2
当我们浏览淘宝或者京东网站的时候，当你用鼠标移动到产品详细页上面的图片时，图片上会显示小的方框，在图片的右边则显示出更大的图片方便浏览者可以看到更详细的产品细节。本文章我们就模拟下淘宝、京东产品放大镜效果。
<!DOCTYPE html>
<html lang="zn">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>京东放大镜</title>
<style>
.box {
width: 450px;
height: 450px;
border: 1px solid #ccc;
float: left; /*设置浮动使得两个盒子在一排显示*/
position: relative;/*设置定位 根据自身情况可以改为绝对定位 */
margin: 10px;
}
.big {
width: 600px;
height: 600px;
overflow: hidden;/*超出部分隐藏*/
border: 1px solid #ccc;
position: relative; /*设置定位 根据自身情况可以改为绝对定位 */
display: none;/*默认不显示 鼠标经过box时显示*/
}
.mask {
width: 300px;
height: 300px;
background-color: yellow;
position: absolute;/*在box类里面定位 层级高于展示图*/
top: 0px;
left: 0px;
opacity: .5;/*设置遮罩层的透明度*/
cursor: move;/*鼠标经过的时候变成十字拖动样式*/
display: none;/*默认不显示 鼠标经过box时显示*/
}
.img {
position: absolute;/*在big盒子里面绝对定位*/
/*JavaScript需要赋值需要设置top和left值*/
top: 0px;
left: 0px;
}
#smallpic{
width: 450px;
height: 450px;
}
</style>
</head>
<body>
<div class="box">
<img id='smallpic' src="small.jpg" alt="">
<div class="mask"></div>
</div>
<div class="big">
<img src="big.jpeg" alt="" class="img">
</div>
<script>
var mask = document.querySelector('.mask');
var box = document.querySelector('.box');
var big = document.querySelector('.big');
var img = document.querySelector('.img');
box.addEventListener('mouseover', function () {
mask.style.display = 'block';
big.style.display = 'block';
});
box.addEventListener('mouseout', function () {
mask.style.display = 'none';
big.style.display = 'none';
});
box.addEventListener('mousemove', function (e) {
//得到的x和y是鼠标在盒子内的坐标 this指向box
var x = e.pageX - this.offsetLeft;
var y = e.pageY - this.offsetTop;
//将获取到的鼠标的值给遮罩层（减去一半是因为让鼠标在遮罩层中央） 让它跟着鼠标移动
var maskX = x - mask.offsetWidth / 2;
var maskY = y - mask.offsetHeight / 2;
//设置最大移动距离
var maskWidth = box.offsetWidth - mask.offsetWidth;
var maskHeight = box.offsetHeight - mask.offsetHeight;
//控制mask移动的范围
if (maskX <= 0) {
maskX = 0;
} else if (maskX >= maskWidth) {
maskX = maskWidth;
}
if (maskY <= 0) {
maskY = 0;
} else if (maskY >= maskHeight) {
maskY = maskHeight;
}
mask.style.left = maskX + 'px';
mask.style.top = maskY + 'px';
//大图最大移动距离
var imgWidth = img.offsetWidth - big.offsetWidth;
var imgHeight = img.offsetHeight - big.offsetHeight;
//大图片的移动距离 = mask移动距离 * 大图最大移动距离 /mask的最大移动距离
var bigX = maskX * imgWidth / maskWidth;
var bigY = maskY * imgHeight / maskHeight;
//赋值
img.style.left = (-bigX) + 'px';
img.style.top = (-bigY) + 'px';
});
</script>
</body>
</html>效果图
本文实例讲述了javascript实现的图片预览和上传功能。分享给大家供大家参考，具体如下：
下载DEMO：https://github.com/CaptainLiao/zujian/tree/master/Upload
对于现代浏览器来说，要实现图片预览非常简单：
1、fileReader.readAsDataURL(file)
2、window.URL.createObjectURL(file)
以上两种方法分别可以得到一个base64和一个blob对象的URL地址，从而实现预览。但是，他们只支持在IE10+，显然这是不够的，如何实现低版本IE浏览器的图片预览呢？代码如下：
| <html xmlns=\"http://www.w3.org/1999/xhtml\"> <head> <script type=\"text/javascript\" language=\"javascript\"> $(\'#preview_fake\').change(function () { previewImg($(this), $(\'#preview\')); }); function previewImg($inputId, $previewId) { var inputId = $inputId[0], previewId = $previewId[0]; $previewId.empty(); if(/msie/.test(navigator.userAgent.toLowerCase())){ if($.support.version == 6.0){ $previewId.attr(\"src\",inputId.value); }else{ inputId.select(); var reallocalpath = document.selection.createRange().text; previewId.style.filter = \"progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=\'scale\',src=\\\"\" + reallocalpath + \"\\\")\"; // 设置img的src为base64编码的透明图片 取消显示浏览器默认图片 previewId.src = \'data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==\'; } }else { $previewId.attr(\"src\",window.URL.createObjectURL(previewFake.files[0])); } } </script> </head> <body> <form id=\"form1\" runat=\"server\"> <div> 选择图片：<input type=\"file\" size=\"20\" id=\'preview_fake\'\" /> </div> <div id=\"preview\" style=\"width: 300px; height: 300px\"> </div> </form> </body> </html> |
这样，我们就能够在IE10- 下预览上传的图片了。
在这里，有必要对几个参数说明一下，以免后人再入坑！
progid:DXImageTransform.Microsoft.AlphaImageLoader([enabled=bEnabled ,] [sizingMethod=sSize ,] src=sURL)
enabled：可选。布尔值(Boolean)。设置或检索滤镜是否激活。
true：默认值。滤镜激活。
false：滤镜被禁止。
sizingMethod：可选。字符串(String)。设置或检索滤镜作用的对象的图片在对象容器边界内的显示方式。
crop：剪切图片以适应对象尺寸。
image：默认值。增大或减小对象的尺寸边界以适应图片的尺寸。
scale：缩放图片以适应对象的尺寸边界。
src：必选项。字符串(String)。使用绝对或相对 url 地址指定背景图像。假如忽略此参数，滤镜将不会作用。
以上，可以实现低版本IE浏览器的图片预览，但要上传到服务器还需要一番周折。对于单张图片，可以通过<form>表单提交，但对于多张图片，这需要flash技术的支持，实现起来相当麻烦。
Demand feedback
