微信小程序开发框架_基于javascript完成扩大镜特效

  • 栏目:公司新闻 时间:2021-01-04 17:43 分享新闻到:
<返回列表

基于javascript实现放大镜特效     投稿:lijiao   这篇文章主要为大家详细介绍了基于javascript实现放大镜特效,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了javascript实现放大镜特效的具体代码,供大家参考,具体内容如下

我们在逛pc端商城时,鼠标放到商品上经常会看到一个类似放大镜效果的蒙层,

 !DOCTYPE html 
 html 
 head 
 meta charset="UTF-8" 
 title /title 
 style type="text/css" 
 margin: 0px;
 padding: 0px;
 #min {
 width: 350px;
 height: 350px;
 border: 1px solid #ccc;
 position: absolute;
 left: 50px;
 top: 50px;
 #min img {
 width: 350px;
 height: 350px;
 #max {
 width: 500px;
 height: 500px;
 position: absolute;
 left: 500px;
 top: 50px;
 border: 1px solid #ccc;
 overflow: hidden;
 display: none;
 #max img {
 position: absolute;
 left: 0;
 top: 0;
 #mask {
 width: 200px;
 height: 200px;
 background: rgba(255, 0, 0, 0.5);
 position: absolute;
 left: 0px;
 top: 0px;
 cursor: pointer;
 display: none;
 /style 
 /head 
 body 
 div id="min" 
 img src="img/min.jpg" alt="" / 
 div id="mask" /div 
 /div 
 div id="max" 
 img src="img/max.jpg" id="maxImg" / 
 /div 
 script type="text/javascript" 
 // 1.鼠标经过小盒子,遮罩层出现,大盒子出现
 // 2.遮罩层跟随鼠标移动
 // 3.遮罩层移动,大盒子里的图片反方向移动
 var oMin = document.getElementById('min');
 var oMax = document.getElementById('max');
 var oMask = document.getElementById('mask');
 var oMaxImg = document.getElementById('maxImg');
 oMin.onmousemove = function(e) {
 // 1.鼠标经过小盒子,遮罩层和大盒子出现
 oMask.style.display = 'block';
 oMax.style.display = 'block';
 // 2.拿到鼠标在小盒子上的坐标
 var minX = e.clientX - oMin.offsetLeft;
 var minY = e.clientY - oMin.offsetTop;
 // 3.将鼠标放置在遮罩层的中间
 minX = minX - oMask.offsetWidth / 2;
 minY = minY - oMask.offsetHeight / 2;
 // 4.遮罩层可以移动的最大距离
 var maxWidth = oMin.offsetWidth - oMask.offsetWidth;
 var maxHeight = oMin.offsetHeight - oMask.offsetHeight;
 // 限定遮罩层的位置
 if (minX maxWidth) {
 minX = maxWidth;
 } else if (minX = 0) {
 minX = 0;
 if (minY maxHeight) {
 minY = maxHeight;
 } else if (minY = 0) {
 minY = 0;
 // 设定遮罩层的偏移
 oMask.style.left = minX + 'px';
 oMask.style.top = minY + 'px';
 // 大图片移动的距离=遮罩层移动的距离/遮罩层可以移动的最大距离*大图片最大移动距离
 var ratioX = minX / maxWidth;
 var ratioY = minY / maxHeight;
 // 计算出大图片的移动距离
 oMaxImg.style.left = -ratioX * (oMaxImg.offsetWidth - oMax.offsetWidth) + 'px';
 oMaxImg.style.top = -ratioY * (oMaxImg.offsetHeight - oMax.offsetHeight) + 'px';
 // 鼠标移开,遮罩层和大盒子消失
 oMin.onmouseout = function() {
 oMask.style.display = 'none';
 oMax.style.display = 'none';
 /script 
 /body 
 /html 

效果图:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。


分享新闻到:

更多阅读

微信小程序开发框架_基于javascript完成扩

公司新闻 2021-01-04
根据javascript完成变大镜动画特效 文章投稿:lijiao 本文关键为大伙儿详尽详细介绍了根据...
查看全文

广州凡科互联网科技股份有限公司招聘京

公司新闻 2021-01-04
招聘人数:16职位信息主要职责1、根据公司战略,设计京东整体运营方案,包括网站平台搭建...
查看全文

广州凡科互联网科技股份有限公司招聘(

公司新闻 2021-01-04
招聘人数:10职位信息工作内容:公司***。通过公司提供的电话、网络联系客户,与客户沟通交...
查看全文
返回全部新闻


区域站点: 南丰县建站培训   南宫市建站程序   囊谦县凡科建站   南和县企业建站   南华县建站培训   南江县建站程序   南京市凡科建站   南靖县企业建站   南康市建站培训   南乐县建站程序   南陵县凡科建站   南宁市企业建站   南平市建站培训   南皮县建站程序   南市区凡科建站   南通市企业建站   南投县建站培训   南雄市建站程序   南溪县凡科建站   南阳市企业建站   南漳县建站培训   南召县建站程序   南郑县凡科建站   那坡县企业建站   那曲县建站培训   纳雍县建站程序   讷河市凡科建站   内黄县企业建站   内江市建站培训   内丘县建站程序   内乡县凡科建站   嫩江市企业建站   聂荣县建站培训   尼玛县建站程序   尼木县凡科建站   宁安市企业建站   宁波市建站培训   宁城县建站程序   宁德市凡科建站   宁都县企业建站   宁国市建站培训   宁海县建站程序   宁化县凡科建站   宁晋县企业建站   宁陵县建站培训   宁明县建站程序   宁南县凡科建站   宁强县企业建站   宁陕县建站培训   宁武县建站程序   宁乡市凡科建站   宁阳县企业建站   宁远县建站培训   农安县建站程序   磐安县凡科建站   盘锦市企业建站   盘山县建站培训   磐石市建站程序   盘州市凡科建站   蓬安县企业建站   澎湖县建站培训   蓬莱市建站程序   彭山县凡科建站   蓬溪县企业建站   彭阳县建站培训   彭泽县建站程序   彭州市凡科建站   偏关县企业建站   平安县建站培训   平昌县建站程序   平定县凡科建站   屏东县企业建站   平度市建站培训   平果县建站程序   平和县凡科建站   平湖市企业建站   平江县建站培训   平乐县建站程序   平凉市凡科建站   平利县企业建站   平罗县建站培训   平陆县建站程序   屏南县凡科建站   平泉市企业建站   屏山县建站培训   平顺县建站程序   平塘县凡科建站   平潭县企业建站   平武县建站培训   萍乡市建站程序   平乡县凡科建站   平阳县企业建站   平遥县建站培训   平阴县建站程序   平邑县凡科建站   平远县企业建站   平舆县建站培训   皮山县建站程序   普安县凡科建站   浦北县企业建站   浦城县建站培训   普洱市建站程序   普格县凡科建站   浦江县企业建站   普兰县建站培训   普宁市建站程序   莆田市凡科建站   迁安市企业建站   乾安县建站培训   潜江市建站程序   潜山市凡科建站  

友情链接: 医慧互通 创建网站教程 巴渝烤哥 美国免费建站平台 免费网页建站 免费自助建站

Copyright © 2002-2020 凡科建站_企业建站_建站培训_建站程序_自建网站 版权所有 (网站地图) 备案号:粤ICP备10235580号