<!DOCTYPE html>
<html>
<head>
<title>步骤</title>
<meta http-equiv="Content-Type" content="text/html charset=utf-8">
</head>
<style>
.content {
float: left;
margin: 0;
margin-top: 30px;
font-size: 16px;
width: 580px;
height: auto;
overflow: hidden;
}
.row {
float: left;
margin: 0;
width: 580px;
}
/*圆圈*/
.disc-circle {
width: 50px;
height: 50px;
background-color: #243972;
border-radius: 25px;
margin: 0 auto;
font-size: 16px;
line-height: 50px;
color: #FFFFFF;
text-align: center;
}
/*竖线*/
.vertical-line {
width: 2px;
height: 50px;
/* background-color: #243972;*/
background-color: #C0C1C0;
margin: 0 auto;
overflow: hidden
}
.left-rows {
float: left;
width: 60px;
height: auto;
position: relative;
}
.rows {
float: left;
width: 520px;
height: auto;
padding-left: 25px;
border-left: 2px dashed #E5E5E5;
z-index: -1;
position: absolute;
margin-left: 29px;
}
.row {
float: left;
width: 520px;
height: auto;
}
.d-textarea {
position: relative;
width: 500px;
height: auto;
background: #E5E5E5;
/* border-radius:5px; 圆角 */
margin-left: 15px;
float: left;
}
/*右侧文本框左侧箭头
.d-textarea .arrow {
position:absolute;
top:20px;
left:-16px;
width:0;
height:0;
font-size:0;
border:solid 8px;
border-color:#FFFFFF #E5E5E5 #FFFFFF #FFFFFF;
}*/
.row .d-textarea .d-text {
float: left;
width: 480px;
margin: 10px;
font-size: 16px;
text-align: left;
line-height: 24px;
}
.d-textarea h4 {
float: left;
margin: 0 auto;
width: 480px;
height: auto;
}
.d-textarea p {
float: left;
margin: 0 auto;
width: 480px;
height: auto;
font-weight: 500;
}
</style>
<body>
<div class="content">
<div class="left-rows"></div>
<div class="rows"></div>
</div>
<!--[if lt IE 10]>
<script type="text/javascript" src="js/PIE.js"></script>
<![endif]-->
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
</body>
<script>
//用js 调用：
$(function() {
//文本
var text=new Array();
text["1"]="声声慢·寻寻觅觅|寻寻觅觅，冷冷清清，凄凄惨惨戚戚。乍暖还寒时候，最难将息。三杯两盏淡酒，怎敌他、晚来风急？雁过也，正伤心，却是旧时相识。满地黄花堆积。憔悴损，如今有谁堪摘？守着窗儿，独自怎生得黑？梧桐更兼细雨，到黄昏、点点滴滴。这次第，怎一个愁字了得！";
text["2"]="如梦令·常记溪亭日暮|常记溪亭日暮，沉醉不知归路，兴尽晚回舟，误入藕花深处。争渡，争渡，惊起一滩鸥鹭。";
text["3"]="如梦令·昨夜雨疏风骤|昨夜雨疏风骤，浓睡不消残酒，试问卷帘人，却道海棠依旧。知否，知否，应是绿肥红瘦。 ";
text["4"]="如梦令·谁伴明窗独坐|谁伴明窗独坐，我共影儿俩个。灯尽欲眠时，影也把人抛躲。无那，无那，好个凄凉的我。";
text["5"]="一剪梅·红藕香残玉蕈秋|红藕香残玉蕈秋，轻解罗裳，独上兰舟。云中谁寄锦书来？雁字回时，月满西楼。花自飘零水自流。一种相思，两处闲愁。此情无计可消除。才下眉头，却上心头";text["1"]="声声慢·寻寻觅觅|寻寻觅觅，冷冷清清，凄凄惨惨戚戚。乍暖还寒时候，最难将息。三杯两盏淡酒，怎敌他、晚来风急？雁过也，正伤心，却是旧时相识。满地黄花堆积。憔悴损，如今有谁堪摘？守着窗儿，独自怎生得黑？梧桐更兼细雨，到黄昏、点点滴滴。这次第，怎一个愁字了得！";
text["6"]="如梦令·常记溪亭日暮|常记溪亭日暮，沉醉不知归路，兴尽晚回舟，误入藕花深处。争渡，争渡，惊起一滩鸥鹭。";
text["7"]="如梦令·昨夜雨疏风骤|昨夜雨疏风骤，浓睡不消残酒，试问卷帘人，却道海棠依旧。知否，知否，应是绿肥红瘦。 ";
text["8"]="如梦令·谁伴明窗独坐|谁伴明窗独坐，我共影儿俩个。灯尽欲眠时，影也把人抛躲。无那，无那，好个凄凉的我。";
text["9"]="一剪梅·红藕香残玉蕈秋|红藕香残玉蕈秋，轻解罗裳，独上兰舟。云中谁寄锦书来？雁字回时，月满西楼。花自飘零水自流。一种相思，两处闲愁。此情无计可消除。才下眉头，却上心头";
text["10"]="声声慢·寻寻觅觅|寻寻觅觅，冷冷清清，凄凄惨惨戚戚。乍暖还寒时候，最难将息。三杯两盏淡酒，怎敌他、晚来风急？雁过也，正伤心，却是旧时相识。满地黄花堆积。憔悴损，如今有谁堪摘？守着窗儿，独自怎生得黑？梧桐更兼细雨，到黄昏、点点滴滴。这次第，怎一个愁字了得！";
text["11"]="如梦令·常记溪亭日暮|常记溪亭日暮，沉醉不知归路，兴尽晚回舟，误入藕花深处。争渡，争渡，惊起一滩鸥鹭。";
text["12"]="如梦令·昨夜雨疏风骤|昨夜雨疏风骤，浓睡不消残酒，试问卷帘人，却道海棠依旧。知否，知否，应是绿肥红瘦。 ";
text["13"]="如梦令·谁伴明窗独坐|谁伴明窗独坐，我共影儿俩个。灯尽欲眠时，影也把人抛躲。无那，无那，好个凄凉的我。";
text["14"]="一剪梅·红藕香残玉蕈秋|红藕香残玉蕈秋，轻解罗裳，独上兰舟。云中谁寄锦书来？雁字回时，月满西楼。花自飘零水自流。一种相思，两处闲愁。此情无计可消除。才下眉头，却上心头";
text["15"]="声声慢·寻寻觅觅|寻寻觅觅，冷冷清清，凄凄惨惨戚戚。乍暖还寒时候，最难将息。三杯两盏淡酒，怎敌他、晚来风急？雁过也，正伤心，却是旧时相识。满地黄花堆积。憔悴损，如今有谁堪摘？守着窗儿，独自怎生得黑？梧桐更兼细雨，到黄昏、点点滴滴。这次第，怎一个愁字了得！";
text["16"]="如梦令·常记溪亭日暮|常记溪亭日暮，沉醉不知归路，兴尽晚回舟，误入藕花深处。争渡，争渡，惊起一滩鸥鹭。";
text["17"]="如梦令·昨夜雨疏风骤|昨夜雨疏风骤，浓睡不消残酒，试问卷帘人，却道海棠依旧。知否，知否，应是绿肥红瘦。 ";
text["18"]="如梦令·谁伴明窗独坐|谁伴明窗独坐，我共影儿俩个。灯尽欲眠时，影也把人抛躲。无那，无那，好个凄凉的我。";
text["19"]="一剪梅·红藕香残玉蕈秋|红藕香残玉蕈秋，轻解罗裳，独上兰舟。云中谁寄锦书来？雁字回时，月满西楼。花自飘零水自流。一种相思，两处闲愁。此情无计可消除。才下眉头，却上心头";
//遍历展示内容
var html1="";
var html2="";
for(var key in text){
html1 += '<div id="' + key + 'year"><div class="disc-circle">' + key + '</div></div>';
html2+='<div class="row" id="'+key+'row">';
html2+='<div class="d-textarea" id="'+key+'area">';
html2+='<div class="arrow"></div>';
html2+='<div class="d-text">';
var str=text[key];
var arr=str.split("@");
for(var i=0;i<arr.length;i++){
var str2=arr[i];
var arr2=str2.split("|");
html2+='<h4>'+arr2[0]+'<h4>';
var textStr=arr2[1];
var textArr=textStr.split("^");
for(var j=0;j<textArr.length;j++){
html2+='<p>'+textArr[j]+'</p>';
}
}
html2+='</div>';
html2+='</div>';
html2+='</div>';
}
html1+='<div class="d-textarea" style="visibility:hidden"></div>';
$(".left-rows").html(html1);
$(".rows").html(html2);
for(var key in text){
var default_h=50;//默认高度
var h= $("#"+key+"area").height();
if(h < 50){
h=default_h;
}
$("#"+key+"row").css("height",(h+50)+"px");
$("#" + key + "year").css("height", h + 50 + "px");
}
if (window.PIE) {
$('.disc-circle').each(function() {
PIE.attach(this);
});
}
//鼠标滑动效果
var maxnum = 8;//最多出现8个贴在一块儿
var heightarrs = [];
$('.row').each(function (i) {
heightarrs.push($(this).offset().top - (i <= maxnum ? i : 8) * 50)
//控制高度的计算，减去顶部固定高度，每一个开始固定的位置根据前面已固定的个数来
});
$(window).scroll(function () {
var fixedarrs = [];//需要定位的下标
var hidearrs = [];//需要隐藏的下标，超过8个时，隐藏前面的
var scrolltop = $(this).scrollTop();
heightarrs.some(function (v, i) {
if (v <= scrolltop) {
if (fixedarrs.length >= maxnum) {
hidearrs.push(fixedarrs.shift())
}
fixedarrs.push(i);
if (i === heightarrs.length - 1) { //当遇到最后row时，不再计算
scrolltop=heightarrs[i]
}
} else {
return true;
}
});
$('.disc-circle').attr('style', '');//重置样式
fixedarrs.forEach(function (v, i) {
if(i < fixedarrs.length - 1){
$('.disc-circle').eq(v).css({
position: 'absolute',
top: scrolltop - heightarrs[0] + i * 50,
left: 5,
background:'#D2D2D3'
});
}else if (i === fixedarrs.length - 1) {
$('.disc-circle').eq(v).css({
position: 'absolute',
top: scrolltop - heightarrs[0] + i * 50,
left: 5,
background:'#243972'
});
}
});
hidearrs.forEach(function (v) {
$('.disc-circle').eq(v).hide();
})
});
});
</script>
</html>
浙公网安备 33010602011771号