阅读下列说明,用 javascript 编写程序。填写( 1 )至( 10 )代码。 【说明】 在某项目中,在首页需要实现左右轮播的效果图,要求用 javascript 完成,根据已经提供的代码,补全( 1 ) - ( 10 )位置上的代码。 【效果图】 【 index.html 】 布局结构如下代码,并将样式引入。 放大镜 【 style.css 】 body{ margin: 0; padding: 0; } img{ display: block; } .header{ height:100px; } .center{ width:800px; margin:0 auto; } .box{ position:relative; width:400px; } .box .thumb{ position:relative; width:400px; height:400px; } .box .thumb img{ width:100%; height:100%; } .box .thumb .move{ position:absolute; top:0px; left:0px; display:none; width:200px; height:200px; background-color: rgba(0,0,0,0.4); } .box .scale{ display:none; position:absolute; right:-420px; top:0; width:400px; height:400px; border:1px solid #ccc; overflow:hidden; } .box .scale img{ position:absolute; left:0; top:0; } .box .thumb:hover .move{ display:block; } .box .thumb:hover+.scale{ display:block; } 【 index.js 】 var zmFdj=function(){ var thumbElem=document.getElementsByClassName("thumb")[0], // 获取缩略图距离页面左边的距离 thumbPosX=Math.round(thumbElem.getBoundingClientRect().left+document.documentElement.scrollLeft), // 获取缩略图距离页面顶部的距离 thumbPosY=Math.round(thumbElem.getBoundingClientRect().top+document.documentElement.scrollTop); // 获取移动的元素 var moveElem=document.getElementsByClassName("move")[0]; thumbElem.onmousemove=function(e){ // 获取移动的元素的宽和高 var moveElemW= 1 ; var moveElemH= 2 ; // 计算移动元素距离缩略图左边和顶部的距离 var x= 3 ; var y= 4 ; // 设置鼠标指针在移动元素的中间位置 moveElem.style.left= 5 ; moveElem.style.top= 6 ; // 移动元素不能超出区域 if( 7 ){ moveElem.style.left=0; }else if(parseInt(moveElem.style.left)>(thumbElem.offsetWidth-moveElemW)){ moveElem.style.left=thumbElem.offsetWidth-moveElemW+"px"; } if( 8 ){ moveElem.style.top=0; }else if(parseInt(moveElem.style.top)>(thumbElem.offsetHeight-moveElemH)){ moveElem.style.top=thumbElem.offsetHeight-moveElemH+"px"; } // 放大的倍数 var sca=thumbElem.offsetWidth/moveElemW; var scaleEle=document.getElementsByClassName("scale")[0]; // 放大图片的位置 var img=scaleEle.getElementsByTagName("img")[0]; img.style.left= 9 ; img.style.top= 10 ; } } zmFdj();