php 鼠标点击图片放大,鼠标移入放大图片预览效果实现

商城项目中，有鼠标移入图片放大的功能，研究一下实现

Image zoom

body {

display: flex;

justify-content: center;

align-items: center;

min-height: 100vh;

}

#image {

width: 300px;

height: 300px;

background-color: #000;

background-image: url(https://placekitten.com/900/900);

background-size: 300px 300px;

background-repeat: no-repeat;

}

#image[zoomed] {

background-size: 900px 900px;

background-position: calc(var(--x) * 100%) calc(var(--y) * 100%);

}

let el = document.querySelector('#image')

// PC端操作

el.addEventListener('mouseenter', enterHandler)

el.addEventListener('mousemove', moveHandler)

el.addEventListener('mouseleave', leaveHandler)

// 移动端操作

el.addEventListener('touchstart', enterHandler)

el.addEventListener('touchmove', moveHandler)

el.addEventListener('touchend', leaveHandler)

function enterHandler(e) {

e.target.setAttribute('zoomed', 1)

moveHandler(e)

}

function moveHandler(e) {

// getBoundingClientRect用于获取元素相对于视窗的位置集合。集合中有top, right, bottom, left等属性

let rect = e.target.getBoundingClientRect()

let offsetX, offsetY

let isH5 = ['touchstart', 'touchmove', 'touchend'].includes(e.type)

// 是移动端，并且touches事件存在

if (isH5 && e.touches[0]) {

offsetX = e.touches[0].pageX - rect.left

offsetY = e.touches[0].pageY - rect.top

e.preventDefault()

} else {

// PC端

offsetX = e.offsetX

offsetY = e.offsetY

}

// 元素的位置信息

let x = offsetX / rect.width

let y = offsetY / rect.height

// 设置元素属性，用于计算background-position的位置

e.target.style.setProperty('--x', x)

e.target.style.setProperty('--y', y)

}

function leaveHandler(e) {

e.target.removeAttribute('zoomed')

moveHandler(e)

}

具体效果复制下去打开看看

php 鼠标点击图片放大,鼠标移入放大图片预览效果实现相关推荐

html实现360展示图片,js html5 360度全景图片预览效果
特效描述:js html5 360度全景图片预览效果.html5实现360度全景,html5 720度全景图,html5全景图,html5全景图源代码,html5 3d全景,360度全景图,3d36 ...
element表格图片放大_图片在表格中,鼠标经过图片上方，图片有放大预览效果（vue+element ）...
element的鼠标移到图片时,放大预览效果.实现思路:element的 el-table + el-popover export default { data () { return { tabDa ...
鼠标移到到图片，图片向上滑动预览效果
<!DOCTYPE html> <html> <head><title>鼠标移到到图片,图片向上滑动预览效果</title><scri ...
实现图片点击放大预览效果
前因在开发微信公众号时,产品经理要求实现图片可以点击放大,并且点击下一张的效果.因为是第一次做公众号的项目,也是第一次在移动端要做图片预览的效果,所以在网上查了相关资料. 实现路程首先,在以往的项 ...
Axure RP9——【图片放大预览效果】
图片放大预览效果目录 I.实现效果 II.实现步骤 I.实现效果一般适用于做电商平台图片的放大预览,以此更方便我们看清内容细节. 鼠标停留在商品大图时,会出现一个预览区域,并且右侧会出现预览区域的 ...
html js 图片放大效果,JavaScript实现图片放大预览效果
代码实现: Document .preview-img { position: relative; height: 398px; } .mask { display: none; position: ...
微信小程序：previewImage实现图片放大预览效果
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录前言前言记录一下做项目的过程中遇到的图片放大预览效果的实现实现的是点击图片可以放大预览,这个效果在京东淘宝都可以看到 ...
elementui 使用el-image 控件解决通过点击查看按钮两次才能实现预览图片
需求:点击查看按钮,将图片显示出来. 问题:查看按钮必须触发两次才会将图片显示出来前端效果: 点击查看按钮,弹出来图片图片展示: 解决方法有两种: 第一种调用Image 的源码中的image-v ...
基于JS实现购物车图片局部放大预览效果
在电商网站中,商品图片是非常重要的展示元素.为了让用户更好地了解商品细节,一些网站会提供图片局部放大预览效果.这篇文章将介绍如何使用JavaScript实现购物车图片局部放大预览效果. 第一步:HTM ...
JQuery实现超链接和图片提示预览效果
文章目录超链接提示效果 html css jQuery部分解决问题1 解决问题2 解决问题3 完整jQuery代码图片预览 html css jQuery代码实现效果其实现在的浏览器已经具 ...

php 鼠标点击图片放大,鼠标移入放大图片预览效果实现

php 鼠标点击图片放大,鼠标移入放大图片预览效果实现相关推荐

最新文章

热门文章