Today, I found a scroll effect on the Internet and shared it with you. First:
Html code:
Copy codeThe Code is as follows:
<! Doctype html>
<Html lang = "en-US">
<Head>
<Meta charset = "UTF-8">
<Title> jquery-roundabout </title>
<Style type = "text/css">
* {Padding: 0; margin: 0 ;}
Body {font: 24px tahoma ;}
Ul {list-style: none; margin: 100px auto 0; width: 500px; height: 200px ;}
Li {line-height: 200px; height: 200px; width: 300px; background: # ccc; text-align: center; cursor: pointer ;}
Li. roundabout-in-focus {cursor: default ;}
</Style>
</Head>
<Body>
<Ul class = "roundabout">
<Li> Block 1 </li>
<Li> Block 2 </li>
<Li> Block 3 </li>
<Li> Block 4 </li>
<Li> Block 5 </li>
</Ul>
</Body>
</Html>
<Script type = "text/javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"> </script>
<Script type = "text/javascript" src = "js/jquery. roundabout. min. js"> </script>
<Script type = "text/javascript">
$ (Function (){
$ ('. ROUNDABOUT'). roundabout ();
});
</Script>
The code for roundabout. js can be downloaded from the official website. It is too long to be written here. Click the official website address.