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

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

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

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

}

相关文章
|
7月前
|
存储 JavaScript 前端开发
订水商城实战教程10-宫格导航
订水商城实战教程10-宫格导航
|
4月前
404错误页面简约清新源码 非常好看
404错误页面简约清新源码 非常好看,源码由HTML+CSS+JS组成,记事本打开源码文件可以进行内容文字之类的修改,双击html文件可以本地运行效果,也可以上传到服务器里面,重定向这个界面
23 0
404错误页面简约清新源码 非常好看
|
6月前
|
JavaScript 数据安全/隐私保护 开发者
开源图片编辑器推荐-可用于海报编辑、商品设计、封面设计、标签设计等场景
推荐开源图片编辑器,基于fabric.js和Vue开发,适合海报、Logo等设计场景。拥有4.4K GitHub Stars,特性包括自定义字体、素材、模板,支持插件扩展、右键菜单及快捷键。提供图片滤镜、裁剪、拖拽、PSD导入、水印设置和分类素材管理。适用于非专业设计者,易于二次开发。
开源图片编辑器推荐-可用于海报编辑、商品设计、封面设计、标签设计等场景
|
6月前
|
图形学
【制作100个unity游戏之25】3D背包、库存、制作、快捷栏、存储系统、砍伐树木获取资源、随机战利品宝箱11(附带项目源码)
【制作100个unity游戏之25】3D背包、库存、制作、快捷栏、存储系统、砍伐树木获取资源、随机战利品宝箱11(附带项目源码)
32 0
|
6月前
|
图形学
【制作100个unity游戏之25】3D背包、库存、制作、快捷栏、存储系统、砍伐树木获取资源、随机战利品宝箱2(附带项目源码)
【制作100个unity游戏之25】3D背包、库存、制作、快捷栏、存储系统、砍伐树木获取资源、随机战利品宝箱2(附带项目源码)
41 0
|
6月前
|
图形学
【制作100个unity游戏之25】3D背包、库存、制作、快捷栏、存储系统、砍伐树木获取资源、随机战利品宝箱3(附带项目源码)
【制作100个unity游戏之25】3D背包、库存、制作、快捷栏、存储系统、砍伐树木获取资源、随机战利品宝箱3(附带项目源码)
29 0
平面设计实验三 手机海报与选区操作
平面设计实验三 手机海报与选区操作
84 0
|
人工智能 API
想要宫崎骏风格壁纸?安排!
这是我用 APISpace 的 AI作画(图像生成)服务 生成的宫崎骏风格的壁纸!使用的描述语是:宫崎骏,夕阳,晚霞,治愈系,唯美, pixiv ,二次元,壁纸。
335 0
想要宫崎骏风格壁纸?安排!
|
前端开发
整活系列(二)——整一个好看的毛玻璃登陆页面
昨天刷某站下饭的时候,看见了一个好看的登陆页面,于是昨天晚上用代码实现了一下,今天就拿出来分享给大家。
|
前端开发 开发者
首页-商品盒子 |学习笔记
快速学习 首页-商品盒子