??云主机低折扣年付还赠送90天?? 广告位招租 - 15元/月全站展示
??伍彩集团官网直营彩票 ??言情小说??
??私有威屁恩(独享/安全/稳定/高速/低价) ??Google Facebook Youtube 科学上网
广告位招租 - 15元/月全站展示 广告位招租 - 15元/月全站展示
如何实现在展示商品时,放大商品细节

转载   00709   2018-11-14   浏览量:9


思路:
关于布局
1.有一个展示商品的总的盒子,ID名为show。
2在展示商品的大盒子里,首先要有一个放商品图的盒子,ID名为MiddleBox,里面放商品图
3.之后在展示商品的大盒子里,在MiddleBox盒子右面有一块展示区域,ID名为BigBox,用来存放放大商品后的图片
4.要有一个放大镜的div,ID名为zoom,在MiddleBox上移动
关于样式:
1.大盒子show给个定位relative
2.middleBox、BigBox、zoom相对于大盒子定位,即position:absolute;
CSS详情见以下代码:

    body{
                padding: 0;
                margin: 0;
            }
            img{
                display: block;
                border: none;
            }
            #show{
                position: relative;
                width: 250px;
                height: 300px;
                border: 1px solid #ccc;
            }
            #middle{
                position: absolute;
                width:250px;
                height: 300px;
                border:1px solid #ccc;
            }
            #middle img{
                width:250px;
                height: 300px;
            }
            #zoom{
                position: absolute;
                width:100px;
                height: 100px;
                background: #00FFFF;
                cursor: move;
                opacity: 0.5;
                display: none;
            }

            #big{
                position: absolute;
                width: 250px;
                height: 300px;
                border: 1px solid #ccc;
                overflow: hidden;
                left: 250px;
                display: none;
                top: -1px;
            }
            #big img{
                position: absolute;
                width: 625px;
                height: 900px;

            }

关于JS:
1.让放大镜的div(zoom)跟随鼠标在MiddleBox上移动
2.让大图片的位置随着zoom的位置改变而改变。
3.对于放大镜(zoom)的尺寸除以MiddleBox的尺寸应当等于BigBox盒子的尺寸除以BigBox盒子里放的大图片的尺寸
4.BigBox里面的大图片移动的距离应等于放大镜(zoom)的移动的距离除以MiddleBox的尺寸,再乘以 大图片的尺寸
JS详情见以下代码:

            var oMiddle=document.getElementById("middle");
            var oShow=document.getElementById("show");
            var oBig=document.getElementById("big");
            var oZoom=document.getElementById("zoom");
            var oImg=oBig.children[0];

            oMiddle.onmouseover=function(){
                oZoom.style.display="block";
                oBig.style.display="block";

            }
            oMiddle.onmouseout=function(){
                oZoom.style.display="none";
                oBig.style.display="none";
            }

            oMiddle.onmousemove=function(e){
                var evt=e||event;
                var x=evt.clientX-oMiddle.offsetLeft-oShow.offsetLeft;
                var y=evt.clientY-oMiddle.offsetTop-oShow.offsetTop;
                var _left=x-oZoom.offsetWidth/2;
                var _top= y-oZoom.offsetHeight/2;
                var cw=oMiddle.clientWidth;
                var ch=oMiddle.clientHeight;
                var zw=oZoom.offsetWidth;
                var zh=oZoom.offsetHeight;

                if(_left<=0){
                    _left=0;
                }
                if(_top<=0){
                    _top=0;
                }
                if(_left>=cw-zw){
                    _left=cw-zw;
                }
                if(_top>=ch-zh){
                    _top=ch-zh;
                }                               
                oZoom.style.left=_left+"px";
                oZoom.style.top=_top+"px";

                oImg.style.left=-_left/oMiddle.offsetWidth*oImg.offsetWidth+"px";
                oImg.style.top=-_top/oMiddle.offsetHeight*oImg.offsetHeight+"px";

            }

转载自://blog.51cto.com/14072794/2317052


下一篇:

用JS实现的俄罗斯方块
javascript写的俄罗斯方块的小游戏。游戏界面就是一个html的tab表格。方块的表示就是给表格对应的格子加上背景色。
iview-admin 1.3 + django 2.0 二 用户登录
Iview-adminlogo.vue<Alertv-show="isshow"type="error"show-iconclosable>提交错误<spanslot="desc">{{e}}</span></Alert><script>importCookiesfrom'js-cookie';exportdefault{data(){r
iview-admin 1.3 + django 2.0 一 增删改查例子
以下为利用iview-admin+django做的一个最基本的增删改查例子。前端iview-admingitclonehttps://github.com/iview/iview-admin.gitcdiview-admin修改.eslintrc.json17"no-console":["off"],21"no-fallthrough":0,npminstallnpmrundev如果报错修改bui
javascript删除数组/对象中的元素
一、数组:代码:/*@desc:删除数组中的元素@paramarr原数组@paramitem数组索引,只能是数字索引@paramlen要删除的长度@returnarr删除元素后的数组*/functionunset(arr,item,len=1){arr.splice(item,len)returnarr}测试:vararr=newArray(1,2,3,4)varret=unset(arr,1,2
用JS实现的贪吃蛇游戏
运用前端javascript的知识,做了一个简单的贪吃蛇的小游戏。从头到尾一步一步的思路和代码。最后有完整版的代码。不过功能还不够完善,只有个大概的能玩的东西,有兴趣的话还能在优化改进。
laydate点击月份实现自动关闭功能
<pre>laydate.render({elem:'#settleMonth',type:'month',format:'yyyy-MM',showBottom:false,ready:function(date){$("#layui-laydate3").off('click').on('click','.laydate-month-listli',function(){$("#l
数组排序,不满三位数值的按照原来的位数进行比较,超过三位的取后面三位进行比较
第一步:首先要判断数值的长度,先把他转成字符串,在判断位数,截取后面的三位进行比较vararr=[12432,34,535,89002,452,50]for(vari=0;i<arr.length;i++){arr[i]=arr[i].toString()if(arr[i].length>3){arr[i]=arr[i].substr(arr[i].length-3)}}第二步:再把字
Vue+mui实现图片的本地缓存示例代码
这篇文章主要介绍了Vue+mui实现图片的本地缓存的实例代码,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
node.js部署之启动后台运行forever的方法
今天小编就为大家分享一篇node.js部署之启动后台运行forever的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
基于Vue自定义指令实现按钮级权限控制思路详解
这篇文章主要介绍了基于vue自定义指令实现按钮级权限控制,本文给大家介绍的非常详细,感兴趣的朋友跟随脚本之家小编一起学习吧