特效描述:jquery 响应式全屏页面 垂直滚动效果 手机端 全屏页面滚动。响应式全屏页面垂直滚动
代码结构
1. 引入CSS
<link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/style.css">
2. 引入JS
<script src="js/jquery.min.js"></script> <script src="js/jquery-migrate-1.2.1.min.js"></script> <script src="js/jquery.swipe-events.js"></script> <script src="js/fsvs.js"></script> <script src="js/main.js"></script> <script src="js/jquery.min.js"></script> <script src="js/jquery-migrate-1.2.1.min.js"></script> <script src="js/jquery.swipe-events.js"></script> <script src="js/fsvs.js"></script> <script src="js/main.js"></script>
3. HTML代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" class="fsvs demo"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>FSVS垂直滚屏效果代码</title> </head> <body class="fsvs"> <!-- 代码 开始 --> <div id="fsvs-body"> <div class="slide"> <h2>标题1</h2> <div> <img src="images/1.jpg" /> </div> </div> <div class="slide"> <h2>标题2</h2> <div> <img src="images/2.jpg"/> </div> </div> <div class="slide"> <h2>标题3</h2> <img src="images/3.jpg"/> </div> </div> <!-- 代码 结束 --> </body> </html>