程序员必知:商品放大镜的效果的实现!

简介: 程序员必知:商品放大镜的效果的实现!

需求:商品展示图片的放大效果,

运用技术:onmousemove,event事件,event.clientX,event.clientY,简单的实现商品放大效果,

tips:可以下载源码直接放到编辑器里面看效果,请注意需要往class为img的img标签里添加图片地址,这样就可以实现一个简单的放大镜效果了,

源码如下:

.box{

width:800px;

height:600px;

border:1px solid #000;

position:relative;

float:left;

margin:0 50px;

}

img{

width:800px;

height:600px;

}

.box div{

width:200px;

height:200px;

background-color: rgba(225,225,225,.5);

position:absolute;

left:0;

right:0;

display: none;

overflow: hidden;

border-radius: 100px;

box-shadow: 0px 0px 5px #000;

border:1px solid #000;

cursor: pointer;

}

.showBox{

width:400px;

height:400px;

border:1px solid #000;

float: left;

margin-top:150px;

position: relative;

overflow: hidden;

border-radius: 200px;

}//代码效果参考:http://www.ezhiqi.com/zx/art_598.html

.move{

position:absolute;

left:0;

top:0;

}

.foloow{

position:absolute;

top:0;

left:0;

}

相关文章
|
8月前
|
存储 JavaScript 前端开发
订水商城实战教程10-宫格导航
订水商城实战教程10-宫格导航
|
3月前
|
UED
Midjourney-02 收集Prompt 咕卡手账 零件套装展示 可爱猫猫 线稿生成 2077猫猫 niji 5 niji 6 对比 详细记录 超多图片 多种风格 附带文本 关键词
Midjourney-02 收集Prompt 咕卡手账 零件套装展示 可爱猫猫 线稿生成 2077猫猫 niji 5 niji 6 对比 详细记录 超多图片 多种风格 附带文本 关键词
33 0
|
7月前
|
JavaScript 数据安全/隐私保护 开发者
开源图片编辑器推荐-可用于海报编辑、商品设计、封面设计、标签设计等场景
推荐开源图片编辑器,基于fabric.js和Vue开发,适合海报、Logo等设计场景。拥有4.4K GitHub Stars,特性包括自定义字体、素材、模板,支持插件扩展、右键菜单及快捷键。提供图片滤镜、裁剪、拖拽、PSD导入、水印设置和分类素材管理。适用于非专业设计者,易于二次开发。
开源图片编辑器推荐-可用于海报编辑、商品设计、封面设计、标签设计等场景
|
存储 Java API
一个精美的主界面窗口功能的设计和实现原来如此简单,万字肝爆
一个精美的主界面窗口功能的设计和实现原来如此简单,万字肝爆
128 0
Axure教程:外卖订单平台——用中继器做商品列表购物车
Axure教程:外卖订单平台——用中继器做商品列表购物车
NewPagedFlowView电影票卡片式无限自动轮播图方法改进
新增网络图片数据源和本地图片数据源属性 直接传入url链接数组或uiimage对象数组
248 0
NewPagedFlowView电影票卡片式无限自动轮播图方法改进
京东流式布局底边栏案例
京东流式布局底边栏案例
110 0
京东流式布局底边栏案例
盒子综合案例——德云社十八愁与宠物知识栏
盒子综合案例——德云社十八愁与宠物知识栏
147 0
盒子综合案例——德云社十八愁与宠物知识栏
|
人工智能 数据可视化 Windows
R可视乎|用R给心仪的对象表白吧
早上听完讲座才想起来,今天520了。那这样吧,小编给做了个小小的惊喜给读者们,年轻的盆友可以用这“小玩意”给自己心仪的对象表白了。
377 0
R可视乎|用R给心仪的对象表白吧