Shulou(Shulou.com)06/02 Report--

This article is about how to achieve 3D photo albums with pure js. The editor thinks it is very practical, so I share it with you. I hope you can get something after reading this article. Let's take a look at it with the editor.

Pure JavaScript to achieve merry-go-round / 3D photo album special effects (mouse drag rotation)

Let's take a look at the effect picture first.

Tell me about the way to realize it.

The merry-go-round is achieved by relying on the box with the perspective attribute (where the box id starts from: perspective) to produce a sense of extension to the interior of the web page, and to rotate the 3D effect produced by the transform attribute in the box with the depth of field attribute (perspective) along the y axis of the box (wrap).

3D implementation process

First of all, you need to know the meaning of xyz axis in transform in js.

First, set a div and add the attribute of perspective (open space) to it to facilitate the observation of the effect later.

/ * scene depth * / # perspective {perspective: 700px position * this attribute is the key to the implementation of the merry-go-round, which can create a sense of spatial distance / extension. The box that places the picture in this box can realize the feeling of extending to the inside of the web page * /}

two。 Second, set up the container wrap containing the picture box, make it center display, and add the attribute of position:relative to make the picture in it position. Add the transform attribute, which will be used later.

# wrap {position: relative;width: 200pxcontrol height: 200pxleft margin: 150px auto;border: 1px solid black;transform-style: preserve-3d; / * key steps to achieve 3D effects. When used with boxshadow, you can ignore hierarchy problems, and then say * / transform: rotateX (0deg) rotateY (0deg); / / prepare for the 3D and rotation effects of the box. }

Add pictures, style them, and use position:absolute; to overlap them. Get in the form of an array, and calculate the rotation angle of the picture according to its array length length.

# wrap img {position: absolute;width: 200px;} var oImg = document.getElementsByTagName ('img'); var Deg = 360 wrap'; oWrap = document.getElementById (' wrap'); / * pick up the container * /

Iterate through the array so that it rotates Deg degrees along the y-axis. The prototype is used here, and the foreach method is used to iterate through the array so that each picture in it executes function (el,index). Use the index subscript to distinguish the different degrees that each picture in the array needs to rotate (first 0 °(Deg * 0), second Deg degree (Deg * 1), third (Deg * 2) degree. )

/ * oImg represents the array object, function (el,index) represents the function to be executed by each object in the array, and index is the subscript. * / Array.prototype.forEach.call (oImg,function (el,index) {el.style.transform = "rotateY (" + Deg*index+ "deg)";})

The Array.prototype property represents the prototype of the Array constructor and allows us to add new properties and methods to all Array objects.

The forEach () method executes the provided function once for each element of the array.

It is worth noting here that xxx.xx.transform = "rotateY (" + Deg*index+ "deg)"

You need to add deg units, and the parentheses should be enclosed in double quotes, that is, the result is transform: rotateY (degrees deg); degrees represent numbers to avoid being converted into strings.

After the previous step, you can initially see the 3D effect by translating the translateZ (350px) attribute of the image in the box along the Z axis, but you will find that there is a Zindex problem in the image array in the container, which causes the image that should be in the later image to be displayed.

Here is a way to ignore this effect and avoid hierarchical problems:

/ * add diffusion along z * / Array.prototype.forEach.call (oImg,function (el,index) {el.style.transform = "rotateY (" + Deg*index+ "deg) translateZ (350px)"; / / spread 350px} along z axis)-after execution-add attribute observation effect-# wrap {width: 200pxashing height: 200pxcontrol position: relative;margin:150px auto;transform-style: preserve-3d / * the key steps to achieve 3D effect. When used with boxshadow, hierarchy problems can be ignored * /} # wrap img {position: absolute;width: 200pxbox shadow: 0px 0px 1px # 0000000; / * using box-shadow with transform-style: preserve-3d; can ignore hierarchy problems * /}

At this time, add transform:rotateX (- 15deg) to the box containing the picture; you can see a more complete 3D effect. At this time, the carousel effect can be achieved by turning the box around the y-axis.

Realize the motion process

A merry-go-round can be achieved simply by turning the box, and you can use setinterval to make it rotate constantly.

If you want to use the mouse drag to achieve the merry-go-round, you need to add some code so that the container containing the box (wrap) can rotate around the y-axis of the container (wrap) itself according to the mouse coordinates.

Var nowX, nowY,// current mouse coordinates lastX, lastY, / / Last mouse coordinates minusX,minusY, / / distance difference roX =-10 maxim roy = 0 leading / total degree of rotation _ window.onmousedown = function (ev) {var ev = ev;// get the event source / / after the mouse moves, the current coordinates will become old coordinates. Save here first, which will be used when calculating the distance difference of mouse displacement. LastX = ev.clientX;lastY = ev.clientY;this.onmousemove = function (ev) {var ev = ev;// get the event source nowX = ev.clientX;nowY = ev.clientY;// get the current coordinate difference when moving minusX = nowX-lastX;// coordinate difference minusY = nowY-lastY;// coordinate difference / / cumulative difference, if not cumulative, the runner starts from the first picture after each click-> move. RoY + = minusX;roX-= minusY;// Cumulative difference / / rotate the x-axis and y-axis of the container so that the degree of rotation (numerical value, without units) is equal to the mouse coordinate difference. OWrap.style.transform = "rotateX (" + roX+ "deg)" + "rotateY (" + roY+ "deg)"; lastX = nowX;lastY = nowY;// current coordinates change to old coordinates} this.onmouseup = function () {this.onmousemove = null;// cancel the influence of mouse movement / / this.onmousedown = null;}

Complete code

* {margin: 0150px auto;border padding: 0;} body {overflow: hidden;background: # 000000;} / * scene depth * / # perspective {perspective: 700px;} # wrap {position: relative;width: 200pxpolitics height: 200pxcleft: 150px auto;border: 1px solid black;transform-style: preserve-3d;transform: rotateX (- 15deg) rotateY (0deg); / * depth of field can be abbreviated in this attribute * /} # wrap img {position: absolute;width: 200pxscape transform: rotateX (0deg) rotateY (0deg) Box-shadow: 0px 0px 1px # 000000ramp * hierarchy problems can be ignored with box-shadow * /}

_ window.onload=function () {var oImg = document.getElementsByTagName ('img'), oWrap = document.getElementById (' wrap'); var Deg = 360 / (oImg.length); Array.prototype.forEach.call (oImg,function (el,index) {el.style.transform = "rotateY (" + Deg*index+ "deg) translateZ (350px)"; / / el.style.zIndex =-index;el.style.transition = "transform 1s" + index*0.1 + "s";}) Var nowX, nowY,// current mouse coordinates lastX, lastY, / / Last mouse coordinates minusX,minusY, / / distance difference roX =-10 maxim roy = 0 leading / total rotation _ window.onmousedown = function (ev) {var ev = ev;// get the event source lastX = ev.clientX;lastY = ev.clientY;this.onmousemove = function (ev) {var ev = ev;// get the event source nowX = ev.clientX;nowY = ev.clientY;// get the current coordinates minusX = nowX-lastX MinusY = nowY-lastY;// coordinate difference roY+ = minusX;// cumulative difference roX-= minusY;// cumulative difference oWrap.style.transform = "rotateX (" + roX+ "deg)" + "rotateY (" + roY+ "deg)"; lastX = nowX;lastY = nowY;// current coordinates become old coordinates} this.onmouseup = function () {this.onmousemove = null;// cancels the effect of mouse movement / / this.onmousedown = null The above is how to implement 3D photo albums with pure js. The editor believes that there are some knowledge points that we may see or use in our daily work. I hope you can learn more from this article. For more details, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.