2018-12-01

放大鏡通過(guò)圖片比例的方式可以做到，可以用<canvas>畫(huà)布來(lái)繪出放大的圖形，用它的drawImage（）方法特定點(diǎn)開(kāi)始繪制放大的圖形，同時(shí)也可用背景圖片的方法，不同在于要改變背景圖片的位置。

放大鏡方框的移動(dòng)在原圖形上，并且會(huì)隨鼠標(biāo)的移動(dòng)而移動(dòng)，鼠標(biāo)始終處于放大鏡的中心，用到clientX（）clientY()與offsetWidth（）offsetHeight（）offsetLeft () offsetTop()來(lái)讓鼠標(biāo)處于放大鏡的中心。




<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>放大鏡</title>

<link rel="stylesheet" type="text/css" href="../css/magnify.css">

</head>

<body>

? <div id="demo">

<div id="vessal">

<div id="display">

? ? </div>

? ? </div>

<div id="magnify">

</div>

? </div>

? <div id="scroll" style="display: block;">

? <ul style="left: -430px;">

? </ul>

? </div>

? <div id="leftbutton"><</div>

? <div id="rightbutton">></div>

? <div id="ratio">

? <button id="onemultiple">兩倍</button>

? <button id="twomultiple">四倍</button>

? </div>

</body>

</html>

<script type="text/javascript" src="../js/magnify.js"></script>

#demo{

width: 2000px;

height: 400px;

}

#vessal{

float: left;

position: relative;

top: 10%;

left: 20%;

width: 400px;

height: 400px;

border: 3px solid #D3D9EB;

background-repeat: no-repeat;

? ? background-size: 400px;

}

#vessal :hover{

cursor:move;

}

#magnify{

display: none;

width: 400px;

height: 400px;

float: left;

position: relative;

top: 10%;

left: 23%;

border: 3px solid#EFC4C4;

background-repeat: no-repeat;

}

#display{

display: none;

position: relative;

width: 200px;

height: 200px;

/*border: 1px solid red;*/

background-color: rgba(176,164,123,0.3);

}

#scroll{

? ? position: fixed;

top:453px;

left:392px;

width: 430px;

height: 65px;

/*border: 1px solid red;*/

overflow: hidden;

}

#scroll ul{

position: absolute;

display: inline;

float: left;

margin:0px 0px;

width: 1290px;

height: 60px;

padding: 0px 0px;

}

#scroll ul li {

float: left;

display: inline;

width: 80px;

height: 60px;

list-style: none;

border: 3px solid #EBDEDE;

border-radius: 3px;

background-size: 80px 60px;

background-repeat: no-repeat;

}

#scroll ul:hover{

cursor:pointer ;

}

#rightbutton,#leftbutton{

width: 40px;

? ? height: 60px;

? ? float: left;

? ? text-align: center;

? ? line-height: 60px;

? ? border-radius: 3px;

? ? background-color: rgba(129,182,243,0.8);

}

#rightbutton:hover{

cursor:pointer ;

}

#leftbutton:hover{

cursor:pointer ;

}

#leftbutton{

position: fixed;

left: 350px;

top: 452px;

}

#rightbutton{

position: fixed;

left:820px;

top: 452px;

}

#ratio{

? position: fixed;

? float: top;

? top: 50px;

? left: 812px;

}

#ratio button{

margin:10px;

display: block;

? ? background-color: rgba(105,125,125,0.5);

? ? border: 1px solid;

? ? border-radius: 3px;

}

window.onload=function () {

var display=document.getElementById('display');

var vessal=document.getElementById('vessal');

var magnify=document.getElementById('magnify');

? ? var demo=document.getElementById('demo');

? ? var multi=800;

? ? var scroll=document.getElementById('scroll');

? ? var photoAray=document.getElementsByTagName('li')

? ? var object_ul=document.getElementsByTagName('ul')[0];

? ? var leftmove=document.getElementById('leftbutton');

? ? var rightmove=document.getElementById('rightbutton');

? ? var photoDistance=86;

? ? var moveDistance=86;

? ? var index=6;

? ? var bool=false;

? ? var animate=false;

? ? var twom=document.getElementById('twomultiple');

? ? var onem=document.getElementById('onemultiple');

? ? vessal.style.backgroundSize=vessal.offsetWidth+"px"+" "+vessal.offsetHeight+"px";

? ? vessal.onmouseover=function(){

? ? display.style.display="block";

? ? magnify.style.display="block";

? ? }

? ? vessal.onmouseout=function(){

? ? display.style.display="none";

? ? magnify.style.display="none";

? ? }

? ? vessal.onmousemove=function(event){

? ? ? ? var vess=event||window.event;

? ? ? ? var left=vess.clientX-vessal.offsetLeft-display.offsetWidth/2;

? ? ? ? var top=vess.clientY-vessal.offsetTop-display.offsetWidth/2;

? ? ? ? if (left<0) {

? ? ? ? left=0;

? ? ? ? }

? ? ? ? else if (left>(vessal.offsetWidth-display.offsetWidth)) {

? ? ? ? left=vessal.offsetWidth-display.offsetWidth;

? ? ? ? }

? ? ? ? if (top<0) {

? ? ? ? top=0;

? ? ? ? }

? ? ? ? else if (top>(vessal.offsetHeight-display.offsetHeight)) {

? ? ? ? top=vessal.offsetHeight-display.offsetHeight;

? ? ? ? }

? ? ? ? display.style.left=left+"px";

? ? ? ? display.style.top=top+"px";

? ? ? ? var posx=(left)/vessal.offsetWidth*(-multi);

? ? ? ? var posy=(top)/vessal.offsetHeight*(-multi);

? ? ? ? magnify.style.backgroundPosition=posx+"px"+" "+posy+"px";

? ? }

? ? function resetHtml(){


? ? var list="";

? ? for (var i = 0; i<15 ; i++) {

? ? list="<li>"+"</li>"+list;

? ? }

? ? object_ul.innerHTML=list;

? ? for (var i = 0; i < photoAray.length; i++) {

? ? var num=i+1;

? ? photoAray[i].style.background="url(../img/"+num+".jpg)";

? ? photoAray[i].setAttribute("index",num);

? ? photoAray[i].style.backgroundSize=80+"px"+" "+60+"px";

? ? }

? ? magnify.style.backgroundSize=multi+"px"+" "+multi+"px";

? ? onem.style.backgroundColor="#B42828";

? ? }


? ? function smooth(distance){

? ? var movetime=200;

? ? ? ? var time=2;

? ? var offset=distance/(movetime/time);? //每次移動(dòng)距離;

? ? var offseted=parseFloat(object_ul.style.left)+distance;

? ? function goon () {

? ? ? ? if((parseFloat(object_ul.style.left)>offseted&&(distance<0))||(parseFloat(object_ul.style.left)<offseted&&(distance>0))) {

? ? animate=true;

? ? object_ul.style.left=parseFloat(object_ul.style.left)+ offset + "px";

? ? setTimeout(goon,time);

? ? }

? ? else

? ? {?

? ? animate=false;

if (parseFloat(object_ul.style.left)<-774) {

? ? object_ul.style.left=-430+"px";

? ? }

? ? else if (parseFloat(object_ul.style.left)>-86) {

object_ul.style.left=-430+"px";

}

}

}

goon();


? ? }

? ? rightmove.onclick=function(){? ?

? ? ? ? if (!animate) {

? ? ? ? index++;

? ? ? ? if (index>15) {

? ? ? ? index=1;

? ? ? ? }

? ? ? ? smooth(-86);}



? ? }

? ? leftmove.onclick=function(){

? ? ? if (!animate) {

? ? ? ? index--;

? ? ? ? if (index<1) {

? ? ? ? index=15;

? ? ? ? }

? ? ? ? smooth(86);

? ? }? ? ?

? ? }

? ? function rotation(){


? ? ? ? for (var i = 0; i < photoAray.length; i++) {

? ? ? ? photoAray[i].onmouseover=function(){

? ? ? ? ? ? ? ? index=parseInt(this.getAttribute("index"));

? ? ? ? ? ? ? ? vessal.style.backgroundImage="url(../img/"+index+".jpg)";

? ? ? ? ? ? ? ? magnify.style.backgroundImage="url(../img/"+index+".jpg)";

? ? ? ? ? ? ? ? for (var i = 0; i < photoAray.length; i++) {

? ? ? ? ? ? photoAray[i].style.border="3px solid #EBDEDE";

? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? this.style.border="3px solid #8915F2";

? ? ? ? }

? ? ? ? }

? ? ? ? vessal.style.backgroundImage="url(../img/"+index+".jpg)";

? ? ? ? magnify.style.backgroundImage="url(../img/"+index+".jpg)";

? ? }

? ? twom.onclick=function(){

? ? ? ? ? multi=1600;

? ? ? ? ? twom.style.backgroundColor="#B42828";

? ? ? ? ? onem.style.backgroundColor="#ECB4B4";

? ? ? ? ? magnify.style.backgroundSize=multi+"px"+" "+multi+"px";

? ? ? ? ? magnify.style.width=multi/2+"px";

? ? ? ? ? magnify.style.height=multi/2+"px";

? ? ? ? ? magnify.style.top=0+"%";

? ? }

? ? onem.onclick=function(){

? ? ? ? ? multi=800;

? ? ? ? ? onem.style.backgroundColor="#B42828";

? ? ? ? ? twom.style.backgroundColor="#ECB4B4";

? ? ? ? ? magnify.style.backgroundSize=multi+"px"+" "+multi+"px";

? ? ? ? ? magnify.style.width=multi/2+"px";

? ? ? ? ? magnify.style.height=multi/2+"px";

? ? ? ? ? magnify.style.top=10+"%";

? ? }


? ? resetHtml();

? ? rotation();

}




?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容