自定義滾動條

主機筆記發表於2016-10-20
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery.js"></script>
<script src="js/script.js"></script>
<style>
  
</style>
</head>
<body>
<div class="box">
<div class="wrap">
<div class="text">
優雅，是一種歲月，它是歷經生命種種而呈現出的一種淡若不驚，褪去了少時的稚嫩，而呈現出的一種成熟的韻味。一個優雅的人，一定有著獨特的魅力，和飽滿的，恬淡而豐盈的靈魂。生活多了一份陽光，少了一些陰霾，懂得了一步一個腳印的踏實和安穩。在簡單的外表下，少了浮華，多了一份厚重。一個優雅的人，定是一個大氣而寬容的人，在這個浮躁的社會中，如一抹清風，讓人心曠神怡，因為心中有山水，在何時何地，都會呈現出清秀的容顏，優雅而迷人的風采。
　　
　　優雅不是不染銅臭的清高，也不是守著風花雪月獨自吟唱，更不是用心修飾自己，時刻保持端襟正坐，讓別人來欣賞的姿態，在我看來，優雅從來不是做給別人看的，真正的優雅，是修於內心，起於形色，表於外在。而這種外在，只是自己內心層次的一個體現，與他人無關。一個優雅的人。能夠在平淡的生活中，很好的做自己，學會給予，並且有能力去給予，懂得感恩，心中有愛，知書達理，寬容善良就是優雅。
　　
　　優雅並非是與生懼來的，它是心靈和智慧的完美結合。一個人的優雅，是來自閱讀，人生歷練和生活的塑造，是自信，獨立和高雅的象徵，這種品質是來自對生命的領悟，和人生的沉澱和積累。它絕不是單指外表的美麗，是順應生活不同狀況而反映出來的一種內心的智慧。優雅的人，定是有一雙感受美的眼睛，有一顆善良的心靈，是歲月塑造出靈魂深處的智慧，人生最珍貴的是歷經生活的千迴百轉，仍能有一顆柔軟善良的心。優雅，揮灑出一種渾然天成的風韻，是一種深邃的美。
　　
　　優雅與年齡也許有關，但更與自身的強大有關。一個優雅的人，一定是一個自律的人，無論外界有多大的誘惑，都不為之所動，懂得自恃和寬容，無論是在生活的困頓與挫折下，依然能保持窗明几淨，清新淡雅。無論生活給予怎樣的際遇，都能自我反省，溫故而知新，懂得尊重和感恩，對朋友淡而無心機，對親人溫暖而寬厚，對他人，不鄙視，不疏離，教養不是謙遜，是與生散發的自信和修養，而優雅，是源於一種自愛，光陰深邃，只要你願意。一定會優雅的變成自己喜歡的樣子。
　　
　　優雅與相貌或許有關，但更與個人的內心的修養有關，一個沒有思想的人，既使你畫著最完美的妝容，也掩蓋不了內心的醜陋，反而會讓人覺得虛偽。一個優雅的人，一定是懂得自愛，自信有獨立的人格，紮實的智慧，淡定的談吐，乾淨的面容和一顆善良的心，美的不張揚，恰到好外。林肯說，三十歲的人，要為自己的相貌負責任，當一個人擁有優雅的內心，不論是外貌如何，都美得迷人，真正的美麗，是一種由外而內的氣場，喜歡一個人，始於顏值，陷於才華，而忠於人品。
　　
　　一個優雅的人，懂得管好自己的嘴，無論何時何地都不誇誇其談，更不到處炫耀，因為那是一種膚淺的表現，只能讓人感到厭煩。美貌，可以是優先的入場券，卻不會是永遠的通行證，物質上的優厚是一種外在的優越感，而內心的豐盈才是永恆的美麗。一個真正優雅的。懂得優於別人，並不是高貴，而真正高貴是優於過去的自己，她們善於學習，懂得進取，優雅的人如沉香，散發著淡淡的清香，保持著精神上的溫度和溫暖，和獨立的人格。這種優美的姿態，是個人的修為，也是上蒼的恩賜。
　　
　　優雅的人，不會因為一點小事而大發雷霆，也不會對輕易對別人表現出厭惡的表情，更不會對弱者送上冷漠的表情，他們懂得尊重，和傾聽，學會管理好自己的情緒，臉上帶著微笑，欣賞帶著陽光。一個優雅的人，一定是善良的，他們的心，如蘭一樣清香，優雅，是歲月沉澱下來的一種馨香。
　　
　　人生的優雅，就是在經歷無數次的跌倒爬起之，仍然能夠帶著淡淡的微笑，春看百花，秋望月，夏賞清荷，冬聽雪，無論心境如何改變，都會保持一顆平常的心，淡看風月。即便生活沒有給我們想要的，依然能夠不抱怨，不埋怨，敢於正視浮沉，榮辱不驚。因為要求的少，所以就會感到得到的多，因為簡單，所以腳步從容。以一種感恩的心回饋生命中的所有，態度決定人生，一個優雅的人，定能收穫生活優雅的饋贈。
　　
　　優雅的人，在歲月的河膛上，她們或許不是跌宕起伏的大河，只是涓涓細流溫潤心靈；她們不是芳香四溢的溫室花朵，而有著淡雅如菊的恬淡風雅；她們沒有牡丹的雍容華貴，卻有蘭的芬芳內斂；她們不是你驚豔的一眼凝眸，卻是你頻頻回味的那一抹溫柔。優雅是柔軟的堅定，是給自我穿上了溫柔的外衣，是從容不迫的勇氣，她們以獨有的姿態，在漫長的光陰裡，從容的老去，又何嘗不是一種優雅？
</div>
</div>
<div class="side">
  <div class="bar"></div>
</div>
</div>
</body>
</html>
.box{position:relative; overflow:hidden; margin:30px; border:1px solid red; width:330px;}
.wrap{width:300px; height:300px; overflow:hidden; float:left; position:relative;}
.text{ position:absolute; top:0;}
.side{width:30px; height:300px; background:#ccc; float:left; position:relative;}
.bar{ background:#aaa; width:30px; height:30px; position:absolute; top:0; cursor:pointer;}
window.onload=function(){
 var bar=$(`.bar`);
 bar.mousedown(function(e){
    
   var oStart=e.pageY-$(`.wrap`).offset().top-bar.position().top;  //滑鼠按下時的位置距離bar頂點

   $(document).mousemove(function(e){
   //滑鼠拖動效果
          oDistance=e.pageY-$(`.wrap`).offset().top-oStart;  //滑鼠拖動的距離
          bar.css({`top`:oDistance});

          var barT=bar.position().top;  //bar的頂部距離
          var barH=bar.innerHeight();    //bar的高度
          var sideH=$(`.side`).innerHeight();  //滾動條的整體高度

    //限制拖動範圍
          if(barT<0) bar.css({`top`:0});
          if(barT>sideH-barH) bar.css({`top`:sideH-barH});
       //計算拖動比率
          var rateY=bar.position().top/(sideH-barH);
       $(`.text`).css({`top`:-rateY*($(`.text`).innerHeight()-$(`.wrap`).innerHeight())}) //注意：文字的滾動範圍只有不可見區域

   });
   //鬆開滑鼠取消繫結的事件
   $(document).mouseup(function(){
         $(document).off(`mousemove`);
   })
 });
}

 


相關文章