Home > Developer > Web Develop
First write the static page:
Index.html
<!DOCTYPE html>
At this point the effect is this:
Analysis:
Background color
The location of the picture
Border, fillet, and shadow of a picture
Let the picture move.
INDEX.CSS Code:
*{ margin:0; padding:0;}body{ /*背景颜色*/ background:#cca0a0;}.pic{ position:absolute;}.pic1 { z-index:1;/*越小越靠下*/ top:120px; left:100px;}.pic2 { z-index:1; top:120px; left:600px;}.pic3 { z-index:2; top:200px; left:200px;}.pic4 { z-index:2; top:200px; left:500px;}.pic5 { z-index:3; top:280px; left:350px;}img { padding:10px; background:#fff; border-radius:10px;/*圆角*/ box-shadow:5px 10px 10px #808080;/*阴影*/ cursor:pointer;/*鼠标移动到图片上，变小手*/}
At this time the static finished, the rest is to click on the picture when the exchange:
First, the left, top, and z-index values of the clicked picture are obtained, and then the left,top,z-index of the picture with the front (the largest number of Z-index) is exchanged.
First to the front of the picture a mark, we know which is the most front (to class= "pic5" picture a title value, the value is empty on the line does not matter)
Introducing jquery Packages
Execute after loading is complete
$(function(){});
So what does it say,
Some things that happen when you click on a picture:
1. Get the left, top, and z-index values of the clicked picture and the front-most picture
2. Swap position
$(".pic").click(function () { /*获取点击的图片的值*/ var left1 = $(this).offset().left;//获取当前图片的left值 var top1 = $(this).offset().top; var zindex1 = $(this).css("z-index"); /*获取最靠前的图片的值*/ var left2 = $(".pic[title]").offset().left; var top2 = $(".pic[title]").offset().top; var zindex2 = $(".pic[title]").css("z-index");}
To Exchange:
First remove the front of the picture's label, let click on the picture to get the most front of the image value and label, and then the front of the picture to get the value of the clicked picture
//移除最前边的图片的title值$(".pic[title]").animate({ "left": left1, "top": top1 }, 1000).css("z-index", zindex1).removeAttr("title");//动画效果 把最前边的值给点击的图片$(this).animate({ "left": left2, "top": top2 }, 1000).css("z-index", zindex2).attr("title", "");
It's time to move, but there's one more question:
What happens if you click a picture quickly:
We found it messed up! The top code in 1000 is the millisecond, that is, 1 seconds, click on the picture in 1 seconds to complete the exchange, now we are 1 seconds may have clicked three times or more, the first picture has not been exchanged, there is a second, third exchange, a time response, there is a loophole.
We can let the second time click to return to the position immediately:
$(".pic[title]").stop(true, true);$(this).stop(true, true);
Now it's ready.
Paste the Index.js code:
//加载完之后$(function () { //点击图片的时候 $(".pic").click(function () { $(".pic[title]").stop(true, true); $(this).stop(true, true); /*获取点击的图片的值*/ var left1 = $(this).offset().left;//获取当前图片的left值 var top1 = $(this).offset().top; var zindex1 = $(this).css("z-index"); /*获取最靠前的图片的值*/ var left2 = $(".pic[title]").offset().left; var top2 = $(".pic[title]").offset().top; var zindex2 = $(".pic[title]").css("z-index"); //移除最前边的图片的title值 $(".pic[title]").animate({ "left": left1, "top": top1 }, 1000).css("z-index", zindex1).removeAttr("title"); //动画效果 把最前边的值给点击的图片 $(this).animate({ "left": left2, "top": top2 }, 1000).css("z-index", zindex2).attr("title", ""); });});
Note: Errors that occur during the process
The notation of [' title '] is wrong, and the single quotation mark in the inside will be removed.
A reminder of how Xiayouyou?
Images used:
Html+css+js (+jquery) make poker picture switch effect
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
