Created
November 22, 2013 05:15
-
-
Save iOS0x00/7595202 to your computer and use it in GitHub Desktop.
左侧栏目带点击隐藏功能Jquery版本
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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"> | |
<head> | |
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> | |
<title>无标题文档</title> | |
<style> | |
* { | |
margin:0; | |
padding:0; | |
} | |
#div1 { | |
width:200px; | |
height:100%; | |
background:#F1F1F1; | |
position:fixed; | |
left:-180px; | |
/*top:200px;*/ | |
} | |
#div1 span { | |
width:20px; | |
height:120px; | |
position:absolute; | |
background:#E4E4E4; | |
right:0px; | |
top:40%; | |
} | |
#div1 span h3 { | |
width:18px; | |
height:auto; | |
margin-left: 5px; | |
position:absolute; | |
top:40%; | |
} | |
</style> | |
<script type="text/javascript" src="/static/js/jquery-1.10.2.js"></script> | |
<script> | |
$(document).ready(function() { | |
var tigger = $("#tigger"); | |
tigger.click(function() { | |
if ($("#div1").offset().left == 0) { | |
$(".moveTigger").html("<h3>></h3>"); | |
move(-180); | |
} else { | |
$(".moveTigger").html("<h3><</h3>"); | |
move(0); | |
} | |
}); | |
var times; | |
function move(iTarget) { | |
clearInterval(times); | |
times = setInterval(function() { | |
var speed; | |
if ($("#div1").offset().left < iTarget) { | |
speed = 10; | |
} else { | |
speed = -10; | |
} | |
if ($("#div1").offset().left == iTarget) { | |
clearInterval(times); | |
} else { | |
var newOffsetLeft = $("#div1").offset().left + speed; | |
$("#div1").offset({left: newOffsetLeft}); | |
} | |
}, 10); | |
} | |
}); | |
</script> | |
</head> | |
<body> | |
<div id='div1'> <span id="tigger" class="moveTigger"> | |
<h3>></h3> | |
</span> | |
<div class="filelist"> | |
<ul>{% for fileName in viFiles %} | |
<li>{{ fileName }}</li>{% end %}</ul> | |
</div> | |
</div> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment