Absolute introduction
In the afternoon, I saw a small animation of giving Christmas gifts. It was almost Christmas, so I started to imitate and improved some small problems.
Original address:Fancy carousel----Christmas gift delivery
Ideas: There are five gifts in the animation. They are evenly distributed on the screen. Set the two outermost gifts to rotate at a certain angle and hide. The animation starts. Each gift moves to the right at a certain position, and then adds the fifth gift to the first gift. In this way, these five gifts are rearranged. When writing jQ, just focus on the changes in the gift position, because the rotation and hiding of the gift have been set. If a gift becomes the first gift, it will automatically hide and rotate.
Basic structure
Code:
<div class="cr"> <div class="cr-l"><img src="img/" alt=""/></div> <div class="cr-icon"> <div > <img style="left:5%" src="img/" alt=""/> <img style="left:25%" src="img/" alt=""/> <img style="left:45%" src="img/" alt=""/> <img style="left:65%" src="img/" alt=""/> <img style="left:85%" src="img/" alt=""/> </div> </div> <div class="cr-r"><img src="img/" alt=""/></div> </div>
style
The :first and :last attributes are used in css. These two attributes are dynamic. If the structure of the document changes, the values of these two attributes will also change accordingly. In this way, we don’t have to trouble judge which element is the last element (the first element). Using these two attributes directly will automatically select the first element and the last element.
html, body {
height: 100%;
margin: 0;
padding: 0;
}
.cr{
width: 100%;
position: relative;
background: url("../img/") no-repeat 0 0;
-webkit-background-size: 100% 100%;
background-size: 100% 100%;
overflow: hidden;
}
.cr-l,.cr-r{
position: absolute;
bottom:10%;
width: 20.8%;
height: 70%;
z-index:100;
}
.cr-l img,.cr-r img{
width: 100%;
position: absolute;
top:50%;
}
.cr-l{
left: 0;
}
.cr-r{
right:0;
}
.cr-icon{
bottom: 15%;
left:0;
position: absolute;
z-index: 1000;
width: 100%;
height: 70%;
text-align: center;
}
.cr-icon img{
margin-right: 25px;
width: 10%;
vertical-align: top;
position: absolute;
bottom: 0;
opacity: 1;
transform:rotate(0deg);
transition: all 1s;
}
.cr-icon img:first-child{
transform:rotate(-90deg);
-webkit-transform:rotate(-90deg);
opacity: 0;
width: 0;
}
.cr-icon img:last-child{
transform:rotate(90deg);
-webkit-transform:rotate(90deg);
opacity: 0;
width: 0;
}
jQuery code
In the source code, the author wrote the initial location of these five gifts in the HTML structure. I think it is not very good, so it is implemented in the jQuery code. The code is not difficult, it is the implementation of the idea.
$(function() {
// Click on the gift picture to switch the picture $('#cr-icon img').click(function(){
if($(this).attr('src') == 'img/'){
$(this).attr('src','img/');
}else{
$(this).attr('src','img/');
}
});
var timer = null;
var oImg = $('#cr-icon img');
var end = ;
var height = ;
// Set high $(".cr").css("height",height);
// Set the initial position of the picture for(var i=0;i<;i++){
$(oImg[i]).css('left', 5+i*20+'%');
}
// Picture rotation function function scrollLogo(){
(function(){
var left = parseInt($(this).css('left'));
left += end * 0.2;
$(this).css('left',left);
});
$('#cr-icon img:last').insertBefore('#cr-icon img:first').css('left',end * 0.05);
}
scrollLogo();
// Timer, start rotation timer = setInterval(scrollLogo,1800);
// Move in clearly and rotate (function(){
clearInterval(timer);
});
// Mouse is moved out and started rotation (function() {
timer = setInterval(scrollLogo,1800);
});
});
The above is all the content of this article. I hope that the content of this article will help you study or work. I also hope to support me more!