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