深入理解CSS计数器
2015-12-05 09:34
609 查看
目录
[1]创建计数器[2]使用计数器 [3]DEMO
[注意]如果不设置<integer>,则默认重置为0
[注意]如果不设置<integer>,则默认递增为1
【关于计数器风格详见下面演示框】
<演示框>点击下列相应属性值可进行演示
代码查看
<演示框>点击下列相应属性值可进行演示
// var all = document.getElementById('cnblogs_post_body').children;
var select = [];
for(var i = 1; i < all.length; i++){
if(all[i].getAttribute('id')){
if(all[i].getAttribute('id').match(/anchor\d/)){
select.push(all[i]);
}
}
}
var wheel = function(e){
e = e || event;
var data;
if(e.wheelDelta){
data = e.wheelDelta;
}else{
data = -e.detail * 40;
}
for(var i = 0; i < select.length; i++){
if(select[i].getBoundingClientRect().top > 0){
return;
}
if(select[i].getBoundingClientRect().top <= 0 && select[i+1]){
if(select[i+1].getBoundingClientRect().top > 0){
change(oCon.children[i+1])
}
}else{
change(oCon.children[select.length])
}
}
}
document.body.onmousewheel = wheel;
document.body.addEventListener('DOMMouseScroll',wheel,false);
var oCon = document.getElementById("content");
for(var i = 1; i < oCon.children.length; i++){
oCon.children[i].onmouseover = function(){
this.style.color = '#3399ff';
}
oCon.children[i].onmouseout = function(){
this.style.color = 'inherit';
if(this.mark){
this.style.color = '#3399ff';
}
}
oCon.children[i].onclick = function(){
change(this);
}
}
function change(_this){
for(var i = 1; i < oCon.children.length; i++){
oCon.children[i].mark = false;
oCon.children[i].style.color = 'inherit';
oCon.children[i].style.textDecoration = 'none';
oCon.children[i].style.borderColor = 'transparent';
}
_this.mark = true;
_this.style.color = '#3399ff';
_this.style.textDecoration = 'underline';
_this.style.borderColor = '#2175bc';
}
// ]]>
[1]创建计数器[2]使用计数器 [3]DEMO
前面的话
我们对计数器已经不陌生了,有序列表中的列表项标志就是计数器。创建计数器
创建计数器的基础包括两个方面,一是能重置计数器的起点,二是能将其递增一定的量。counter-reset
counter-reset:none;(默认) counter-reset:<identifier><integer> //<identifier>是计数器标识符,是创作人员自己起的一个名字 //<integer>是重置的数字
counter-reset: c1 4;//表示将c1的计数器重置为4 counter-reset: c1 4 c2 0 c3 -5;//表示将c1重置为4,将c2重置为0,将c3重置为-5 couter-reset: c1;//将c1重置为0
[注意]如果不设置<integer>,则默认重置为0
counter-increment
counter-increment:none;(默认) counter-increment:<identifier><integer> //<identifier>是计数器标识符,是创作人员自己起的一个名字 //<integer>是递增的数字
counter-increment: c1 4;//表示将c1计数器的递增设为4 counter-reset: c1 4 c2 0 c3 -5;//表示将c1递增设为4,将c2递增设为0,将c3递增设为-5 couter-increment: c1;//将c1计数器的递增设为1
[注意]如果不设置<integer>,则默认递增为1
使用计数器
具体使用计数器需要结合使用content属性和counter()函数counter()函数
counter()函数接受两个参数,而且两参数之间用逗号(,)来分隔,第一个参数是计数器标识符,第二个参数设置计数器风格(可省略),与列表中list-style-type值相同。同样的,可以使用多个counter()函数。content: counter(c1,upper-roman);//表示使用大写罗马字母格式的计数器c1
【关于计数器风格详见下面演示框】
<演示框>点击下列相应属性值可进行演示
DEMO
简单计数器演示
<演示框>点击下列相应属性值可进行演示代码查看
层级目录演示
<div id="oShow"> <h2>第一章</h2> <h3>第一部分</h3> <p>第一节</p> <p>第二节</p> <h3>第二部分</h3> <p>第一节</p> <h2>第二章</h2> <h3>第一部分</h3> <p>第一节</p> <p>第二节</p> <h3>第二部分</h3> <p>第一节</p> <h2>第三章</h2> <h3>第一部分</h3> <p>第一节</p> <p>第二节</p> <h3>第二部分</h3> <p>第一节</p> </div>
body,h2,h3,p{ margin: 0; } #oShow{ counter-reset: c2; } #oShow h2{ counter-reset: c3 cp; counter-increment: c2; } #oShow h3{ counter-increment: c3; counter-reset: cp; text-indent: 2em; } #oShow p{ counter-increment: cp; text-indent: 4em; } #oShow h2:before{ content: counter(c2); } #oShow h3:before{ content: counter(c2) '.' counter(c3); } #oShow p:before{ content: counter(c2) '.' counter(c3) '.' counter(cp); }
<演示框>点击下列相应属性值可进行演示
// var all = document.getElementById('cnblogs_post_body').children;
var select = [];
for(var i = 1; i < all.length; i++){
if(all[i].getAttribute('id')){
if(all[i].getAttribute('id').match(/anchor\d/)){
select.push(all[i]);
}
}
}
var wheel = function(e){
e = e || event;
var data;
if(e.wheelDelta){
data = e.wheelDelta;
}else{
data = -e.detail * 40;
}
for(var i = 0; i < select.length; i++){
if(select[i].getBoundingClientRect().top > 0){
return;
}
if(select[i].getBoundingClientRect().top <= 0 && select[i+1]){
if(select[i+1].getBoundingClientRect().top > 0){
change(oCon.children[i+1])
}
}else{
change(oCon.children[select.length])
}
}
}
document.body.onmousewheel = wheel;
document.body.addEventListener('DOMMouseScroll',wheel,false);
var oCon = document.getElementById("content");
for(var i = 1; i < oCon.children.length; i++){
oCon.children[i].onmouseover = function(){
this.style.color = '#3399ff';
}
oCon.children[i].onmouseout = function(){
this.style.color = 'inherit';
if(this.mark){
this.style.color = '#3399ff';
}
}
oCon.children[i].onclick = function(){
change(this);
}
}
function change(_this){
for(var i = 1; i < oCon.children.length; i++){
oCon.children[i].mark = false;
oCon.children[i].style.color = 'inherit';
oCon.children[i].style.textDecoration = 'none';
oCon.children[i].style.borderColor = 'transparent';
}
_this.mark = true;
_this.style.color = '#3399ff';
_this.style.textDecoration = 'underline';
_this.style.borderColor = '#2175bc';
}
// ]]>
相关文章推荐
- css的定位,relative/absolute/fixed的用法
- CSS初学者之---css命名规范
- CSS3透明属性opacity
- CSS选择器性能
- CSS3之position
- CSS属性和值--备份
- [CSS3] Selector 选择器
- CSS标准盒子模型
- CSS基础学习十九:CSS布局之图文混排,图像签名,多图拼接和图片特效
- CSS设置字体
- HTML CSS之FORM
- css3--布局正六边形
- WPF编程——样式
- CSS权威指南学习笔记--Chapter2 选择器
- CSS3 垂直居中 左右居中
- 史上最全HTML与CSS布局技巧
- CSS布局奇淫技巧之--各种居中
- 如何使用css3绘制任意角度扇形+动画
- [CSS3] 渐进增强 & 优雅降级
- css相关笔记