從今天起開始筆記以天來計算，今天是學(xué)習(xí)JS特效第三天，以天來記錄也比較整齊。
這幾個案例都是環(huán)環(huán)相扣，前面的不會，后面的就不用說啦。前面一通，后面你懂得。
第一個案例：淘寶樓層跳躍
樓層跳躍京東和淘寶都是有的。后來京東首頁取消啦。
效果展示：
Gif_20181207_233243.gif
重點(diǎn)是要理解為什么要這樣做。
源代碼：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
body,html {
height: 100%;
}
ul {
list-style: none;
height: 100%;
}
ul li {
height: 100%;
}
ol {
list-style: none;
position: fixed;
top: 80px;
left: 50px;
}
ol li {
width: 50px;
height: 50px;
border: 1px solid #000;
text-align: center;
line-height: 50px;
margin-top: -1px;
cursor: pointer;
}
</style>
</head>
<body>
<ul>
<li>鞋子區(qū)域</li>
<li>襪子區(qū)域</li>
<li>褲子區(qū)域</li>
<li>裙子區(qū)域</li>
<li>帽子區(qū)域</li>
</ul>
<ol>
<li>鞋子</li>
<li>襪子</li>
<li>褲子</li>
<li>裙子</li>
<li>帽子</li>
</ol>
<script>
//需求：點(diǎn)擊ol中的li，屏幕滑動到對應(yīng)的ul中的li的范圍。
//思路：還是利用window.scrollTo();利用緩動動畫原理實(shí)現(xiàn)屏幕滑動。
//步驟：
//0.獲取元素
//1.指定ul和ol中的li的背景色，對應(yīng)的li背景色相同
//2.老三步。(獲取元素并綁定事件)
//3.利用緩動動畫原理實(shí)現(xiàn)屏幕滑動
//4.用scroll事件模擬盒子距離最頂端的距離。
//0.獲取元素
var ul = document.getElementsByTagName("ul")[0];
var ol = document.getElementsByTagName("ol")[0];
var ulLiArr = ul.children;
var olLiArr = ol.children;
var target = 0;var leader = 0;var timer = null;
//1.指定ul和ol中的li的背景色，對應(yīng)的li背景色相同
//設(shè)置一個數(shù)組，里面裝顏色，然指定的顏色給數(shù)組中的指定元素
var arrColor = ["pink","blue","yellow","orange","green"];
//利用for循環(huán)給兩個數(shù)組的元素上色
for(var i=0;i<arrColor.length;i++){
//上色
ulLiArr[i].style.backgroundColor = arrColor[i];
olLiArr[i].style.backgroundColor = arrColor[i];
//屬性綁定索引值
olLiArr[i].index = i;
//2.老三步。(并綁定事件)循環(huán)綁定，為每一個li綁定點(diǎn)擊事件
olLiArr[i].onclick = function () {
//***獲取目標(biāo)位置
//獲取索引值。
target = ulLiArr[this.index].offsetTop;
console.log(target);
//要用定時器，先清除定時器
clearInterval(timer);
//3.利用緩動動畫原理實(shí)現(xiàn)屏幕滑動
timer = setInterval(function () {
//(1).獲取步長
var step = (target-leader)/10;
//(2).二次處理步長
step = step>0?Math.ceil(step):Math.floor(step);
//(3).屏幕滑動
leader = leader + step;
window.scrollTo(0,leader);
//(4).清除定時器
if(Math.abs(target-leader)<=Math.abs(step)){
window.scrollTo(0,target);
clearInterval(timer);
}
},25);
}
}
//4.用scroll事件模擬盒子距離最頂端的距離。
window.onscroll = function () {
//每次屏幕滑動，把屏幕卷去的頭部賦值給leader,模擬獲取顯示區(qū)域距離頂部的距離
leader = scroll().top;
}
function scroll() { // 開始封裝自己的scrollTop
if(window.pageYOffset != null) { // ie9+ 高版本瀏覽器
// 因?yàn)?window.pageYOffset 默認(rèn)的是 0 所以這里需要判斷
return {
left: window.pageXOffset,
top: window.pageYOffset
}
}
else if(document.compatMode === "CSS1Compat") { // 標(biāo)準(zhǔn)瀏覽器 來判斷有沒有聲明DTD
return {
left: document.documentElement.scrollLeft,
top: document.documentElement.scrollTop
}
}
return { // 未聲明 DTD
left: document.body.scrollLeft,
top: document.body.scrollTop
}
}
</script>
</body>
</html>
第二個案例:元素跟隨鼠標(biāo)
效果秀
鼠標(biāo)跟隨
- 知識點(diǎn)：
DOM上的某個事件觸發(fā)時，JS機(jī)制會產(chǎn)生一個事件對象event。
這個對象中包含著所有與事件有關(guān)的信息。
所有瀏覽器都支持event對象，但支持的方式不同。
ie 678 支持 window.event 但不支持形參。
其它瀏覽器window.event和形參都支持，看下面代碼：
<script>
var bodyC=document.body;
bodyC.style.cssText="width:3000px;height:3000px"http://必須要讓BODY有內(nèi)容，否則就是一個點(diǎn)。鬼才能點(diǎn)到。
bodyC.onclick=function(event){
//console.log(window.event)ie 678 支持這個
//console.log(event)其它瀏覽器支持這個
// 兼容寫法
event=event||window.event;
console.log(event);
}
</script>
生成的mouseEvent,本身也是個對象，可以調(diào)用上面的屬性
先把這三個屬性搞清楚
event.pageY 鼠標(biāo)到這個網(wǎng)頁最頂部的距離
event.scrollY 鼠標(biāo)到這個屏幕最頂部的距離
event.clientY 鼠標(biāo)到這個瀏覽器可視區(qū)域最頂部的距離(一般就是書簽欄下面)
不知道你們能不能看懂
源代碼：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
body {
height: 5000px;
}
img {
position: absolute;
padding: 10px 0;
border: 1px solid #ccc;
cursor: pointer;
}
</style>
</head>
<body>
<img src="images/img.jpg" width="100"/>
<script>
//需求：點(diǎn)擊頁面的任何地方，圖片跟隨鼠標(biāo)移動到點(diǎn)擊位置。
//思路：獲取鼠標(biāo)在頁面中的位置，然圖片緩慢運(yùn)動到鼠標(biāo)點(diǎn)擊的位置。
// 兼容ie67做pageY和pageX；
// 原理： 鼠標(biāo)在頁面的位置 = 被卷去的部分+可視區(qū)域部分。
//步驟：
//1.老三步。
//2.獲取鼠標(biāo)在頁面中的位置。
//3.利用緩動原理，慢慢的運(yùn)動到指定位置。（包括左右和上下）
//1.老三步。
var img = document.getElementsByTagName("img")[0];
var timer = null;
var targetx = 0;var targety = 0;
var leaderx = 0;var leadery = 0;
//給整個文檔綁定點(diǎn)擊事件獲取鼠標(biāo)的位置。
document.onclick = function (event) {
//新五步
//兼容獲取事件對象
event = event || window.event;
//鼠標(biāo)在頁面的位置 = 被卷去的部分+可視區(qū)域部分。
var pagey = event.pageY || scroll().top + event.clientY;
var pagex = event.pageX || scroll().left + event.clientX;
//要用定時器，先清定時器
// targety = pagey-img.offsetHeight/2;
// targetx = pagex-img.offsetWidth/2;
targety = pagey-30;
targetx = pagex-50;
clearInterval(timer);
timer = setInterval(function () {
//為盒子的位置獲取值
leaderx = img.offsetLeft;
leadery = img.offsetTop;
//獲取步長
var stepx = (targetx-leaderx)/10;
var stepy = (targety-leadery)/10;
//二次處理步長
stepx = stepx>0?Math.ceil(stepx):Math.floor(stepx);
leaderx = leaderx + stepx;
stepy = stepy>0?Math.ceil(stepy):Math.floor(stepy);
leadery = leadery + stepy;
//賦值
img.style.left = leaderx + "px";
img.style.top = leadery + "px";
//清定時器
if(Math.abs(targety-img.offsetTop)<=Math.abs(stepy) && Math.abs(targetx-img.offsetLeft)<=Math.abs(stepx)){
img.style.top = targety + "px";
img.style.left = targetx + "px";
clearInterval(timer);
}
},30);
}
</script>
</body>
</html>
第三個案例
效果秀
獲取鼠標(biāo)在盒子里的位置
獲取方法就是鼠標(biāo)到頁面的距離-這個div到頁面的距離。
源代碼：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.box {
width: 300px;
height: 200px;
padding-top: 100px;
background-color: pink;
margin: 100px;
text-align: center;
font: 18px/30px "simsun";
cursor: pointer;
}
</style>
</head>
<body>
<div class="box">
</div>
<script src="animate.js"></script>
<script>
var div = document.getElementsByTagName("div")[0];
div.onmousemove = function (event) {
event = event || window.event;
//2.獲取鼠標(biāo)在整個頁面的位置
var pagex = event.pageX || scroll().left + event.clientX;
var pagey = event.pageY || scroll().top + event.clientY;
//4.用鼠標(biāo)的位置減去盒子的位置賦值給盒子的內(nèi)容。
var targetx = pagex - div.offsetLeft;
var targety = pagey - div.offsetTop;
this.innerHTML = "X坐標(biāo)為："+targetx+"px;<br>Y坐標(biāo)為："+targety+"px;"
}
</script>
</body>
</html>
第四個案例 產(chǎn)品放大鏡
難點(diǎn) 比例問題
需要知道以下技術(shù)點(diǎn)：
onmousedown 鼠標(biāo)按下
onmouseup 鼠標(biāo)彈起
效果秀：
是不是很熟悉
源碼：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 350px;
height: 350px;
margin:100px;
border: 1px solid #ccc;
position: relative;
}
.big {
width: 400px;
height: 400px;
position: absolute;
top: 0;
left: 360px;
border: 1px solid #ccc;
overflow: hidden;
display: none;
}
.mask {
width: 175px;
height: 175px;
background: rgba(255, 255, 0, 0.4);
position: absolute;
top: 0;
left: 0;
cursor: move;
display: none;
}
.small {
position: relative;
}
img {
vertical-align: top;
}
</style>
<script src="animate.js"></script>
<script>
window.onload = function () {
//需求：鼠標(biāo)放到小盒子上，讓大盒子里面的圖片和我們同步等比例移動。
//技術(shù)點(diǎn)：onmouseenter==onmouseover 第一個不冒泡
//技術(shù)點(diǎn)：onmouseleave==onmouseout 第一個不冒泡
//步驟：
//1.鼠標(biāo)放上去顯示盒子，移開隱藏盒子。
//2.老三步和新五步（黃盒子跟隨移動）
//3.右側(cè)的大圖片，等比例移動。
//0.獲取相關(guān)元素
var box = document.getElementsByClassName("box")[0];
var small = box.firstElementChild || box.firstChild;
var big = box.children[1];
var mask = small.children[1];
var bigImg = big.children[0];
//1.鼠標(biāo)放上去顯示盒子，移開隱藏盒子。(為小盒子綁定事件)
small.onmouseenter = function () {
//封裝好方法調(diào)用：顯示元素
show(mask);
show(big);
}
small.onmouseleave = function () {
//封裝好方法調(diào)用：隱藏元素
hide(mask);
hide(big);
}
//2.老三步和新五步（黃盒子跟隨移動）
//綁定的事件是onmousemove，而事件源是small(只要在小盒子上移動1像素，黃盒子也要跟隨)
small.onmousemove = function (event) {
//想移動黃盒子，必須知道鼠標(biāo)在small中的位置。x作為mask的left值，y作mask的top值。
//新五步
event = event || window.event;
var pagex = event.pageX || scroll().left + event.clientX;
var pagey = event.pageY || scroll().top + event.clientY;
//讓鼠標(biāo)在黃盒子最中間，減去黃盒子寬高的一半
var x = pagex - box.offsetLeft - mask.offsetWidth/2;
var y = pagey - box.offsetTop - mask.offsetHeight/2;
//限制換盒子的范圍
//left取值為大于0，小盒子的寬-mask的寬。
if(x<0){
x = 0;
}
if(x>small.offsetWidth-mask.offsetWidth){
x = small.offsetWidth-mask.offsetWidth;
}
//top同理。
if(y<0){
y = 0;
}
if(y>small.offsetHeight-mask.offsetHeight){
y = small.offsetHeight-mask.offsetHeight;
}
//移動黃盒子
console.log(small.offsetHeight);
mask.style.left = x + "px";
mask.style.top = y + "px";
//3.右側(cè)的大圖片，等比例移動。
//如何移動大圖片？等比例移動。
// 大圖片/大盒子 = 小圖片/mask盒子
// 大圖片走的距離/mask走的距離 = （大圖片-大盒子）/（小圖片-黃盒子）
// var bili = (bigImg.offsetWidth-big.offsetWidth)/(small.offsetWidth-mask.offsetWidth);
//大圖片走的距離/mask盒子都的距離 = 大圖片/小圖片
var bili = bigImg.offsetWidth/small.offsetWidth;
var xx = bili*x;
var yy = bili*y;
bigImg.style.marginTop = -yy+"px";
bigImg.style.marginLeft = -xx+"px";
}
}
</script>
</head>
<body>
<div class="box">
<div class="small">
<img src="images/001.jpg" alt=""/>
<div class="mask"></div>
</div>
<div class="big">
<img src="images/0001.jpg" alt=""/>
</div>
</div>
</body>
</html>
第五個案例 可以拖拽的盒子
效果圖：
Gif_20181207_233157.gif
知識點(diǎn)：
//禁止文本選中（選中后取消）
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
還有兩個新事件：
onmousedown 鼠標(biāo)按下
onmouseup 鼠標(biāo)松開
源碼：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
.nav {
height: 30px;
background: #036663;
border-bottom: 1px solid #369;
line-height: 30px;
padding-left: 30px;
}
.nav a {
color: #fff;
text-align: center;
font-size: 14px;
text-decoration: none;
}
.d-box {
width: 400px;
height: 300px;
border: 5px solid #eee;
box-shadow: 2px 2px 2px 2px #666;
position: absolute;
top: 40%;
left: 40%;
}
.hd {
width: 100%;
height: 25px;
background-color: #7c9299;
border-bottom: 1px solid #369;
line-height: 25px;
color: white;
cursor: move;
}
#box_close {
float: right;
cursor: pointer;
}
</style>
<script src="animate.js"></script>
<script>
window.onload = function () {
//需求：在指定位置按住鼠標(biāo)左鍵移動對話框。
//分析：鼠標(biāo)按下，觸動事件，移動在更換對話框的位置。
//鼠標(biāo)按下onmousedown 鼠標(biāo)彈起:onmouseup 鼠標(biāo)移動onmousemove
//步驟：
//1.老三步和新五步
//2.把鼠標(biāo)的坐標(biāo)賦值給對話框。
var box = document.getElementById("d_box");
var drop = document.getElementById("drop");
//1.老三步和新五步
//先按下，在移動觸動此事件
drop.onmousedown = function (event) {
//獲取鼠標(biāo)在盒子中的坐標(biāo)，將來移動的時候減去保證鼠標(biāo)在盒子的指定位置
event = event || window.event;
var pagex = event.pageX || scroll().left + event.clientX;
var pagey = event.pageY || scroll().top + event.clientY;
// 先獲取鼠標(biāo)在盒子中的坐標(biāo)，后面再減去
var x = pagex - box.offsetLeft;
var y = pagey - box.offsetTop;
document.onmousemove = function (event) {
//2.把鼠標(biāo)的坐標(biāo)賦值給對話框。
event = event || window.event;
var xx = event.pageX || scroll().left + event.clientX;
var yy = event.pageY || scroll().top + event.clientY;
//二次操作鼠標(biāo)位置 減去鼠標(biāo)在盒子中的坐標(biāo)；
// 為什么要減去呢，因?yàn)閎ox.style.left 是以最左邊的值為準(zhǔn)，top也是
xx = xx - x;
yy = yy - y;
//給box賦值
box.style.left = xx+"px";
box.style.top = yy+"px";
//禁止文本選中（選中后取消）
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
}
}
//事件解綁
drop.onmouseup = function () {
//解綁
document.onmousemove = null;
}
}
</script>
</head>
<body>
<!--頂部注冊部分，無用-->
<div class="nav">
<a href="javascript:;" id="register">注冊信息</a>
</div>
<!--我們移動的對話框-->
<div class="d-box" id="d_box">
<div class="hd" id="drop">
<i>注冊信息 (可以拖拽)</i>
<span id="box_close">【關(guān)閉】</span>
</div>
<div class="bd"></div>
</div>
</body>
</html>
第六個案例 自己制作滾動條
我做的很丑，你可以搞得漂亮一點(diǎn)。
效果圖：
Gif_20181207_233125.gif
源碼：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 300px;
height: 500px;
border: 1px solid red;
box-sizing: border-box;
margin: 50px auto;
overflow: hidden;
position: relative;
}
.scroll {
width: 20px;
height: 500px;
background-color: #ccc;
position: absolute;
top: 0;
right: 0;
}
.bar {
width: 20px;
background-color: red;
border-radius: 10px;
cursor: pointer;
position: absolute;
top: 0;
}
.content {
padding: 15px;
}
</style>
<script src="animate.js"></script>
<script>
window.onload = function () {
//需求：模擬滾動條，鼠標(biāo)拖動滾動條，滾動條動，而且內(nèi)容等比例聯(lián)動。
//步驟：
//1.根據(jù)內(nèi)容和盒子的比例確定bar的高。
//2.綁定事件（鼠標(biāo)按下，然后移動）
//3.鼠標(biāo)移動，bar聯(lián)動
//4.內(nèi)容等比例聯(lián)動
//0.獲取相關(guān)元素
var box = document.getElementById("box");
var content = box.children[0];
var scroll = box.children[1];
var bar = scroll.children[0];
//1.根據(jù)內(nèi)容和盒子的比例確定bar的高。
//內(nèi)容的高/盒子的高 = scroll的高/bar的高
//bar的高 = 盒子的高*scroll的高/內(nèi)容的高
var barHeight = box.offsetHeight*scroll.offsetHeight/content.offsetHeight;
bar.style.height = barHeight + "px";
//2.綁定事件（鼠標(biāo)按下，然后移動）
bar.onmousedown = function (event) {
event = event || window.event;
var pageyy = event.pageY || scroll().top + event.clientY;
var y = pageyy - bar.offsetTop;
//模擬拖拽案例
document.onmousemove = function (event) {
//新五步獲取鼠標(biāo)在頁面的位置。
event = event || window.event;
var pagey = event.pageY || scroll().top + event.clientY;
//鼠標(biāo)的位置-鼠標(biāo)在盒子中的位置。
pagey = pagey - y;
//限制y的取值。大于0，小于scroll的高度-bar的高度
if(pagey<0){
pagey = 0;
}
if(pagey>scroll.offsetHeight-bar.offsetHeight){
pagey = scroll.offsetHeight-bar.offsetHeight;
}
//3.鼠標(biāo)移動，bar聯(lián)動
bar.style.top = pagey + "px";
//4.內(nèi)容等比例聯(lián)動
//高級比例： 內(nèi)容走的距離/bar走的距離 = （內(nèi)容的高-大盒子的高）/（scroll的高-bar的高）
var s = pagey *(content.offsetHeight-box.offsetHeight)/(scroll.offsetHeight-bar.offsetHeight);
//s賦值給content。通過marginTop負(fù)值移動content
content.style.marginTop = -s+"px";
//讓被選文字清除。
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
}
}
//事件解綁
document.onmouseup = function () {
document.onmousemove = null;
}
}
</script>
</head>
<body>
<div class="box" id="box">
<div class="content">
孩兒勵志出湘關(guān)，學(xué)不成名終不還。<br>
埋骨何須桑梓地，人生無處不青山。<br>
孩兒勵志出湘關(guān)，學(xué)不成名終不還。<br>
埋骨何須桑梓地，人生無處不青山。<br>
孩兒勵志出湘關(guān)，學(xué)不成名終不還。<br>
埋骨何須桑梓地，人生無處不青山。<br>
孩兒勵志出湘關(guān)，學(xué)不成名終不還。<br>
埋骨何須桑梓地，人生無處不青山。<br>
孩兒勵志出湘關(guān)，學(xué)不成名終不還。<br>
埋骨何須桑梓地，人生無處不青山。<br>
孩兒勵志出湘關(guān)，學(xué)不成名終不還。<br>
埋骨何須桑梓地，人生無處不青山。<br>
孩兒勵志出湘關(guān)，學(xué)不成名終不還。<br>
埋骨何須桑梓地，人生無處不青山。<br>
孩兒勵志出湘關(guān)，學(xué)不成名終不還。<br>
埋骨何須桑梓地，人生無處不青山。<br>
孩兒勵志出湘關(guān)，學(xué)不成名終不還。<br>
埋骨何須桑梓地，人生無處不青山。<br>
孩兒勵志出湘關(guān)，學(xué)不成名終不還。<br>
埋骨何須桑梓地，人生無處不青山。<br>
孩兒勵志出湘關(guān)，學(xué)不成名終不還。<br>
埋骨何須桑梓地，人生無處不青山。<br>
孩兒勵志出湘關(guān)，學(xué)不成名終不還。<br>
埋骨何須桑梓地，人生無處不青山。<br>
孩兒勵志出湘關(guān)，學(xué)不成名終不還。<br>
埋骨何須桑梓地，人生無處不青山。<br>
孩兒勵志出湘關(guān)，學(xué)不成名終不還。<br>
埋骨何須桑梓地，人生無處不青山。<br>
孩兒勵志出湘關(guān)，學(xué)不成名終不還。<br>
埋骨何須桑梓地，人生無處不青山。<br>
孩兒勵志出湘關(guān)，學(xué)不成名終不還。<br>
埋骨何須桑梓地，人生無處不青山。<br>
孩兒勵志出湘關(guān)，學(xué)不成名終不還。<br>
埋骨何須桑梓地，人生無處不青山。<br>
孩兒勵志出湘關(guān)，學(xué)不成名終不還。<br>
埋骨何須桑梓地，人生無處不青山。<br>
孩兒勵志出湘關(guān)，學(xué)不成名終不還。<br>
埋骨何須桑梓地，人生無處不青山。<br>
孩兒勵志出湘關(guān)，學(xué)不成名終不還。<br>
埋骨何須桑梓地，人生無處不青山。<br>
孩兒勵志出湘關(guān)，學(xué)不成名終不還。<br>
埋骨何須桑梓地，人生無處不青山。<br>
孩兒勵志出湘關(guān)，學(xué)不成名終不還。<br>
埋骨何須桑梓地，人生無處不青山。<br>
孩兒勵志出湘關(guān)，學(xué)不成名終不還。<br>
埋骨何須桑梓地，人生無處不青山。<br>
孩兒勵志出湘關(guān)，學(xué)不成名終不還。<br>
埋骨何須桑梓地，人生無處不青山。<br>
孩兒勵志出湘關(guān)，學(xué)不成名終不還。<br>
埋骨何須桑梓地，人生無處不青山。<br>
孩兒勵志出湘關(guān)，學(xué)不成名終不還。<br>
埋骨何須桑梓地，人生無處不青山。<br>
孩兒勵志出湘關(guān)，學(xué)不成名終不還。<br>
埋骨何須桑梓地，人生無處不青山。<br>
孩兒勵志出湘關(guān)，學(xué)不成名終不還。<br>
埋骨何須桑梓地，人生無處不青山。<br>
孩兒勵志出湘關(guān)，學(xué)不成名終不還。<br>
埋骨何須桑梓地，人生無處不青山。<br>
孩兒勵志出湘關(guān)，學(xué)不成名終不還。<br>
埋骨何須桑梓地，人生無處不青山。<br>
孩兒勵志出湘關(guān)，學(xué)不成名終不還。<br>
埋骨何須桑梓地，人生無處不青山。<br>
孩兒勵志出湘關(guān)，學(xué)不成名終不還。<br>
埋骨何須桑梓地，人生無處不青山。<br>
孩兒勵志出湘關(guān)，學(xué)不成名終不還。<br>
埋骨何須桑梓地，人生無處不青山。<br>
孩兒勵志出湘關(guān)，學(xué)不成名終不還。<br>
埋骨何須桑梓地，人生無處不青山。<br>
孩兒勵志出湘關(guān)，學(xué)不成名終不還。<br>
埋骨何須桑梓地，人生無處不青山。<br>
-------------結(jié)束------------<br>
</div>
<div class="scroll">
<div class="bar"></div>
</div>
</div>
</body>
</html>
image.png
