<!DOCTYPE html>
<html><head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <title></title> <style>.sildeCe{height: 100%;position: absolute;right: -75%;top: 0px;width: 75%;background: blue;transition: all .3s;opacity: 0;} .sildeCe.show{opacity: 1;right: 0%;} .sildeCe_cover{display: none;position: absolute;width: 100%;top: 0px;left: 0px;opacity: 0.8;background: #333;height: 100%;} </style></head><body><a class="toggleRight">侧滑</a> <div class="sildeCe_cover"></div> <div class="sildeCe"></div><script src="js/jquery-1.8.2.min.js"></script><script>$(".toggleRight").on("click",function(){ $(".sildeCe").addClass("show"); $(".sildeCe_cover").show(); })</script></body></html>