Today on the Internet to find a rollover effect, take out and share with everyone. First up Effect chart:
HTML code:
Copy Code code as follows:
<! DOCTYPE html>
<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>
<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>
<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>
On the Roundabout.js code can go to the official online download, here is not written, too long. Click on the official website address.
