商品放大镜效果
1.html布局：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="mag.css"/> </head> <body> <div id="boxShow"> <div class="smallpic" id="smallpic"> <img src="img/ph1.jpg" style="opacity: 1;"/> <img src="img/ph2.jpg"/> <img src="img/ph3.jpg"/> <img src="img/ph4.jpg"/> <img src="img/ph5.jpg"/> <img src="img/ph6.jpg"/> <div class="mask" id="mask"></div> </div> <div id="boxul"> <div class="wrap"> <ul id="picUl"> <li class="active"><img src="img/ph1.jpg"/></li> <li><img src="img/ph2.jpg"/></li> <li><img src="img/ph3.jpg"/></li> <li><img src="img/ph4.jpg"/></li> <li><img src="img/ph5.jpg"/></li> <li><img src="img/ph6.jpg"/></li> </ul> </div> <a href="javascript:;" id="left"><</a> <a href="javascript:;" id="right">></a> </div> </div> <div class="bigpic" id="bigpic"> <div id="img1"> <img src="img/big1.jpg"/> <img src="img/big2.jpg"/> <img src="img/big3.jpg"/> <img src="img/big4.jpg"/> <img src="img/big5.jpg"/> <img src="img/big6.jpg"/> </div> </div> <script src="mag.js" type="text/javascript" charset="utf-8"></script> <script src="move.js" type="text/javascript" charset="utf-8"></script> </body> </html>
2.css样式：mag.css
*{
padding:0px;margin:0px;
}
.smallpic{
width: 450px;
height: 450px;
border: 1px solid #ccc;
position: relative;
margin-bottom: 10px;
}
.smallpic img{
width: 450px;
height: 450px;
position: absolute;
left:0px;
top:0px;
opacity: 0;
}
#boxShow{
width: 460px;
height: 512px;
}
#boxul{
width: 450px;
height: 58px;
position: relative;
}
.wrap{
width: 315px;
height: 70px;
margin: 0 auto;
position: relative;
overflow: hidden;
}
#picUl{
width:500px;
height: 58px;
position: absolute;
left: 0;
top: 0;
}
#picUl li{
width: 58px;
height: 58px;
margin: 0 10px;
list-style: none;
float: left;
}
#picUl li.active{
border: 2px solid red;
}
#picUl li img{
width: 54px;
height: 54px;
border: 2px solid #fff;
}
#right,#left{
font-size: 30px;
color: #ccc;
font-family: verdana;
position: absolute;
text-decoration: none;
top:10px;
}
#left{
left:10px;
}
#right{
right:10px;
}
#right:hover,#left:hover{
color: #000;
}
.mask{
position: absolute;
left:0px;top:0px;
width: 50px;
height: 50px;
background: rgba(169,255,0,0.5);
visibility: hidden;
}
.bigpic{
width: 600px;
height: 600px;
border: 1px solid #ccc;
position: absolute;
left:455px;
top:0px;
overflow: hidden;
visibility: hidden;
}
#img1{
width: 800px;
height: 800px;
}
.bigpic img{
width: 100%;
width: 100%;
position: absolute;
left:0px;
top:0px;
}
3.js效果:mag.js
var oSmallPic=document.getElementById('smallpic');//小图
var oMask=document.getElementById('mask');//小方
var oBigPic=document.getElementById('bigpic');//大方
var oImg1=document.getElementById('img1');//大图
var imgLi2=oImg1.getElementsByTagName('img');//包裹大图的框
var oul=document.getElementById('picUl');//小图下面的滚动图片的框
var oli=document.getElementsByTagName('li');//滑动的图片元素
var oBtnleft=document.getElementById('left');//做按钮
var oBtnright=document.getElementById('right');//右边按钮
var imgLi=oSmallPic.getElementsByTagName('img');//有放大镜的图片元素
//小方/大方=小图/大图=scale
oSmallPic.onmouseover=function(){
//让小芳和大芳显示
oMask.style.visibility='visible';
oBigPic.style.visibility='visible';
//求小芳的尺寸
oMask.style.width=oBigPic.offsetWidth*oSmallPic.offsetWidth/oImg1.offsetWidth+'px';
oMask.style.height=oBigPic.offsetHeight*oSmallPic.offsetHeight/oImg1.offsetHeight+'px';
//求比例:倍数
var scale=oBigPic.offsetWidth/oMask.offsetWidth;
this.onmousemove=function(ev){
var ev=ev||window.event;
//让鼠标移动的放置在盒子的中间
var l=ev.clientX-oMask.offsetWidth/2;
var t=ev.clientY-oMask.offsetHeight/2;
if(l<0){
l=0;
}else if(l>=oSmallPic.offsetWidth-oMask.offsetWidth){
l=oSmallPic.offsetWidth-oMask.offsetWidth;
}
if(t<0){
t=0;
}else if(t>=oSmallPic.offsetHeight-oMask.offsetHeight){
t=oSmallPic.offsetHeight-oMask.offsetHeight;
}
//判断小芳不能移出小图的范围。
//赋值给小芳
oMask.style.left=l+'px';
oMask.style.top=t+'px';
//将对应比例赋给大图
oImg1.style.left=-l*scale+'px';
oImg1.style.top=-t*scale+'px';
}
}
oSmallPic.onmouseout=function(){
oMask.style.visibility='hidden';
oBigPic.style.visibility='hidden';
}
// 让oul滚动
oBtnright.onclick=function(){
if(oul.offsetLeft>0){
oul.style.left=-4*oli[0].offsetWidth+20+'px';
}
else(oul.offsetLeft<-4*oli[0].offsetWidth)
{
oul.style.left=0;
}
oul.style.left=-4*oli[0].offsetWidth+'px';
}
oBtnleft.onclick=function(){
oul.style.left=0;
}
//切换
var num=0;
for(var i=0;i<oli.length;i++){
oli[i].x=i;//自定义索引 给每一个小圆圈添加一个索引
oli[i].onmouseover=function(){
num=this.x;//num:当前被点击的按钮索引
tab();
}
}
//将切换的过程封装起来
function tab(){
for(var j=0;j<oli.length;j++){
oli[j].className='';
imgLi[j].style.opacity='0';
imgLi2[j].style.opacity='0';
}
oli[num].className='active';
imgLi[num].style.opacity='1';
imgLi2[num].style.opacity='1';
}
缓冲运动的封装：move.js
function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];//ie8
}else{
return getComputedStyle(obj)[attr];//标准
}
}
function bufferMove(obj,json,fn){
clearInterval(obj.timer);//obj.timer:每个元素都有一个自己的定时器
obj.timer=setInterval(function(){
var bstop=true;//所有的属性都已经到了目标点
for(var attr in json){
//取当前值 current
var current=0;
if(attr=='opacity'){
current=Math.round(getStyle(obj,attr)*100);
}else{
current=parseInt(getStyle(obj,attr));
}
//求速度
var speed=(json[attr]-current)/7;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
if(current!=json[attr]){
bstop=false;
if(attr=='opacity'){
obj.style.opacity=(current+speed)/100;
obj.style.filter='alpha(opacity='+(current+speed)+')';
}else{
obj.style[attr]=current+speed+'px';
}
}
}
if(bstop){
clearInterval(obj.timer);
fn&&fn();
}
},10);
}
每一份努力都不会白费。
