主页 > 前端 > javascript >
来源：未知 时间：2014-09-30 16:21 作者：xbdadmin 阅读:次
[导读] 自己checkbox插件，先看效果展示，后看源码. 源码 !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...
|
自己checkbox插件，先看效果展示，后看源码.
源码
<!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" />
<script language="javascript" src="http://www.u88.cn/images/jquery.js"></script>
<title>无标题文档</title>
<style type="text/css">
*{ margin:0px; padding:0px;}
ul,li{ list-style:none; display:block;}
.check{ width:510px; display:block; background:#d5d5d5; overflow:hidden; height:150px;}
.check li{ float:left; width:120px; height:30px; text-align:center; line-height:30px; background:#f3f3f3; margin-left:5px; margin-top:5px; cursor:pointer;}
.check li.back_1{ background:#FF8000;}
</style>
</head>
<body>
<ul class="check">
<li>外景</li>
<li>夜景</li>
<li >中式</li>
<li id="more" style="background:#999">更多</li>
<li>韩式</li>
<li>田园</li>
<li>海洋风</li>
<li>复古</li>
<li>韩式</li>
<li>小清新</li>
<li>唯美</li>
<li>浪漫</li>
<li>时尚</li>
<li>创意</li>
<li>韩式</li>
<li id="sq" style="background:#999">收起</li>
</ul>
<script language="javascript">
$(document).ready(function(e) {
//初始化
var starts = 0;
var check = $('.check');
var check_li = $('.check li');
check_li.eq(starts).addClass('back_1');
var _more = 0;//初始化more位置
var _sq = 0;//初始化sq位置
check_li.each(function(i, e) {
if(e.getAttribute('id')&&e.getAttribute('id')=="more"){
_more = i;
}
if(e.getAttribute('id')&&e.getAttribute('id')=="sq"){
_sq = i;
}
});
//初始化显示/隐藏
check_li.each(function(i, e) {
if(i>_more){
e.style.display="none";
}
});
//点击事件more
var first = 0;
check_li.click(function(){
var _index = $(this).index();
if(_index == _more){
check_li.show();
check_li.eq(_more).hide();
}else if(_index == _sq){
check_li.each(function(i, e) {
if(i>_more){
e.style.display="none";
}
});
check_li.eq(_more).show();
}else if(_index == 0){
//表示清空
check_li.removeClass('back_1');
$(this).addClass('back_1');
}else{
if(_index!=0){
//判断 此处用togo也可以不过速度没这个快
if($(this).hasClass('back_1')){
first--;
$(this).removeClass('back_1');
}else{
first++;
$(this).addClass('back_1');
}
}
if(first<=0){
$('.check li:first').addClass('back_1');
}else{
$('.check li:first').removeClass('back_1');
}
}//else
});
//鼠标划走
$('.check').hover(function(){
},function(){
check_li.each(function(i, e) {
if(i>_more){
e.style.display="none";
}
});
check_li.eq(_more).show();
});
});
</script>
</body>
</html>
|
自学PHP网专注网站建设学习,PHP程序学习,平面设计学习，以及操作系统学习
京ICP备14009008号-1@版权所有www.zixuephp.com
网站声明：本站所有视频，教程都由网友上传，站长收集和分享给大家学习使用，如由牵扯版权问题请联系站长邮箱904561283@qq.com
