Several friends of my band have just undergone a change in the small membership lineup. They need to replace the photos on their home page. I think it might be interesting to have a little interaction with something.
There may be many ways to do this, and this one just came into my head and suddenly appeared, and I went with it. The idea is to have a silhouette as a background image, then, in the group all exactly the same size with each band member's 4 images. These images are hidden by default. Then, there are 4 absolutely-positioned regions above the region, which is the transition zone role. In jquery, we use them to hover over events, gradually displaying the corresponding images.
Html
As I said, it's just a div with four images and a transition area. All have unique IDs and a common class class name.
Copy Code code as follows:
<div id= "Home-photos-box" >
<a id= "aller" href= "#aller" class= "Home-roll-box" ></a>
<a id= "Neil" href= "#neil" class= "Home-roll-box" ></a>
<a id= "Aaron" href= "#aaron" class= "Home-roll-box" ></a>
<a id= "Scott" href= "#scott" class= "Home-roll-box" ></a>
</div>
Css
The class name covers commonalities (such as location styles), followed by IDs (including specific left position).
Copy Code code as follows:
#home-photos-box {float:left; width:352px; Background:url (. /images/guys-allblack.png) No-repeat; padding:334px 0 0 0; position:relative; }
#aller {left:0;}
#neil {left:25%;}
#aaron {left:50%;}
#scott {left:75%;}
. home-roll-box {position:absolute; z-index:1000; display:block; height:334px; top:0; width:25%;}
. single-guy {position:absolute; top:0; left:0; display:none; opacity:0;}
Jquery
When the mouse hovers over the corresponding area, which corresponds to the ID and fade of the image, use Stop () to prevent the animations queued here and we use opaque settings. Fadetoggle (), when too fast and the mouse moves to fade.
Copy Code code as follows:
$ (function () {
var name = "";
$ (". Home-roll-box"). Hover (function () {
Name = $ (this). attr ("id");
$ ("#image-" +name). Stop (). Show (). Animate ({opacity:1});
}, function () {
Name = $ (this). attr ("id");
$ ("#image-" +name). Stop (). Animate ({opacity:0});
});
});
Download Address http://www.jb51.net/jiaoben/24272.html
