"Share" JS image slide Fade fade-in-use method.

The former director of the array said to do an invitation effect Click here to view the mouse drag

It was built with Adobe Edge software, with too much code and redundancy.

Plus I haven't learned how to use this software, increasing the cost of learning affects project progress.

So I wrote a simple one. Move the mouse to the lower right corner of the window scrolling see effect →demo

But the monomer does not use multiple picture division movement, of course, if the project needs, change it is not laborious, much simpler than the above.

Use the method below:

#bg{position:fixed;width:100%;Height:200%;background:URL (images/bg.jpg);background-size:100% 100%; }#wrap{width:100%;Height:100%; } #wrap > div    {position:Absolute; Left:20%;Top:30%; }. img1 ~ Div{Opacity:0; }. Rotate{-webkit-transition:-webkit-transform 500s Linear;-moz-transition:-moz-transform 500s Linear;-o-transition:-o-transform 500s Linear;transition:Transform 500s linear; }

<DivID= "BG"></Div><!--Background ID -<DivID= "Wrap"><!--the body and background of the Div class must be in img+ number form down -        <Divclass= "IMG1"><imgsrc= "Images/shou.png"width= "100%"class= "Rotate" /></Div>        <Divclass= "Img2"><imgsrc= "Images/map.jpg"width= "100%" /></Div>        <Divclass= "IMG3"><imgsrc= "Images/u.png"width= "100%" /></Div>        <Divclass= "Img4"><imgsrc= "Images/keji_06.png"width= "100%" /></Div></Div> 

CSS Settings bg wants a background URL

JS is not affixed to the interest to read the source of the download to see the top of the demo can also be seen.

It would be nice to change the mouse wheel to a touch-screen event if you want the phone to trigger.

#wrap子元素的DIV有多少张图片就依次的 class= "Number of img+ pictures";

Attachment Download: Click here

Thank you.

Margo_test
Source: http://www.cnblogs.com/margo/