/*
*知识点预备
clientX,clientY 鼠标相对于可视区的位置
offsetX,offsetY layerX layerY 鼠标相对于事件源的位置
screenX，screenY 鼠标相对于屏幕的位置
pageX , pageY IE(不支持)鼠标在页面上的位置,从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化。
在有滚动条的情况下就需要做这种额外的处理
兼容性的处理如下
var docE = document.documentElement,docBody=document.body;
pageX = clientX + Math.max(docE .scrollLeft,docBody.scrollLeft);
pageY = clientY + Math.max(docE .scrollTop,docBody.scrollTop);**/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>放大镜</title>
<link rel="stylesheet" href="">
<style type="text/css">
media="all"
html, body, div, span, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, address, big, cite, code, del, em, font, img, ins, small, strong, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend {
margin: 0;
padding: 0;
}
#small{
border: 1px solid #dddddd;
width: 352px;
height: 352px;
position: absolute;
top: 0px;
left: 0px;
}
#small img{
width: 350px;
height: 350px;
}
.zoomUp{
visibility:hidden;
cursor: move;
border: 1px solid #ddd;
background: #FEDE4F 50% top no-repeat;
opacity: .5;
-moz-opacity: .5;
-khtml-opacity: .5;
filter: alpha(Opacity=50);
position: absolute;
left: 0;
top:0;
}
#big{
width: 402px;
height: 402px;
position: absolute;
left: 362px;
top: 0px;
border: 1px solid #dddddd;
overflow: hidden;
visibility: hidden;
}
#big img{
width: 800px;
height: 800px;
position: absolute;
}
</style>
<script type="text/javascript">
window.onload = function(){
var small = document.getElementById("small");
var big = document.getElementById("big");
var bigImg = big.getElementsByTagName("img")[0];
small.onmouseover = function(e){
var e = e || window.event;
big.style.visibility = "visible";
small.onmousemove = function(e){
var e = e || window.event;
//事件源位置
var ex = e.offsetX || e.layerX;
var ey = e.offsetY || e.layerY;
bigImg.style.left = -ex/small.offsetWidth*(big.offsetWidth)+"px";
bigImg.style.top = -ey/small.offsetHeight*(big.offsetHeight)+"px";
}
small.onmouseout = function(e){
console.log("out");
big.style.visibility = "hidden";
small.onmousemove = small.onmouseout = null;
}
return false;
}
}
</script>
</head>
<body>
<div id="small">
<img src="img/small.jpg" />
</div>
<div id="big">
<img src="img/big.jpg">
</div>
</body>
</html>
相关推荐
本项目提供了一个简单易用的仿淘宝放大镜效果的精简版，特别适合小型电商网站或者开发者快速实现这一功能。 该精简版放大镜效果有以下几个主要特点： 1. **代码精简**：这个版本剔除了不必要的代码，只保留了实现...
在本项目中，我们主要探讨的是如何利用Vue3、Vite和TypeScript来实现一个类似于淘宝网站中的商品图片放大镜效果。这个效果通常用于增强用户的购物体验，让他们能更清晰地查看商品细节。以下是实现这一功能所涉及的...
总的来说，仿淘宝放大镜效果结合图片列表是一种提高电商网站用户体验的有效手段。通过合理地运用HTML、CSS和JavaScript，我们可以实现这一功能，让网站的交互更加生动和直观。在实践中，开发者应不断优化代码，提升...
原生JS 仿淘宝放大镜效果，鼠标移入选择图片局部，在右边弹出显示图片局部放大效果
JavaScript仿淘宝放大镜效果是一种常见的网页交互功能，用于在用户将鼠标悬停在商品图片上时，提供一个可移动的放大区域，使用户能够更清晰地查看商品细节。这一效果通常应用于电商网站的商品展示，提高了用户体验。...
使用react写一个仿图片放大镜效果使用react写一个仿图片放大镜效果
仿淘宝js放大镜效果 核心代码 malmg.onmouseover = function(){ showimg.style.display = "block"; bigimg.style.display = "inline"; show_half = showimg.offsetHeight/2; maxWidth = smalmg.clientWidth - ...
jQuery放大镜效果就是一种常见的技术手段，它模仿了淘宝网的产品预览方式，让用户能够更清晰地查看商品细节。本篇文章将深入探讨如何利用jQuery实现这种放大镜效果。 首先，jQuery是一个强大的JavaScript库，它简化...
"仿淘宝放大镜非鼠标指向"是一个网页交互效果的设计，它借鉴了淘宝网站上商品图片展示时的放大镜功能，但区别在于用户不是通过鼠标悬停来触发，而是通过点击图片进行切换。这样的设计可以提供更加直观且有趣的浏览...
这个功能通常使用JavaScript（js）编程语言来实现，结合HTML和CSS构建，以模仿淘宝网站的商品主图放大镜效果。 首先，我们要理解这个功能的基本工作原理。当用户鼠标悬停在商品主图上时，会出现一个浮动的放大镜...
【标题】"仿淘宝放大镜.zip"所涉及的知识点主要集中在Web前端开发，特别是JavaScript和jQuery库的应用上。淘宝放大镜功能是电商网站中常见的一种交互设计，它允许用户在鼠标悬停在商品图片上时，能清晰地查看商品...
总的来说，仿淘宝放大镜功能主要依赖于JavaScript和CSS来实现，通过动态更新预览区域的图片源和位置，为用户提供了一种直观的商品细节查看方式。理解和实现这一功能有助于提升前端开发人员在电商网站用户体验设计...
"jQuery仿淘宝商品详情页图片放大镜效果"就是一个实现这种功能的技术方案，它适用于IE6及以上的浏览器，旨在提供与淘宝网站类似的放大镜效果。 首先，jQuery是一个强大的JavaScript库，它的易用性和丰富的插件使其...
总的来说，“仿淘宝、京东商品放大镜效果”是通过JavaScript和HTML协同工作，结合CSS样式来实现的一种交互式图片展示技术。它能够提供更加直观、细腻的商品细节查看体验，对于提升用户体验和促进在线销售具有积极的...
在本文中，我们将深入探讨如何实现“仿ppg放大镜效果”，这种效果常在电商网站如淘宝的详细页面上见到，用于提供商品局部的高清视图。这种效果通常被称为“放大镜”或“zoom”功能，它提升了用户体验，让用户能够更...
在电商网站上，用户在查看商品详情时，通常希望能有放大镜功能，以便更清晰地看到商品...如果你对原生JavaScript感兴趣，或者想了解更多关于前端开发的知识，这个“仿淘宝京东放大镜效果”的项目将是一个很好的起点。
"仿东京，天猫，淘宝网商品放大镜效果"是一种常见的交互设计技术，它能够提升用户在浏览商品细节时的体验。这种效果通常会在鼠标悬停在商品图片上时，出现一个放大的预览区域，让用户可以更清晰地查看产品的细节，而...
在本篇文章中，我们将深入探讨如何实现这种仿淘宝多图片放大镜效果，包括所需的技术、步骤和关键代码。 首先，我们需要理解这个效果的基本原理。放大镜效果主要由两部分组成：原始图片和放大区域。当用户将鼠标移动...