This effect is very special and cute, so I have never seen it on any external website. If you are interested, you can download it and use it on your own.
PS: it has been modified to be compatible with the public browser.
:
Online Demo: http://demo.jb51.net/js/ImagesRotateScroll/index.html
Step 1. Create HTML
Copy codeThe Code is as follows:
<Div id = "rotatescroll">
<Div class = "viewport">
<Ul class = "overview">
<Li> </li>
<Li> </li>
<Li> </li>
<Li> </li>
<Li> </li>
<Li> </li>
<Li> </li>
<Li> </li>
<Li> </li>
<Li> </li>
<Li> </li>
<Li> </li>
<Li> </li>
<Li> </li>
<Li> </li>
</Ul>
</Div>
<Div class = "overlay"> </div>
<Div class = "thumb"> </div>
</Div>
Step 2. Create CSS
Copy codeThe Code is as follows:
# Rotatescroll {
Width: 300px;
Height: 300px;
Margin: 0 auto;
Position: relative;
}
# Rotatescroll. viewport {
Width: 300px;
Height: 300px;
Position: relative;
Margin: 0 auto;
Overflow: hidden;
}
# Rotatescroll. overview {
Width: 798px;
Position: absolute;
List-style: none;
Margin: 0;
Padding: 0;
Left: 0;
Top: 0;
}
# Rotatescroll. overview li {
Width: 300px;
Height: 300px;
Float: left;
Position: relative;
}
# Rotatescroll. overlay {
Height: 300px;
Width: 300px;
Background: url (../images/bg-rotatescroll.png) no-repeat 0 0;
Position: absolute;
Left: 0;
Top: 0;
}
# Rotatescroll. thumb {
Width: 26px;
Height: 26px;
Z-index: 200;
Background: url (../images/bg-thumb.png) no-repeat 50% 50%;
Position: absolute;
Top: 0px;
Cursor: pointer;
Left: 0px;
}
# Rotatescroll. dot {
Background: url (../images/bg-dot2.png) no-repeat 0 0;
Display: none;
Height: 12px;
Width: 12px;
Position: absolute;
Left: 155px;
Top: 3px;
Z-index: 100;
}
# Rotatescroll. dot span {display: none ;}
Step3. insert jQuery and script packages
Copy codeThe Code is as follows:
<Script type = "text/javascript" src = "http://www.baijs.nl/js/jquery-1.4.2.min.js"> </script>
<Script type = "text/javascript" src = "js/jquery. tinycircleslider. js"> </script>
<Script type = "text/javascript" src = "js/website. js"> </script>
Package download http://www.jb51.net/jiaoben/34107.html