BACK TOwww.herodl.com
昨天公司项目不是特别紧张，我得以空闲，便用css3绘制了军曹动漫人物–Giroro
1.以下是giroro在不同浏览器中的效果对比。chrome和safari的效果最佳，其次是firefox. 当然ie9以下的浏览器就不摆了。。感觉太混搭了，像不像一个古代时候的官员还混搭了领带。
拿我朋友的话说，第一个是文艺青年，第二个是普通青年，第三个2B青年，有木有啊？
查看DEMO: http://www.herodl.com/css3/Giroro.html
2. 简单原理，首先要掌握的css3属性是border-radius（圆角），其次是rotate旋转，box-shadow阴影,scale缩放等，我比较懒，嘿嘿，就不一一讲解咯。
抽空自己写了一个简单的js相册，希望与大家分享。就利用jquery写的，比较简单的一个相册功能。原理很简单，就是点击小图的同时获取其src地址，传递给大图即ok。
demo地址:http://www.herodl.com/blog/demo/photoshow/photo.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>相册图片浏览-恒越动力</title>
<meta name="robots" content="all" />
<style type="text/css">
*{margin:0;padding:0;font-size:12px}
#wrapper{width:550px;margin:100px auto}
#showPic{width:500px;height:500px;background:#eee;overflow:hidden}
#showPic img{display:block;margin:0 auto}
#list_img{position:relative;width:500px;}
#abb_img{width:450px;overflow:hidden;height:70px;position:absolute;left:26px;top:5px;}
#abb_img ul{width:500%;height:70px;position:absolute;left:0}
#abb_img ul li{float:left;display:inline;width:70px;height:70px;margin:0 5px 0 0;cursor:pointer}
#abb_img ul li img{width:68px;height:68px;border:1px solid #fff}
#abb_img ul li img.border{border:1px solid #000}
#pre,#next{width:15px;height:39px;text-indent:-9999em;background:url(images/bt.jpg) no-repeat 0 0;position:absolute;top:20px;left:0;cursor:pointer}
#next{background-position:-15px 0;left:485px}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"/></script>
</head>
<body>
<div id="wrapper">
<h1>相册图片浏览-恒越动力</h1>
<div id="showPic">
<img src=""/>
</div>
<div id="list_img">
<div id="pre">点击向左</div>
<div id="abb_img">
<ul>
<li><img src="images/1.jpg"/></li>
<li><img src="images/2.jpg"/></li>
<li><img src="images/3.jpg"/></li>
<li><img src="images/4.jpg"/></li>
<li><img src="images/5.jpg"/></li>
<li><img src="images/6.jpg"/></li>
<li><img src="images/7.jpg"/></li>
<li><img src="images/8.jpg"/></li>
<li><img src="images/9.jpg"/></li>
<li><img src="images/7.jpg"/></li>
<li><img src="images/8.jpg"/></li>
<li><img src="images/9.jpg"/></li>
<li><img src="images/10.jpg"/></li>
</ul>
</div>
<div id="next">点击向右</div>
</div>
</div>
<script type="text/javascript">
window.onload=function(){
var n=2;//点击一次移动图片的张数
//初始化大图
var src=$("#abb_img li img:first").attr("src");
$("#showPic img").attr("src",src);
//点击向右
$("#next").click(function(){
var c=parseInt($("#abb_img ul").css("left"));
c=c-75*n;
//获取li数量
var i=$("#abb_img ul li").length;
var m=(i-6)*(-75);
if(m>c){
return false;
}
else{
$("#abb_img ul").animate({left:c},{queue:false,duration:100});
}
});
//点击向左
$("#pre").click(function(){
var c=parseInt($("#abb_img ul").css("left"));
if(c>=0){
return false;}
else{
c=c+75*n;
$("#abb_img ul").animate({left:c},{queue:false,duration:100});}
});
//点击某一个图片，获取其src,传递给大图
$("#abb_img ul li img").click(function(){
src=$(this).attr("src");
$("#showPic img").attr("src",src);
$("#abb_img ul li img").removeClass("border");
$(this).addClass("border");
});
}
</script>
</body>
</html>很多朋友可能遇到过这样一种情况，想给下拉列表select一个背景图，或者想给它自定义CSS样式的时候，发现真是力不从心。当然我们知道，select是不支持自定义样式。那么我们如何实现我们想要的效果呢？我利用较为简单的方式写了出来，希望能给大家一点帮助。
select自定义css样式demo页面: http://www.herodl.com/blog/demo/select-js/select-js.html
简单的阐述下实现方法与思想，select部分利用ul无序列表代替select部分。利用js获取每一个列表里面的内容，再反馈到我们指定的位置。
代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>select下拉列表自定义CSS样式-恒越动力</title> <meta name="robots" content="all" /> <style type="text/css"> *{margin:0;padding:0;font-size:12px} h1{font-size:20px;font-family:"微软雅黑";line-height:60px} a{text-decoration:none} #box{width:800px;margin:0 auto;height:1000px;padding:100px 0} #select{width:200px;height:27px;border:1px solid #eee;position:relative} .select_this{position:absolute;top:0;left:0;width:165px;height:27px;line-height:27px;padding:0 30px 0 5px;background:url(sl_bg.jpg) no-repeat right 0;} .select_this_bg{background:url(sl_bg.jpg) no-repeat right -27px} #option{list-style:none;position:absolute;top:27px;left:-1px;width:200px;border:1px solid #ccc;display:none;background:#fff} #option li{line-height:27px;padding:0 0 0 10px;width:190px} #option li.li_hover{background:#eee} </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"/></script> </head> <body> <div id="box"> <h1>select下拉列表自定义CSS样式</h1> <div id="select"> <div class="select_this"></div> <ul id="option" class="o"> <li>成都</li> <li>北京</li> <li>重庆</li> <li>广州</li> </ul> </div> <div style="width:800px;height:500px;margin:30px auto;background:#ccc"> </div> </div> <script type="text/javascript"> window.onload=function(){ //遍历li，鼠标滑过就给li增加样式 $("#option li").each(function(){ $(this).hover(function(){ $(this).addClass("li_hover"); }, function(){ $(this).removeClass("li_hover"); }); //当点击某一个li时，获取li里的内容，添加到类为select_this的div上 $(this).click(function(){ var text=$(this).text(); $(".select_this").empty(); $(".select_this").append(text); $("#option").hide(); }); }); $("body").click(function(e){ $("#option").hide(); var target=$(e.target); //如果是select_this这个元素触发的click事件，那么就执行下面的动作 if(target.is(".select_this")){ $("#option").show(); $(".select_this").addClass("select_this_bg"); }else{ $(".select_this").removeClass("select_this_bg"); } }); } </script> </body> </html>