Javascript implements the code _ javascript technique for dragging and clicking the photo wall on top

This article mainly introduces the javascript Implementation of the photo wall code for dragging and clicking a photo. The effect is very good. We recommend it to you here. If you need it, you can refer to it. Demo Diagram

Styles.css

* {/* Clear the default outer and inner margins of all elements */}. photo_wall {background: url(bg.jpg);/* define the Default background of the photo wall */background-size: cover;/* fill the photo wall with the background of the photo wall */width: pixel; /* set the width and height of the photo wall */height: 500px; margin: 40px auto;/* set the margin of the photo wall */display:-webkit-box; /* stream layout using the box Model of CSS3 */display:-moz-box; display: box;-webkit-box-align: center; /* define the inner element of the box model to be in the middle of the vertical direction */-moz-box-align: center;-webkit-box-pack: center; /* define that the internal elements of the box model are in the middle of the horizontal direction */-moz-box-pack: center ;}. photo_wall. photo_frame {text-align: center;/* The text in the photo is displayed in the center */padding: 10px 10px 30px 10px;/* define the photo padding */background-color: # f2eada;/* set the photo background color */font-size :. 8em;/* size of text in the photo */box-shadow :. 2em. 2em. 8em # 130c0e;/* Add a shadow effect to the photo, with a stereoscopic effect */}. photo_frame p {margin-top: 10px;/* set the top margin of the text section displayed in the photo */} # photo01 {position: fixed; top: 90px; left: 50px; -webkit-transform-origin: right bottom;/* defines the rotation base point of image 1 as */-moz-transform-origin: right bottom; -webkit-transform: rotate (10deg);/* uses the base point as the axis and rotates clockwise for 10 degrees in 2D space */-moz-transform: rotate (10deg ); -o-transform: rotate (10deg); transform: rotate (10deg); position: absolute;} # photo02 {position: fixed; top: 100px; left: 300px; -webkit-transform-origin: right bottom;/* defines the rotation base point of Image 2 as */-moz-transform-origin: right bottom; -webkit-transform: rotate (-20deg);/* uses the base point as the axis and rotates 20 degrees counter-clockwise in 2D space */-moz-transform: rotate (-20deg ); -o-transform: rotate (-20deg); transform: rotate (-20deg); position: absolute ;}# photo03 {position: fixed; top: 80px; left: 750px; -webkit-transform-origin: left top;/* defines the rotation base point of Photo 3 as the upper left corner */-moz-transform-origin: left top; -webkit-transform: rotate (40deg);/* rotate the axis clockwise for 40 degrees */-moz-transform: rotate (40deg) in 2D space based on the base point ); -o-transform: rotate (40deg); transform: rotate (40deg); position: absolute;} # vedio1 {position: fixed; top: 250px; left: 950px; -webkit-transform-origin: right top;/* defines the rotation base point of Photo 3 as the upper left corner */-moz-transform-origin: right top; -webkit-transform: rotate (-100deg);/* rotate the axis clockwise for 40 degrees in 2D space using the base point */-moz-transform: rotate (50deg ); -o-transform: rotate (-50deg); transform: rotate (50deg); position: absolute;} p {cursor: move;} # top {right: 0; top: 0; width: 100px; height: 100%; position: fixed; padding: 10px; text-align: center; font-weight: bold; background: # f2eada; opacity: 0.9 ;}

Drag. js

var zIndex = 1;window.onload = function (){  var x=document.getElementsByName("photo");  for(var i=0;i
 
  = maxL && (iL = maxL);      iT >= maxT && (iT = maxT);             oDrag.style.left = iL + "px";      oDrag.style.top = iT + "px";      return false;    };         document.onmouseup = function ()    {      document.onmousemove = null;      document.onmouseup = null;      oDrag.style.left = oTemp.style.left;      oDrag.style.top = oTemp.style.top;      oDrag.style.zIndex = oTemp.style.zIndex;      document.body.removeChild(oTemp);      oDrag.releaseCapture && oDrag.releaseCapture()    };         this.setCapture && this.setCapture();        return false  }  }
 

Picwall.html

Bytes