一、面包屑导航
说起这个面包屑导航,首先给大家展示一下我们今天要创作的这个面包屑导航长什么样
作为一个前端er,你想如何实现这个效果呢?
当然,用图片的方式表示导航是最容易实现的,默认没选中的导航就是淡色(#f0f0f0)导航,在每次有一个导航被选中时,我们换一个相对特别的颜色(#FE993F)导航来表示它被选中,假设真的用图片,我们可能会用多少张图片呢?中间的导航我们可能可以使用同一个图片,第一个和第二个的图片不一样,用filter或者inverse,可能使得选中和非选中的导航图片使用同一个,你当然知道,根据雅虎军规十四条法则,为了提高网页性能,在我们的网页中,最好少点使用图片,那么问题来了,用html+css能否实现这个效果呢?看下面的代码
首先是css
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif, "微软雅黑";}
/* demo */
.demo{width:600px;margin:100px auto;background:#f0f0f0;position:relative;}
/*修改上面的background我们可以修改默认的未选中导航的颜色*/
.demo ul{height:32px;overflow:hidden;}
.demo li{float:left;width:200px;text-align:center;position:relative;z-index:2;font-weight:bold;font-size:14px;line-height:32px;}
/*如果你改变了导航的宽度和高度,你可能会需要修改下面两行right top border-width等的值*/
.demo li em{position:absolute;right:-24px;top:-8px;width:0;height:0;line-height:0;border-width:24px 0 24px 24px;border-color:transparent transparent transparent #fff;border-style:dashed dashed dashed solid;}
.demo li i{position:absolute;right:-16px;top:0;width:0;height:0;line-height:0;border-width:16px 0 16px 16px;border-color:transparent transparent transparent #f0f0f0;border-style:dashed dashed dashed solid;}
/*下面两行是修改选中导航的颜色,记得两个都是要修改的*/
.demo li.current{background:#FE993F;color:#fff;z-index:1;}
.demo li.current i{border-color:transparent transparent transparent #FE993F;}
接着是html布局
<div class="demo">
<ul class="clearfix">
<li>导航1<em></em><i></i></li>
<li class="current">导航2<em></em><i></i></li>
<li>导航3<em></em><i></i></li>
</ul>
</div>
然后你就会看到我在文章初贴的那张图了
二、文字上下滚动
同样还是先看下效果图
html部分
<div class="may1st-part1-right-name-box">
<table class="may1st-part1-right-name-table" style="margin-top:-10px;">
<tr>
<td class="may1st-part1-column1">138****2555</td>
<td class="may1st-part1-column2">14:32</td>
<td class="may1st-part1-column3">test test test</td>
</tr>
<tr>
<td class="may1st-part1-column1">138****2555</td>
<td class="may1st-part1-column2">14:32</td>
<td class="may1st-part1-column3">test test test</td>
</tr>
</table>
</div>
要说明的是,如果使用本文章中的代码,需要你使用这个html的结构,table tr td的结构。
css 部分主要是控制样式,你可以有自己的样式
.may1st-part1-right-name-box{
height: 360px;
width: 325px;
margin: 0 auto;
background: #fff;
box-shadow: 0 15px 15px #ccc inset ;
border-left: 1px solid #7F3808;
border-right: 1px solid #7F3808;
border-bottom: 1px solid #7F3808;
overflow: hidden;
}
.may1st-part1-right-name-table{
text-align: left;
vertical-align: middle;
font-size: 14px;
color: #333;
width: 98%;
margin: 0 auto;
}
.may1st-part1-right-name-table td{
height: 32px;
}
.may1st-part1-column1{
width: 30%;
}
.may1st-part1-column2{
width: 22%;
}
.may1st-part1-column3{
width: 48%;
}
最总要的当时是js部分了
(function ($) {
$.fn.myScroll = function (options) {
//默认配置
var defaults = {
speed: 40, //滚动速度,值越大速度越慢
rowHeight: 41 //每行的高度
};
var opts = $.extend({}, defaults, options), intId = [];
function marquee(obj, step) {
obj.find("table").animate({
marginTop: '-=1'
}, 0, function () {
var s = Math.abs(parseInt($(this).css("margin-top")));
if (s >= step) {
$(this).find("tr").slice(0, 1).appendTo($(this));
$(this).css("margin-top", 0);
}
});
}
this.each(function (i) {
var sh = opts["rowHeight"], speed = opts["speed"], _this = $(this);
intId[i] = setInterval(function () {
if (_this.find("table").height() <= _this.height()) {
clearInterval(intId[i]);
} else {
marquee(_this, sh);
}
}, speed);
_this.hover(function () {
clearInterval(intId[i]);
}, function () {
intId[i] = setInterval(function () {
if (_this.find("table").height() <= _this.height()) {
clearInterval(intId[i]);
} else {
marquee(_this, sh);
}
}, speed);
});
});
}
})(jQuery);
$(document).ready(function(){
$(".may1st-part1-right-name-box").myScroll({
speed: 40,
rowHeight: 33
});
});