微信小程序省钱技巧_JS完成电商商品展示扩大镜特效

  • 栏目:行业动态 时间:2021-01-06 15:54 分享新闻到:
<返回列表

JS实现电商商品展示放大镜特效       这篇文章主要为大家详细介绍了JS实现电商商品展示放大镜特效,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了JS实现电商商品展示放大镜的具体代码,供大家参考,具体内容如下

知识点

1.使用children获取字标签组
2.求当前鼠标坐标
3.碰撞检测
4.大小盒子通过比例同步

运行效果

代码

 !DOCTYPE html 
 html lang="en" 
 head 
 meta charset="UTF-8" 
 title Title /title 
 style 
 margin: 0;
 padding: 0;
 list-style: none;
 border: none;
 #box {
 width: 350px;
 height: 350px;
 margin: 100px 0 0 100px;
 position: relative;
 #box #small_box {
 height: 100%;
 width: 100%;
 border: 1px solid #;
 box-sizing: border-box;
 position: relative;
 #box #small_box img {
 height: 100%;
 width: 100%;
 #box #small_box #mask {
 width: 100px;
 height: 100px;
 background-color: rgba(255, 255, 0, .4);
 position: absolute;
 left: 0;
 top: 0;
 cursor: move;
 /*隐藏*/
 display: none;
 #box #big_box {
 height: 600px;
 width: 600px;
 border: 1px solid #;
 position: absolute;
 left: 360px;
 top: 0;
 overflow: hidden;
 display: none;
 #box #big_box img{
 position: absolute;
 left: 0;
 top: 0;
 #list {
 margin: 20px 0 0 100px;
 #list ul li {
 float: left;
 margin: 5px;
 cursor: pointer;
 /style 
 /head 
 body 
 div id="box" 
 div id="small_box" 
 img src="images/pic001.jpg" alt="" 
 span id="mask" /span 
 /div 
 div id="big_box" 
 img src="images/pic01.jpg" alt="" 
 /div 
 /div 
 div id="list" 
 li img src="images/pic0001.jpg" alt="" /li 
 li img src="images/pic0002.jpg" alt="" /li 
 li img src="images/pic0003.jpg" alt="" /li 
 li img src="images/pic0004.jpg" alt="" /li 
 /ul 
 /div 
 script src="../../MyTools/MyTools.js" /script 
 script 
 window.addEventListener('load', function (ev) {
 // 1. 获取标签
 var box = myTools.$('box'), s_box = box.children[0], b_box = box.children[1], mask = s_box.children[1];
 var list_Lis = myTools.$('list').getElementsByTagName('li');
 b_img = b_box.children[0];
 // 2. 监听鼠标进入小盒子
 s_box.addEventListener('mouseover', function (evt) {
 // 2.1 显示隐藏内容
 mask.style.display = 'block';
 b_box.style.display = 'block';
 // 2.2 监听鼠标移动
 s_box.addEventListener('mousemove', function (evt1) {
 var e = evt1 || window.event;
 // 2.3 求出鼠标坐标
 var pointX = e.pageX - box.offsetLeft - mask.offsetWidth * 0.5;
 var pointY = e.pageY - box.offsetTop - mask.offsetHeight * 0.5;
 // 2.4 边界碰撞检测
 if (pointX 0) {
 pointX = 0
 } else if (pointX = s_box.offsetWidth - mask.offsetWidth - 2) {
 pointX = s_box.offsetWidth - mask.offsetWidth - 2;
 if (pointY 0) {
 pointY = 0
 } else if (pointY = s_box.offsetHeight - mask.offsetHeight - 2) {
 pointY = s_box.offsetHeight - mask.offsetHeight - 2;
 // 2.5 让放大镜走起来
 mask.style.left = pointX + 'px';
 mask.style.top = pointY + 'px';
 // 2.6 让大盒子中图片走起来
 * smallX / bigX = sBox.width / bBox.width
 * bixX = smallX/(sBox.width / bBox.width)
 * */
 b_img.style.left = -pointX / (s_box.offsetWidth/b_box.offsetWidth) + 'px';
 b_img.style.top = -pointY / (s_box.offsetHeight/b_box.offsetHeight) + 'px';
 // 3. 监听鼠标离开小盒子
 s_box.addEventListener('mouseout', function (evt) {
 // 2.1 隐藏内容
 mask.style.display = 'none';
 b_box.style.display = 'none';
 // 4. 监听鼠标点击li标签
 for (var i = 0; i list_Lis.length; i++) {
 (function (i) {
 var li = list_Lis[i];
 li.addEventListener('mouseover',function (ev1) {
 s_box.children[0].src = 'images/pic0'+(i+1)+'.jpg';
 b_img.src = 'images/pic0'+(i+1)+'.jpg';
 })(i);
 /script 
 /body 
 /html 

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


分享新闻到:

更多阅读

微信小程序省钱技巧_JS完成电商商品展示

行业动态 2021-01-06
JS完成电子商务产品展现变大镜动画特效 本文关键为大伙儿详尽详细介绍了JS完成电子商...
查看全文

网站图片的优化-怎样建立网站规划

行业动态 2021-01-06
一个网站的取得成功是否与建网站前的网站的建设拥有极其关键的关联。新建立网站前应确立...
查看全文

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

行业动态 2021-01-06
招聘人数:18职位信息负责商品运营梳理工作1、定期对商品销售及库存结构合理性进行数据分...
查看全文
返回全部新闻


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

友情链接: 微信小程序开发框 凡科小程序 免费打卡小程序怎 微信小程序 游戏

Copyright © 2002-2020 小程序下载安装_小程序模板源码_小程序前端设计_有赞小程序_线上签到小程序 版权所有 (网站地图) 备案号:粤ICP备10235580号