电商网站商品图片放大镜实现

2019独角兽企业重金招聘Python工程师标准>>>

提供两种实现方式。

① margin-left、margin-top方式实现。

②clip方式实现。

事件统一使用委托机制，即冒泡原理。

方式一外边距实现

请记得将图片放进去

<!DOCTYPE HTML>
<html><head><style>#outerdiv{height:220px;width:460px;margin:20px auto;}.imgcontainer{width:200px;height:200px;display:inline-block;position:relative;}#rightdiv{overflow:hidden;margin-left:30px;display:none;}#overlayout{width:100px;height:100px;background-color:#3958dd8c;left:0px;top:0px;position:absolute;display:none;}#movediv{width:100%;height:100%;position:absolute;left:0px;top:0px;cursor: move;}body{margin:0 auto;}</style></head><body>
<div id="outerdiv"   ><div id="leftdiv" class="imgcontainer" ><img id="srcimg"src="src.png" width="100%" height="100%"/><div id="overlayout"  ></div><div id="movediv" onmouseenter="showHideImg(true)"onmouseleave="showHideImg(false)"onmousemove="expandImg(event)"></div> </div><div id="rightdiv" class="imgcontainer"><img id="expand_img" src="src.png" width="200%" height="200%"/></div>
</div>    <script >var target_img = document.getElementById("expand_img");function expandImg(e){var x = e.offsetX,y = e.offsetY;if(x<=50){x=0;}else if(x<=150){x=x-50;}else{x=100;}if(y<=50){y=0;}else if(y<=150){y=y-50;}else{y=100;}overlayout.style.left=x+"px";  overlayout.style.top=y+"px";target_img.style.marginLeft= -1*x*2 +"px";target_img.style.marginTop= -1*y*2 +"px";
}function showHideImg(flag){if(flag){//展示 right-div.document.getElementById("rightdiv").style.display="inline-block";overlayout.style.display="block";}else{//隐藏 right-div.document.getElementById("rightdiv").style.display="none";overlayout.style.display="none";}}
</script></body>
</html>

方式二 clip实现

请记得将图片放进去

<!DOCTYPE HTML>
<html><head><style>#outerdiv{height:220px;width:460px;margin:20px auto;}.imgcontainer{width:200px;height:200px;display:inline-block;position:relative;}#rightdiv{overflow:hidden;margin-left:30px;display:none;}#overlayout{width:100px;height:100px;background-color:#3958dd8c;left:0px;top:0px;position:absolute;display:none;}#movediv{width:100%;height:100%;position:absolute;left:0px;top:0px;cursor: move;}body{margin:0 auto;}#expand_img{position:absolute;left:0px;top:0px;}</style></head><body>
<div id="outerdiv"   ><center>原图强制400*400</center><img   src="src.png" width="400px" height="400px"  /><br/><div id="leftdiv" class="imgcontainer" ><img id="srcimg"src="src.png" width="100%" height="100%"/><div id="overlayout"  ></div><div id="movediv" onmouseenter="showHideImg(true)"onmouseleave="showHideImg(false)"onmousemove="expandImg(event)"></div>  </div><div id="rightdiv" class="imgcontainer"><img id="expand_img" src="src.png" width="400px" height="400px"  /></div>
</div>    <script >var target_img = document.getElementById("expand_img");function expandImg(e){var x = e.offsetX,y = e.offsetY;if(x<=50){x=0;}else if(x<=150){x=x-50;}else{x=100;}if(y<=50){y=0;}else if(y<=150){y=y-50;}else{y=100;}overlayout.style.left=x+"px";  overlayout.style.top=y+"px";console.info(x+" "+y);var b = 2;var top = b*y;var left = b*x;var right = left + 100*b;var bottom = top + 100*b;target_img.style.clip="rect("+top+"px "+ right+"px "+ bottom+"px "+left+"px)";target_img.style.left=-left+"px";target_img.style.top=-top+"px";}function showHideImg(flag){if(flag){//展示 right-div.document.getElementById("rightdiv").style.display="inline-block";overlayout.style.display="block";}else{//隐藏 right-div.document.getElementById("rightdiv").style.display="none";overlayout.style.display="none";}}
</script></body>
</html>

转载于:https://my.oschina.net/lightled/blog/1925302

电商网站商品图片放大镜实现相关推荐

电商网站商品模型之商品详情页设计方案 - 梦亦晓 - 博客园
电商网站商品模型之商品详情页设计方案 - 梦亦晓 - 博客园
电商网站的图片优化方法及注意事项
电子商务网站也是需要SEO优化的,尤其是在图片优化上,比如一款新式的女士外套,想要卖的好,必须图片要做的漂亮能够吸引住客户,勾起客户的购买的欲望.所以电子商务网站要做好图片优化是非常有必要的. 电商网 ...
商品sku算法php,笛卡尔乘积-电商网站商品sku组合算法应用
笛卡尔乘积是指在数学中,两个集合X和Y的笛卡尓积(Cartesian product),又称直积,表示为X × Y,第一个对象是X的成员而第二个对象是Y的所有可能有序对的其中一个成员. 利用笛卡尔乘积 ...
小白学 Python 爬虫：Selenium 获取某大型电商网站商品信息
目标先介绍下我们本篇文章的目标,如图: 本篇文章计划获取商品的一些基本信息,如名称.商店.价格.是否自营.图片路径等等. 准备首先要确认自己本地已经安装好了 Selenium 包括 Chrome ...
Python Web前端实战案例——电商网站商品菜单导航栏
jQuery是一个快速.小巧.轻量级的.写的少.做的多.功能丰富的 JavaScript 库,是目前最流行的 JS 框架.利用它可以帮我们快速实现一些炫酷的效果. 目录 1 原理先知 2 思路概要 3 ...
电商网站商品模型之商品详情页设计方案
如下设计方案参考淘宝和华为商城 SKU SPU的关系 SPU = Standard Product Unit (标准产品单位) SPU是商品信息聚合的最小单位,是一组可复用.易检索的标准化信息的集合, ...
人气流量通通要！电商网站商品页设计超全面指南
编者按:今天这篇文章读完后,同学们可以来做一个小练习,根据文章,把优设看做一个电商网站,文章看做商品,来分析一下哪篇文章是热门,有哪些突出的方法,文章里藏有哪些引导用户的细节等等,即学即用,不容易忘, ...
分享免费的主流电商平台商品图片批量下载方法
最近一个新入行的微商MM找我帮忙,她正在优选商品,让我帮她下载她所看上的某巴巴和某宝上的每个商品的图片,基本需求是:看上哪个商品,就批量把该商品的所有介绍图片下载回来进行二次筛选处理. 需求不复杂,但 ...
电商详情页系统实战(2) -小型电商网站商品详情页的页面静态化架构及缺陷
商品详情页的系统架构 => 缓存架构 => 高并发 => 高可用电商网站里,大概可以说分成两种小型电商简单的一种架构方案,页面静态化的方案大型电商复杂的一套架构,大电商,国 ...

电商网站商品图片放大镜实现

电商网站商品图片放大镜实现相关推荐

最新文章

热门文章