Home > Developer > JavaScript
Case: 360-degree panorama photos when the mouse slides on the page, the object will rotate in the direction of the movement, thus rendering a 360-degree object rotation effect.
Idea: Put all the pictures in the designated container, by toggling the corresponding photo hiding and display to achieve the rotation effect
Code:
<!DOCTYPE HTML><HTMLLang= "ZH-CN"> <Head> <MetaCharSet= "UTF-8"> <MetaID= "Viewport"name= "Viewport"content= "Width=device-width,initial-scale=1.0,user-scalable=no"> <title>Document</title> <Scripttype= "Text/javascript"src= "360.js"></Script> </Head> <Body> <Divclass= "Container"ID= "page750"> <imgsrc= "Img/1.png"> </Div> </Body></HTML>
Html,body { margin: 0; padding: 0;} . Container { display: flex;} img { display: block; margin: auto;}Window.onload =function(){ varcontainer = document.getElementById ("page750"); /*Add all the picture tags at once*/ varImgcount = 40; varLASTSTARTX = 0; varIspeed = 0; vartimer; var_disx; for(vari = 2; I <= Imgcount; i++){ (function(i) {varIMG =NewImage (); varImgnode = document.createelement ("img"); Img.onload=function() {imgnode.src= This. Src; ImgNode.style.display= "None"; Container.appendchild (Imgnode); }; IMG.SRC= "img/" +i+ ". png";} ) (i); } varImgnodes = Container.getelementsbytagname ("img"); varLastimgnode = Container.getelementsbytagname ("img") [0]; varStartX = 0; functionMousedownhandler (Event) {Console.log ("Mouse Down"); Clearinterval (timer); StartX=Event.clientx; Document.addeventlistener ("MouseMove", Mousemovehandler); Document.addeventlistener ("MouseUp", Mouseuphandler); return false; } functionMousemovehandler (Event) {Console.log ("Mouse Move"); DISX= Event.clientx-StartX; Move (); Ispeed= _disx-Laststartx; Laststartx=_disx; Document.title=_disx; return false; } functionMouseuphandler (Event) {Console.log ("Mouse Up"); Document.removeeventlistener ("MouseMove", Mousemovehandler); Document.removeeventlistener ("MouseUp", Mouseuphandler); Document.title=Ispeed; Timer= SetInterval (function(){ if(ispeed>0) {Ispeed--; }Else{ispeed++; } if(ispeed==0) {clearinterval (timer); } DISX+=Ispeed; Move (); }, 20); } functionMove () {_DISX= parseint (DISX/20);if(_disx>0) {_disx= disx%Imgcount; }Else{_DISX= Disx-math.floor (disx/imgcount) *imgcount; } if(Lastimgnode! =IMGNODES[_DISX]) {LastImgNode.style.display= "None"; Imgnodes[_disx].style.display= "Block"; Lastimgnode=IMGNODES[_DISX]; }} document.addeventlistener ("MouseDown", Mousedownhandler);};
[JavaScript case]360 panorama photos
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
