1. 程式人生 > >簡單的從左側展開層,轉場效果

簡單的從左側展開層,轉場效果

效果 initial () device doctype utf col ont ack

<!DOCTYPE html>

<html>

<head lang="en">

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">

<meta name="apple-mobile-web-app-capable" content="yes">

<meta name="apple-mobile-web-app-status-bar-style" content="black">

<title></title>

<script src="/jquery-1.9.1.js"></script>

<style>

html,body{ margin: 0px; padding: 0px;} .

new_show_box{ width: 100%; height: 100vh; position: fixed; overflow-y: scroll; -webkit-overflow-scrolling: touch; top:0; left:100%; background-color: #c8c8c8 !important; z-index: 99; }

</style>

<script>

$(function(){

$(".gohitory").click(function () {

$(‘.new_show_box‘).animate({left:"0%"});

})

$(".gohitory1").click(function () {

$(‘.new_show_box‘).animate({left:"100%"},300);

})

})

</script>

</head>

<body>

<a href="#" class="gohitory">展開</a>

<div class="new_show_box">

<a href="#" class="gohitory1">縮進</a> </div>

</body>

</html>

簡單的從左側展開層,轉場效果