前端用到的一点东西

最新推荐文章于 2024-07-22 15:19:55 发布

公元2013__

最新推荐文章于 2024-07-22 15:19:55 发布

阅读量332

点赞数 1

文章标签：前端 js

本文链接：https://blog.csdn.net/gongyuan2013/article/details/38488365

版权

前台取session ： ${key}

HTML5本地存储 window.localStorage.setItem() 取window.localStorage.getItem() window.sessionStorage.setItem()

定时器：time = window.setInterval(function(){},5000);

悬浮移除事件：xx.hover(function(){;
},function(){
});

$("xx").find("tr:gt(0)") 查找第一个tr以后所有的tr

浮动导航：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<title>浮动导航</title>

<style>
.div1{height: 100px;background-color: #dbdbdb;}
.div2{height: 50px;line-height: 50px;background-color: #FE6C01;text-align: center;position:relative;width: 100%;}
.div2 ul{list-style: none;margin: 0px;padding: 0;}
.div2 li{display:inline-block;*display:inline;*zoom:1;padding:0 20px;line-height: 50px;}
.div3{height: 1500px;background-color: #FFEBF0;}
.fix{position:fixed;top:0;left:0;}
.floor{background-color: #ddd;border-bottom: 1px solid #dbdbdb; margin-bottom: 20px;height: 1000px;line-height: 1000px;text-align: center;}
</style>
<body>
<div class="div1"></div>
<div class="div2" id="nav">
<ul>
<li>浮动导航一</li>
<li>浮动导航二</li>
<li>浮动导航三</li>
<li>浮动导航四</li>
<li>浮动导航五</li>
</ul>
</div>
<div class="div3"></div>
<div class="floor">1</div>
<div class="floor">2</div>
<div class="floor">3</div>
<div class="floor">4</div>
<div class="floor">5</div>
</body>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery
/jquery-1.4.min.js"></script>
<script type="text/javascript">
$(window).scroll(function () {
if($(window).scrollTop()>=110){
$("#nav").addClass('fix');
}else{
$('#nav').removeClass('fix');
}
});
$("#nav li").click(function(){
$(this).addClass("current").siblings().removeClass("current");
var current=$(this).index();
var top=$(".floor").eq(current).offset().top;
$("html,body").animate({scrollTop:top},500);
});
</script>
</html>