<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>向左侧滑动效果</title> <script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script> <style> * { margin: 0; padding: 0; } img { border: 0; } li { list-style: none; } a { text-decoration: none; } .btn { width: 100px; height: 30px; line-height: 30px; border: 1px solid; margin: 0 auto; margin-top: 100px; text-align: center; cursor: pointer; border-radius: 6px; } .btn_show { width: 100%; height: 100%; display: none; } .btn_show_bg { width: 100%; height: 100%; background: #000; position: fixed; top: 0; left: 0; opacity: 0.5; } .btn_show_main { width: 300px; height: 100%; background: #fff; position: fixed; top: 0; right: -300px; } .btn_show_main_close { font-size: 14px; width: 100px; height: 20px; line-height: 20px; text-align: center; cursor: pointer; } .div_right0 { animation: myfirstss 2s; -moz-animation: myfirstss 2s; /* Firefox */ -webkit-animation: myfirstss 2s; /* Safari and Chrome */ -o-animation: myfirstss 2s; /* Opera */ animation-fill-mode: forwards; } @keyframes myfirstss { 100% { background: red; right: 0px; top: 0px; } } .div_right { animation: myfirsts 2s; -moz-animation: myfirsts 2s; /* Firefox */ -webkit-animation: myfirsts 2s; /* Safari and Chrome */ -o-animation: myfirsts 2s; /* Opera */ animation-fill-mode: forwards; right: 0px; } @keyframes myfirsts { 100% { background: blue; right: -300px; top: 0px; } } .btn_show_main ul li { width: 100%; height: 20px; line-height: 20px; text-align: center; font-size: 14px; margin-bottom: 10px; cursor: pointer; } </style> </head> <body> <div class="btn">按钮</div> <div class="btn_show"> <div class="btn_show_bg"></div> <div class="btn_show_main"> <div class="btn_show_main_close">我是关闭</div> <ul> <li>我是1</li> <li>我是2</li> <li>我是3</li> <li>我是4</li> <li>我是5</li> <li>我是6</li> <li>我是7</li> <li>我是8</li> <li>我是9</li> <li>我是10</li> </ul> </div> </div> </body> <script> window.onload = function() { $(".btn").click(function() { $(".btn_show").show(); $(".btn_show_bg").show(); $(".btn_show_main").addClass('div_right0'); $(".btn_show_main").removeClass('div_right') }); $(".btn_show_main_close").click(function() { $(".btn_show_main").addClass('div_right'); $(".btn_show_main").removeClass('div_right0'); $(".btn_show_bg").hide(2000); }); }; </script> </html>
