码迷,mamicode.com
首页 > 其他好文 > 详细

自定义滚动条

时间:2016-10-20 09:39:34      阅读:100      评论:0      收藏:0      [点我收藏+]

标签:

<!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‘);
   })
 });
}
     

 

自定义滚动条

标签:

原文地址:http://www.cnblogs.com/txxt/p/5979471.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!