前端js特效模板,如何使用JS实现可用于页码更换飞页特效

前端js特效模板,如何使用JS实现可用于页码更换飞页特效详细介绍

* {margin:0; padding:0;} body {font-size:12px; color:#222; font-family:Verdana,Arial,Helvetica,sans-serif; background:#f0f0f0;} .clearfix:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;} .clearfix {zoom:1;} ul,li {list-style:none;} img {border:0;} .wrapper {width:800px; margin:0 auto; padding-bottom:50px;} /* qqshop focus */ #focus {width:800px; height:280px; overflow:hidden; position:relative;} #focus ul {height:380px; position:absolute;} #focus ul li {float:left; width:800px; height:280px; overflow:hidden; position:relative; background:#000;} #focus ul li p {position:absolute; overflow:hidden;} #focus .btnBg {position:absolute; width:800px; height:20px; left:0; bottom:0; background:#000;} #focus .btn {position:absolute; width:780px; height:10px; padding:5px 10px; right:0; bottom:0; text-align:right;} #focus .btn span {display:inline-block; _display:inline; _zoom:1; width:25px; height:10px; _font-size:0; margin-left:5px; cursor:pointer; background:#fff;} #focus .btn span.on {background:#fff;} #focus .preNext {width:45px; height:100px; position:absolute; top:90px; background:url(img/sprite.png) no-repeat 0 0; cursor:pointer;} #focus .pre {left:0;} #focus .next {right:0; background-position:right top;}

飞页效果