js原生之淘宝放大镜特效

最新推荐文章于 2024-07-26 11:09:07 发布
最新推荐文章于 2024-07-26 11:09:07 发布
阅读量71 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/renjiangjinyou/p/6710311.html
版权

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
html,body{
margin:0;
padding:0;
}
#maglifier{
width:1030px;
height:520px;
border:1px solid red;
box-sizing:border-box;
}

.sdiv{
position:absolute;
top:10px;
left:10px;
width:500px;
height:500px;
overflow: hidden;
}
.sdiv img{
position: absolute;
top:0;
left:0;
display: block;
width:100%;
}
.sdiv span{
position: absolute;
top:0;
left:0;
width:250px;
height:250px;
background-color: yellow;
opacity:0.5;
filter: alpha(opacity=50);
display:none;
cursor:crosshair;
}
.bDiv{
position: absolute;
top:10px;
left:520px;
width:500px;
height:500px;
overflow: hidden;
border:1px solid red;
}
.bDiv img{
position: absolute;
top:0;
left:0;
width:200%;
height:200%;
display: block;
}
</style>
<!-- 为了兼容IE8 -->
<!--[if IE 8]>
　　<script type="text/javascript">
　　　　if(!document.getElementsByClassName){
　　　　　　document.getElementsByClassName = function(className, element){
　　　　　　　　var children = (element || document).getElementsByTagName('*');
　　　　　　　　var elements = new Array();
　　　　　　　　for (var i=0; i<children.length; i++){
　　　　　　　　　　var child = children[i];
　　　　　　　　　　var classNames = child.className.split(' ');
　　　　　　　　　　for (var j=0; j<classNames.length; j++){
　　　　　　　　　　　　if (classNames[j] == className){
　　　　　　　　　　　　　　elements.push(child);
　　　　　　　　　　　　　　break;
　　　　　　　　　　　　}
　　　　　　　　　　}
　　　　　　　　}
　　　　　　　　return elements;
　　　　　　};
　　　　}
　　</script>
<![endif]-->
</head>

<body>
<div id="maglifier">
<div class="sdiv">
<img src="image/20170411123451.jpg" alt='小图片'>
<span class="moveSpan"></span>
</div>
</div>

<script type="text/javascript">
var oMaglifier = document.getElementById("maglifier");
var oSDiv = document.getElementsByClassName("sdiv")[0];
var oMoveSpan = document.getElementsByClassName("moveSpan")[0];

// 创建放大的图片元素
var oBDiv = document.createElement("div"),
oBImg = document.createElement("img");
oBDiv.className = "bDiv";
oBImg.src = "image/20170411123430.jpg";
oBImg.alt = "大图片";
oBImg.className = "bImg";

oSDiv.onmouseover = function (){
oBDiv.appendChild(oBImg);
oMoveSpan.style.display = "block";
oMaglifier.appendChild(oBDiv);
};

oSDiv.onmouseout = function (){
oMoveSpan.style.display = "none";
oMaglifier.removeChild(oBDiv);
};

oSDiv.onmousemove = function (e){
var e = e || window.event;

var oMoveSpan_MaxL = oSDiv.offsetWidth - oMoveSpan.offsetWidth; //获取移动框的水平临界值
var oMoveSpan_MaxH = oSDiv.offsetHeight - oMoveSpan.offsetHeight;//获取移动框的垂直临界值

var oBImg_MaxL = -(oBImg.offsetWidth - oBDiv.offsetWidth); //获取移动大图片的临界值
var oBImg_MaxH = -(oBImg.offsetHeight - oBDiv.offsetHeight);//获取移动大图片的临界值


var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
var x = e.pageX || e.clientX + scrollX;
var y = e.pageY || e.clientY + scrollY;
//因为ie是没有pageX的，而clientX又表示可视区域，当页面缩小时会有bug，这里重写pageX
//x,y分别表示新的pageX，pageY

var oMoveSpan_L = x - this.offsetLeft - oMoveSpan.offsetWidth/2;
var oMoveSpan_H = y - this.offsetTop - oMoveSpan.offsetHeight/2;
//移动框距离固定框1的left,top值

var oBImg_L = oMoveSpan_L/oMoveSpan_MaxL*oBImg_MaxL;
var oBImg_H = oMoveSpan_H/oMoveSpan_MaxH*oBImg_MaxH;
//大图片距离固定框2的left,top值

if(oMoveSpan_L < 0){oMoveSpan_L = 0;}
if(oMoveSpan_L > oMoveSpan_MaxL){oMoveSpan_L = oMoveSpan_MaxL;}
if(oMoveSpan_H < 0){oMoveSpan_H = 0;}
if(oMoveSpan_H > oMoveSpan_MaxH){oMoveSpan_H = oMoveSpan_MaxH;}
if(oBImg_L > 0){oBImg_L = 0;}
if(oBImg_L < oBImg_MaxL){oBImg_L = oBImg_MaxL;}
if(oBImg_H > 0){oBImg_H = 0;}
if(oBImg_H < oBImg_MaxH){oBImg_H = oBImg_MaxH;}
//到达临界值时，让它不再移动

oMoveSpan.style.left = oMoveSpan_L + "px";
oMoveSpan.style.top = oMoveSpan_H + "px";
oBImg.style.left = oBImg_L + "px";
oBImg.style.top = oBImg_H + "px";


};
</script>

</body>

</html>

转载于:https://www.cnblogs.com/renjiangjinyou/p/6710311.html

weixin_34406086
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js实现天猫淘宝购物放大镜效果
Iwokei的博客
11-02 614
前言 分享一个笔者写过的js实现天猫淘宝购物放大镜效果的例子 正文 代码如下： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ padding:...
js 实现淘宝放大镜
qq_44904804的博客
08-20 117
淘宝放大镜 需要准备两张图片，和两个div 装小图的显示，装大图div的隐藏 鼠标移动到小div上的时候，显示装大图的div <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/c...
JS面向对象——淘宝放大镜实现
进击的葱
01-15 1983
描述： JS面向对象——淘宝放大镜实现 图片的引用是一个大图，一个小图 传输用的ajax，记得改成自己的ip地址，js和html都改一下 效果: 实现： js文件： LoadMethod.js class LoadMethod{ static get LOAD_IMG_FINISH(){ return "load_img_finish"; } ...
js淘宝放大镜效果代码
04-11
js淘宝放大镜效果代码
JS淘宝放大镜源代码
there_is_no_savi的博客
08-29 186
【代码】JS淘宝放大镜源代码。
原生js实现放大镜特效
10-20
在本文中，我们将探讨如何使用原生JavaScript实现一个放大镜特效，这种效果常用于电商网站的产品图片展示，让用户能更清晰地查看商品细节。首先，我们要理解放大镜特效的关键原理和涉及到的技术点。 **放大镜特效...
原生js简单实现放大镜特效
10-19
在网页设计中，为了提供更好的用户体验，经常需要实现一些交互效果，例如放大镜特效。这种特效主要用于产品展示，用户可以通过鼠标移动来查看商品的细节。本文将详细介绍如何使用原生JavaScript来实现一个简单的放大...
原生JS实现的放大镜特效示例【测试可用】
10-17
主要介绍了原生JS实现的放大镜特效,涉及javascript事件响应及页面元素动态操作相关实现技巧,需要的朋友可以参考下
【demo】原生js实现淘宝放大镜
庭落
07-13 242
效果 BUG 受窗口移动影响（鼠标定位的时候）解决想法是在加上滚轮移动距离的变量 目前还没成功（。） 只能接受一个比例大小的图 代码 <div class="bigimg" id="small-box"> <img src="img/1.jpg" alt="" width="400" height="200" id="big-img"> <div clas...
JS 仿淘宝宝贝图片切换放大效果
12-22
JS 仿淘宝宝贝图片切换放大效果 javascript
JS+html仿淘宝图片放大镜预览效果
01-10
JS+html实现淘宝图片放大镜预览效果
CSS仿淘宝首页导航条布局效果
10-31
CSS仿淘宝首页导航条布局效果
简易放大镜的实现
z1808232384的博客
06-06 222
css样式： *{ margin: 0; padding:0; } #small-box{ width: 350px; height: 450px; background-size:350px 450px ; top:10px; position:absolute; left:100px; background-repeat: no-repeat; } #mask{ width: 200px; height: 200px
原生js实现淘宝图片放大功能
g1531997389的博客
01-06 4568
目录结构：HTML:&lt;!DOCTYPE html&gt; &lt;html lang="zh-CN"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&amp
js 放大镜（淘宝商品图片放大镜）
enwoyaohaohaoxuexi的博客
10-13 1190
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;/head&gt; &lt;style&gt; *{
js实现淘宝放大镜效果
热门推荐
YZi_Angel的专栏
08-25 1万+
记得很久以前，小编就准备写个放大镜，但是种种原因导致，一直没有完成这个愿望，下面，让我们一起来实现这个常见的功能吧。 不懂的同学，可能认为这很难细实现，觉得它很博大精深的样子，其实真了解他了，你会发现原来这么简单，下面废话不多说，让我们一起来实现它吧。 首先当然是html布局和css样式： ![效果图](http://img.blog.csdn.net/20160825213
JS 放大镜（淘宝商品放大镜）的实现
大桶爆米花eee
04-26 4908
&amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;title&amp;gt;&amp;lt;/title&amp;gt; &amp;
【React 】开发环境搭建详细指南
lph159的博客
07-24 1131
无论你是刚刚开始学习 React，还是希望在现有项目中采用 React 技术，搭建一个高效的开发环境都是至关重要的。本文将详细介绍如何从零开始搭建 React 开发环境，涵盖所需的工具和最佳实践，帮助你快速启动并顺利进行开发。Visual Studio Code（VS Code）是目前最流行的代码编辑器之一，提供了丰富的扩展和强大的功能。如果你希望对项目的配置有更多的控制，可以选择手动配置 React 项目。下载并安装最新版本的 Node.js，安装 Node.js 后，npm 会自动安装。
已解决：vue-office/excel 多个sheet点击切换，滚动条高度不重置，表格视图位置不正确
最新发布
weixin_42289080的博客
07-26 170
解决 @vue-office/excel 多个sheet切换，内容以及滚动条展示不正确的问题
用原生js写个放大镜功能
03-22
好的，以下是一个简单的原生JS实现放大镜功能的代码： HTML： ``` <div class="magnifier"></div> ``` CSS： ``` .container { position: relative; } .magnifier { position: absolute; width: 200px;...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值