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

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

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

运用技术: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;

}

相关文章
|
5月前
自适应可爱卡通小人404页面模板
自适应可爱卡通小人404页面模板
61 12
自适应可爱卡通小人404页面模板
|
4月前
|
JavaScript 数据安全/隐私保护 开发者
开源图片编辑器推荐-可用于海报编辑、商品设计、封面设计、标签设计等场景
推荐开源图片编辑器,基于fabric.js和Vue开发,适合海报、Logo等设计场景。拥有4.4K GitHub Stars,特性包括自定义字体、素材、模板,支持插件扩展、右键菜单及快捷键。提供图片滤镜、裁剪、拖拽、PSD导入、水印设置和分类素材管理。适用于非专业设计者,易于二次开发。
开源图片编辑器推荐-可用于海报编辑、商品设计、封面设计、标签设计等场景
|
10月前
|
前端开发
HTML+CSS制作人物介绍卡片效果
HTML+CSS制作人物介绍卡片效果
平面设计实验三 手机海报与选区操作
平面设计实验三 手机海报与选区操作
71 0
NewPagedFlowView电影票卡片式无限自动轮播图方法改进
新增网络图片数据源和本地图片数据源属性 直接传入url链接数组或uiimage对象数组
229 0
NewPagedFlowView电影票卡片式无限自动轮播图方法改进
|
前端开发
整活系列(二)——整一个好看的毛玻璃登陆页面
昨天刷某站下饭的时候,看见了一个好看的登陆页面,于是昨天晚上用代码实现了一下,今天就拿出来分享给大家。
|
存储 小程序 前端开发
朋友圈文案话术文件素材库小程序开发
朋友圈文案话术文件素材库小程序开发
朋友圈文案话术文件素材库小程序开发
|
人工智能 算法 数据可视化
淘宝首页那些“辣眼睛”的图去哪了?
小叽导读:在淘宝这个平台上,消费者每天都在浏览着琳琅满目的图片,图片是消费者与商品交互的第一媒介。图片的质量会极大影响消费者的消费体验和转化效果,高质量的图片会让消费者怦然心动,流连忘返,而低质量的“辣眼睛”图片会让消费者望而却步。在淘宝首页猜你喜欢(以下简称首猜)场景下,由于图片数量太多,让人工来审核所有图片是不现实的。作为阿里技术人,我们的使命就是使用技术手段过滤掉低质量的图片,将高质量的图片和素材呈现给消费者。
3047 0
淘宝首页那些“辣眼睛”的图去哪了?