用html制作焦点图效果分析,原生js编写焦点图效果

}

.productInfo .focusPicture .mPhoto img{

width: 100%;

height: 100%;

}

.productInfo .focusPicture .oPhoto{

width: 128px;

height: 352px;

position: absolute;

right: 14px;

top: 4px;

overflow: hidden;

}

.productInfo .oPhoto div{

width: 128px;

position: absolute;

left:0;

top:0;

-webkit-transition: top .2s ease-out;

-moz-transition: top .2s ease-out;

transition: top .2s ease-out;

}

.productInfo .oPhoto section{

height: 78px;

margin: 8px 0;

position: relative;

cursor: pointer;

}

.productInfo .oPhoto section::before {

content: "";

display: block;

width: 100%;

height: 100%;

background-color: rgba(255,255,.42);

position: absolute;

left: 0;

top: 0;

}

.productInfo .oPhoto section.on::before{

display: none;

}

.productInfo .focusPicture .oPhoto img{

width: 100%;

height: 100%;

}

.productInfo .focusPicture .prevNext{

width: 32px;

height: 32px;

position: absolute;

top: -4px;

right: 62px;

}

.productInfo .prevNext div.prev,.productInfo .prevNext div.next{

width: 32px;

height: 32px;

-webkit-border-radius: 50%;

-moz-border-radius: 50%;

border-radius: 50%;

background-color: #fff;

position: absolute;

left: 0;

-webkit-transition: all .25s;

-moz-transition: all .25s;

transition: all .25s;

display: none;

cursor: pointer;

}

.productInfo .prevNext div.prev{

top: 0;

Box-shadow: 0 -2px 4px rgba(0,.24);

}

.productInfo .prevNext div.next{

top: 336px;

Box-shadow: 0 2px 4px rgba(0,.24);

}

.productInfo .prevNext div.prev:hover{

Box-shadow: 2px -2px 3px rgba(0,.24);

}

.productInfo .prevNext div.next:hover{

Box-shadow: -2px 2px 3px rgba(0,.24);

}

.productInfo .prevNext div.prev i,.productInfo .prevNext div.next i{

width: 16px;

height: 16px;

position: absolute;

top: 0;

right: 0;

bottom: 0;

left: 0;

margin: auto;

cursor: pointer;

}

.productInfo .prevNext div.prev i{

background: url(../images/arrows-icon.png) 0 -16px no-repeat;

background-size: 48px 32px;

bottom: 2px;

}

.productInfo .prevNext div.next i{

background: url(../images/arrows-icon.png) 0 0 no-repeat;

background-size: 48px 32px;

top: 2px;

}

.productInfo .prevNext div.prev:hover i,.productInfo .prevNext div.next:hover i{

-webkit-transform: scale(1.1);

-moz-transform: scale(1.1);

transform: scale(1.1);

}

.productInfo .prevNext div.prev:hover i{

background: url(../images/arrows-icon.png) -16px -16px no-repeat;

background-size: 48px 32px;

}

.productInfo .prevNext div.next:hover i{

background: url(../images/arrows-icon.png) -16px 0px no-repeat;

background-size: 48px 32px;

}

.productInfo .prevNext div.prev:active i{

background: url(../images/arrows-icon.png) -32px -16px no-repeat;

background-size: 48px 32px;

}

.productInfo .prevNext div.next:active i{

background: url(../images/arrows-icon.png) -32px 0px no-repeat;

background-size: 48px 32px;

}