将一个小图放置在一个小盒子里,当鼠标在小盒子里移动时,出现一个移动块,右侧出现一个大盒子,显示出小盒子中移动块所在区域的等比例放大的图片内容。需要实现的效果如下:
基本实现思路为:右侧大盒子为一个可视区域,有左侧小盒子中的图片的等比例放大图片,通过计算图片需要移动的距离来显示出想要放大的内容,超出部分设置为隐藏。
<head>
<meta charset="UTF-8">
<title>放大镜</title>
<style type="text/css" media="screen">
img {
width: 250px;
height: 150px;
}
#pic_wrap {
position: relative;
width: 250px;
height: 150px;
float: left;
}
#float_box {
width: 100px;
height: 100px;
background-color: green;
filter: opacity(alpha: 30);
opacity: 0.3;
position: absolute;
display: none;
}
#big_img {
background-image: url(images/Layer14.png);
height: 450px;
width: 750px;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
#show {
width: 300px;
height: 300px;
float: left;
background-color: white;
opacity: 1;
filter: opacity(alpha:1);
overflow: hidden;
display: none;
}
</style>
</head>
<body>
<!-- 原始图片区域 -->
<div id="pic_wrap">
<!-- 放大镜所示区域 -->
<div id="float_box"></div>
<img src="images/Layer14.png" >
</div>
<div id="show">
<!-- 预留的放大后的图片 -->
<img src="images/Layer14.png" id="big_img">
</div>
</body>
当鼠标移入的时候,放大镜能够显示出来!需要加onmouseover事件。
当鼠标没有移除,且鼠标在图片内不停地移动, 需要加onmousemove事件。
当鼠标完全移除后,需要加onmouseout事件。
onmouseover事件需要让放大镜和可视窗口显示出来。
onmousemove事件,让放大镜和可视窗口中的图片同时移动。
onmouseout时间,让放大镜和可是窗口消失!
var pic_wrap = document.getElementById(‘pic_wrap‘),
float_box = document.getElementById("float_box"),
show = document.getElementById(‘show‘);
big_img = document.getElementById("big_img");
//鼠标移入事件,让放大镜和放大区显示!
pic_wrap.onmouseover = function() {
float_box.style.display = "block";
show.style.display = "block";
}
//鼠标不断移动时触发,实时更新放大镜得到的图片
pic_wrap.onmousemove = function(event) {
floatMove(float_box, pic_wrap, event);
showPic();
}
//鼠标移出后,放大镜和放大区隐藏
pic_wrap.onmouseout = function() {
float_box.style.display = "none";
show.style.display = "none";
}
//由于offset方法包括边框,在使用的时候很容易出现问题,所以用style来实时获取attr!
function getStyle(obj, attr) {
if (window.currentStyle) {
return parseInt(obj.currentStyle[attr]);
}
else {
return parseInt(getComputedStyle(obj,null)[attr]);
}
}
//运动框架,控制放大镜在原图中的位置!
function floatMove(argu1, argu2, event) {
var e = event ||window.event;
var minLeft = getStyle(argu1, "width");
var maxLeft = getStyle(argu2, "width") - minLeft/2;
var minHeight = getStyle(argu1, "height");
var maxHeight = getStyle(argu2, "height") - minHeight/2;
console.log(maxLeft);
console.log(maxLeft - minLeft/2);
if (e.clientX < minLeft/2) {
float_box.style.left = "0px";//防止放大镜超出左边框
}
else if (e.clientX > maxLeft) {
float_box.style.left = getStyle(argu2, "width") - getStyle(argu1, "width") + "px";//防止放大镜超出右边框
}
else {
float_box.style.left = event.clientX - minLeft/2 + "px"; //放大镜完全在图片内时正常移动
}
if (e.clientY < minHeight/2) {
float_box.style.top = "0px"; //防止放大镜超出上边框
}
else if (e.clientY > maxHeight) {
float_box.style.top = getStyle(argu2, "height") - getStyle(argu1, "height") + "px"; //防止放大镜超出下边框
}
else {
float_box.style.top = event.clientY - minLeft/2 + "px";
}
}
//用来显示放大镜得到的图片,利用坐标计算!实时更新可视区域
function showPic() {
var iCurLeft = getStyle(float_box,"left");
var iCurTop = getStyle(float_box,"top");
var a = getStyle(pic_wrap,"width") - getStyle(float_box,"width");
var b = getStyle(big_img,"width") - getStyle(show,"width");
var moveWidth = -(iCurLeft/a)*b;
big_img.style.left = moveWidth + "px";
var c = getStyle(pic_wrap,"height") - getStyle(float_box,"height");
var d = getStyle(big_img,"height") - getStyle(show,"height");
var moveHigth = -(iCurTop/c)*d;
big_img.style.top = moveHigth + "px";
}
来源:https://www.cnblogs.com/web12/p/10093486.html
预览图片是一个很常用的业务功能,比如掘金的预览图片功能,下面我们就来模拟实现一个类似掘金的简单预览图片功能(PS:最终实现动画效果不如掘金,可自行扩展,还有就是嵌套的元素与掘金的方式也有区别)。
平铺选项是在网页设计中能够经常使用到的一个选项,例如网页中常用的渐变式背景。采用传统方式制作渐变式背景,往往需要宽度为背景进行平铺。
加载本地图片:在项目根目录下创建名为 assets 的文件夹,将装有本地图片的自定义文件夹(假设取名为images)放在assets文件夹的目录下
笔者网站的图片都是上传到第三方网站上的,比如 简书、掘金、七牛云上的,但是最近简书和掘金都开启了 防盗链,防止其他网站访问他们网站上的图片了,导致笔者的网站存在他们网站上的图片全挂了
实现思路:获取input的file;使用fileReader() 将图片转为base64;使用canvas读取base64 并降低分辨率;把canvas数据转成blob对象;把blob对象转file对象;完成压缩
此demo为大于1M对图片进行压缩上传,若小于1M则原图上传,可以根据自己实际需求更改。demo源码如下:
nodejs可以使用request依赖包来下载图片。需要先安装request依赖,然后使用request向网页发出请求,最后将图片下载到本地。request模块让http请求变的更加简单。(作为客户端,去请求、抓取另一个网站的信息)
图像是web上提供的最基本的内容类型之一。他们说一张图片胜过千言万语。但是如果你不小心的话,图片大小有时高达几十兆。因此,虽然网络图像需要清晰明快,但它们尺寸可以缩小压缩的,使用加载时间保持在可接受的水平。
css让图片铺满的方法:可以使用background-size:cover样式设置背景图片铺满。background-size属性规定背景图像的尺寸。
object-fit:指定可替换元素的内容应如何适应到需使用的高度和宽度确定的框,平时写代码经常会在代码中插入图片,你是否会多少感觉插入的图片被拉伸或是被缩放
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!