富贵资源网 Design By www.hznty.com
我们老是在想着怎么提升自己的水平,但是实际上的行动却很少,大师都说是要每天码一点点代码的,那么要怎么做到动手实践码代码呢?我就想有时候我们自己在欣赏别人的网站的时候,是不是就会想说看到某个模块非常的美观简洁,那么是不是就可以自己动手写下来呢?不懂的时候我们就使用火狐自带的 firebug来查看这些结构,然后模仿下来,仔细分析好,后续在自己实现看看,这样不是就更能进步呢?于是我在自己工作的同时看到好看的我也就想着实现它,现在就发现比较会去思考怎么来实现某个模块了。不过还是有很多缺陷,如果你在看我这篇文章,有发现更优的解法,请不要吝啬的贴上你的代码部分吧。
初始化
经过的下拉展示
这边是我查看的地址,我要模仿的是他的下拉框,经过美化的伪下拉:
http://www.lawtime.cn/xiamen 不过我这边有做了小小的调整现在我的浏览都是基于火狐和谷歌浏览器上查看特效的,我没有在去关注ie,因此,我右边的小三角是用css3实现的,鼠标经过的时候有旋转特效哦。。下面是html结果
复制代码代码如下:
<div class="select">
<div class="select_default"></div>
<!--这边是默认展示我们选中的框-->
<ul class="select_item">
<!--实则所有的下拉选项隐藏了,在这个ul中-->
<li>Complex</li>
<li>Knowledge</li>
<li>Case</li>
<li>Article</li>
<li>News</li>
</ul>
</div>
然后在进行css美化
复制代码代码如下:
*{
margin:0;
padding:0;
}
body{
margin:0;
padding:0;
font:normal 12px Arial, Helvetica, sans-serif;
}
.select{
width:100px;
position:relative;
top:100px;
left:100px;
cursor:pointer;
}
.select_default{
width:80px;
height:32px;
line-height:32px;
padding:0 10px;
border:solid 1px #ccc;
}
/*这边就是三角形的css代码,使用伪类和定位实现右三角*/
.select_default:after{
content:"";
border-left:5px solid transparent;
border-right:5px solid transparent;
border-bottom:5px solid #999;
-webkit-transform-origin:5px 2.5px;
-moz-transform-origin:5px 2.5px;
-ms-transform-origin:5px 2.5px;
-o-transform-origin:5px 2.5px;
transform-origin:5px 2.5px;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-ms-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
position:absolute;
right:5px;
top:14px;
}
.select_default.rotate:after{
-webkit-transform:rotate(180deg);
-moz-transform:rotate(180deg);
-ms-transform:rotate(180deg);
-o-transform:rotate(180deg);
transform:rotate(180deg);
}
.select_item{
margin:0;
padding:0;
display:none;
list-style:none;
}
.select_item li{
width:80px;
height:32px;
line-height:32px;
padding:0 10px;
border:solid 1px #ccc;
border-top:none;
}
.select_item li.hover{
background:#666;
color:#fff;
}
最后使用jq实现下拉
复制代码代码如下:
$(document).ready(function(){
var $sel = $(".select"),
$sel_default = $(".select_default"),
$sel_item = $(".select_item"),
$sel_item_li = $(".select_item li")
$sel_default.text($(".select_item li:first").text());
//alert();
$sel.hover(function(){
$sel_item.show();
$sel_default.addClass("rotate");
$sel_item_li.hover(function(){
$index = $sel_item_li.index(this);
//alert($index)
$sel_item_li.eq($index).addClass("hover");
},function(){
$sel_item_li.removeClass("hover");
})
},function(){
$sel_item.hide();
$sel_default.removeClass("rotate");
});
$sel_item_li.click(function(){
$sel_default.text($(this).text());
$sel_item.hide();
});
});
资源下载
以上便是全部,但是我感觉jq好像不够优化,我是在经过默认展示框的时候,下拉ul显示,然后在写经过下拉的菜单的时候添加css特效。。但是怎么觉得不够优化??
然后我们用这种方式来美化的话,我在想传值的话是不是也只能用js吧值赋值到地址上跳转呢??还是说有其他的好方法??用隐藏域的话能行吗??具体又要怎么办呢???以上这俩问题,都还没具体实践!
初始化
经过的下拉展示
这边是我查看的地址,我要模仿的是他的下拉框,经过美化的伪下拉:
http://www.lawtime.cn/xiamen 不过我这边有做了小小的调整现在我的浏览都是基于火狐和谷歌浏览器上查看特效的,我没有在去关注ie,因此,我右边的小三角是用css3实现的,鼠标经过的时候有旋转特效哦。。下面是html结果
复制代码代码如下:
<div class="select">
<div class="select_default"></div>
<!--这边是默认展示我们选中的框-->
<ul class="select_item">
<!--实则所有的下拉选项隐藏了,在这个ul中-->
<li>Complex</li>
<li>Knowledge</li>
<li>Case</li>
<li>Article</li>
<li>News</li>
</ul>
</div>
然后在进行css美化
复制代码代码如下:
*{
margin:0;
padding:0;
}
body{
margin:0;
padding:0;
font:normal 12px Arial, Helvetica, sans-serif;
}
.select{
width:100px;
position:relative;
top:100px;
left:100px;
cursor:pointer;
}
.select_default{
width:80px;
height:32px;
line-height:32px;
padding:0 10px;
border:solid 1px #ccc;
}
/*这边就是三角形的css代码,使用伪类和定位实现右三角*/
.select_default:after{
content:"";
border-left:5px solid transparent;
border-right:5px solid transparent;
border-bottom:5px solid #999;
-webkit-transform-origin:5px 2.5px;
-moz-transform-origin:5px 2.5px;
-ms-transform-origin:5px 2.5px;
-o-transform-origin:5px 2.5px;
transform-origin:5px 2.5px;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-ms-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
position:absolute;
right:5px;
top:14px;
}
.select_default.rotate:after{
-webkit-transform:rotate(180deg);
-moz-transform:rotate(180deg);
-ms-transform:rotate(180deg);
-o-transform:rotate(180deg);
transform:rotate(180deg);
}
.select_item{
margin:0;
padding:0;
display:none;
list-style:none;
}
.select_item li{
width:80px;
height:32px;
line-height:32px;
padding:0 10px;
border:solid 1px #ccc;
border-top:none;
}
.select_item li.hover{
background:#666;
color:#fff;
}
最后使用jq实现下拉
复制代码代码如下:
$(document).ready(function(){
var $sel = $(".select"),
$sel_default = $(".select_default"),
$sel_item = $(".select_item"),
$sel_item_li = $(".select_item li")
$sel_default.text($(".select_item li:first").text());
//alert();
$sel.hover(function(){
$sel_item.show();
$sel_default.addClass("rotate");
$sel_item_li.hover(function(){
$index = $sel_item_li.index(this);
//alert($index)
$sel_item_li.eq($index).addClass("hover");
},function(){
$sel_item_li.removeClass("hover");
})
},function(){
$sel_item.hide();
$sel_default.removeClass("rotate");
});
$sel_item_li.click(function(){
$sel_default.text($(this).text());
$sel_item.hide();
});
});
资源下载
以上便是全部,但是我感觉jq好像不够优化,我是在经过默认展示框的时候,下拉ul显示,然后在写经过下拉的菜单的时候添加css特效。。但是怎么觉得不够优化??
然后我们用这种方式来美化的话,我在想传值的话是不是也只能用js吧值赋值到地址上跳转呢??还是说有其他的好方法??用隐藏域的话能行吗??具体又要怎么办呢???以上这俩问题,都还没具体实践!
富贵资源网 Design By www.hznty.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
富贵资源网 Design By www.hznty.com
暂无评论...
RTX 5090要首发 性能要翻倍!三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。
据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。