【前端效果】滚动条悬浮
<!DOCTYPE html> <html> <meta charset="utf-8"> <head> <title></title> <style type="text/css"> .title{width: 70%;background-color: #FFCCCC;} .title h1{color:#333;font:600 16px "microsoft yahei",arial; text-align:center;padding:15px 0 5px 0; width: 100%;} .transparent{ filter:alpha(opacity=80); /*支持 IE 浏览器*/ -moz-opacity:0.80; /*支持 FireFox 浏览器*/ opacity:0.80; /*支持 Chrome, Opera, Safari 等浏览器*/ } </style> <script type="text/javascript"> function hasClass(obj, cls) { return obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)')); } window.onscroll = function () { var top = document.documentElement.scrollTop || document.body.scrollTop; if (top > 105) { var left =document.getElementById("Title"); left.style.position="fixed"; left.style.top="0px"; if (!hasClass(left,"transparent")){ left.className +=" "+"transparent";} } else if (top<105) { var left =document.getElementById("Title"); left.style.position="static"; if (hasClass(left,"transparent")) { left.className=left.className.replace(new RegExp( "(\\s|^)" + "transparent" + "(\\s|$)" )," " ); } } } </script> </head> <body> <div style="text-align: center;"><img src="xlogo.png" /></div> <div id="Title" class="title" > <h1 >从你的全世界路过 </h1> </div> <div id="content"> <p> 总有几分钟,其中的每一秒,你都愿意拿一年去换取。<br /> <br /> 总有几颗泪,其中的每一次抽泣,你都愿意拿满手的承诺去代替。<br /> <br /> 总有几段场景,其中的每幅画面,你都愿意拿全部的力量去铭记。<br /> <br /> 总有几句话,其中的每个字眼,你都愿意拿所有的夜晚去复习。<br /> <br /> 亲爱的,如果一切可以重来,我想和你,永远在一起。<br /> <br /> 1.从你的全世界路过<br /> <br /> 一个人的记忆就是座城市,时间腐蚀着一切建筑,把高楼和道路全部沙化。如果你不往前走,就会被沙子掩埋。所以我们泪流满面,步步回头,可是只能往前走。<br /> <br /> 1<br /> <br /> 2004年的时候心灰意冷不想劳动,每天捧着电脑打牌,一打就是十几个钟头。但我的技术很差,毫无章法可言,唯一的优势是打字快,于是创造了自己的战术,叫作废话流。<br /> <br /> 一发牌,我就开始在聊天框里跟玩家说话:“赤焰天使,你娘舅最近身体好吗?”“天使为嘛是赤焰的呢,会炖熟的,你过日子要小心。”“咦,苍凉之心,好久不见你怎么改名字了?”“毛茸茸你好,帮帮我可以吗,我膝盖肿肿的呢……”<br /> <br /> 结果很多玩家忍无可忍,啪啪啪乱出牌,骂一句“我去你大爷的”就退出了。这样我靠打字赢了打牌,赚到胜率75%。后来慢慢不管用,我又想了新招。<br /> <br /> 我在对话框里讲故事。<br /> <br /> 系统发牌,我打字:“从前有个神父,他住的村子里最美的姑娘叫小芳。突然小芳怀孕了,死也不肯说是谁的孩子。村民就暴打她,要将她浸猪笼。小芳哭着说,是神父的呢。村民一起冲进教堂,神父没有否认,任凭他们打断了自己的双腿。过了二十年,奇迹发生了。”<br /> <br /> 然后我就开始打牌。对话框里一片混乱,其他三个人在号叫:“我弄死你啊,发生了什么奇迹?去你妹的,老子不打了,你讲话能不能完整点儿?”<br /> <br /> 就这样,我的胜率再次冲到80%。<br /> <br /> 废话流名声大震,还有很多人来拜师。我一看胜率都在50%以下,头衔全部还是“赤脚”,冷笑拒绝。<br /> <br /> 正当我骄傲的时候,跟我合租的茅十八异军突起,自学成才。<br /> <br /> 这狗东西太无耻,他发明的属于废话流分支:诅咒术。比如好端端地大家在打牌,茅十八打一行字:“大慈大悲普度众生观世音菩萨,圣洁的露水照耀世人,明亮的目光召唤平安,如果你想自己的父母健康,就请复述一遍,必须做到,否则出门被车撞死。”<br /> <br /> 我去你的三姑夫!<br /> <br /> 当时强迫转发还不流行,被他这么一搞整个棋牌间里一片手忙脚乱,人人无心计算。一局没打完,他已经依次请过太上老君、上帝、耶和华、圣母马利亚、招财童子、唐明皇、金毛狮王谢逊、海的女儿……我输了。<br /> <br /> 茅十八这人生活中安静沉默,连打电话都基本只有三个字:“喂。嗯。拜。”他成为废话流宗师,让我瞠目结舌。<br /> <br /> 2<br /> <br /> 我跟茅十八的友谊一直维持着,2009年甚至一块儿自驾去稻城亚丁。当时他带着自己的女朋友荔枝,开到冲古寺,景色如同画卷,层峦叠嶂的色彩扑面而来。<br /> <br /> 我知道茅十八的打算,他紧张得发抖。<br /> <br /> 他跪在荔枝面前,说:“荔枝,你可以嫁给我吗?”<br /> <br /> 才一句话,后半句就哽咽了,那个“吗”字差点儿没发出来,将疑问句变成祈使句。<br /> <br /> 荔枝说:“怎么求婚也就一句话,你真够惜字如金的。”<br /> <br /> 茅十八一边抽泣,一边说:“荔枝,你可以嫁给我吗?”<br /> <br /> 荔枝说:“好的。”<br /> <br /> 茅十八给荔枝戴戒指,手抖得几乎戴不上。我和其他两个朋友冒充千军万马,声嘶力竭地号叫,打滚。<br /> <br /> 2010年荔枝生日,茅十八送的礼物是个导航仪。大家很震惊,这礼物过于奇特,难道有什么寓意?<br /> <br /> 茅十八羞涩地说,他鼓捣了一个多月,把导航仪的语音文件全部换掉了。我兴奋万分,逼着荔枝开车,一起检验茅十八的研究成果。<br /> <br /> 这一尝试,我彻底回想起茅十八称霸废话流的光荣战绩。<br /> <br /> 在开车兜风的过程中,导航仪废话连篇:“完蛋,前面有摄像头。这盘搞不定了,我找不到你想去的地方。大哥你睡醒没有,这地址错的啵?”<br /> <br /> 大家乐不可支。最牛X的是在等红灯时,导航仪里茅十八严肃地说:“手刹还拉好了?万一倒溜怎么办?你不要按喇叭,按喇叭搞什么啊,前头是个活闹鬼的话马上来干你,你又干不过他,老老实实等不行吗,哦,你没按喇叭,算老子没讲……”<br /> <br /> 大家笑得眼泪都出来了。荔枝笑得花枝乱颤,说:“你平时不吭声,怎么录音啰唆成这样?”<br /> <br /> 茅十八说:“上次去稻城,你不是嫌导航仪太古板,不够人性化吗,我就改装了一下,以后开车你就不会觉得无聊了。”<br /> <br /> 荔枝拿起导航仪,随便一按,导航仪尖叫:“你不会是想关掉我吧,老子又没犯法,你关,你关,回头老子不做导航仪了,换根二极管做收音机,你咬我啊……”<br /> <br /> 所有人叹服。<br /> <br /> 3<br /> <br /> 2011年,茅十八和荔枝分手。<br /> <br /> 荔枝把茅十八送她的所有东西装个盒子,送到我的酒吧。<br /> <br /> 我说:“茅十八还没来,在路上,你等他吗?”<br /> <br /> 荔枝摇摇头,说:“不等啦,你替我还给他。”<br /> <br /> 我说:“他有话想和你说的。”<br /> <br /> 荔枝说:“无所谓了,他一直说得很少。”<br /> <br /> 我说:“荔枝,真的就这样?”<br /> <br /> 荔枝走到门口,没回头,说:“我们不合适。”<br /> <br /> 我说:“保重。”<br /> <br /> 荔枝说:“保重。”<br /> <br /> 那天茅十八没出现,我打电话他也不接。去他在电子城的柜台找,旁边的老板告诉我,他好几天没来做生意了。<br /> <br /> 最后在一家小酒馆偶尔碰到,他喝得很多,面红耳赤,眼睛都睁不开,问我:“张嘉佳,你去过沙城吗?”<br /> <br /> 我想了想:“是敦煌吗?”<br /> <br /> 他摇头说:“不是的,是座城市,里面只有沙子。”<br /> <br /> 我说:“你喝多了。”<br /> <br /> 他趴在桌上睡着了。<br /> <br /> 4<br /> <br /> 就这样,荔枝的纸箱子放在我的酒吧里,茅十八从来没有勇气过来拿。<br /> <br /> 有天店长坐我车回家,拿个导航仪出来玩,我看着眼熟,店长撇撇嘴说:“乱翻翻到的。”<br /> <br /> 她一开机,导航仪发出茅十八的声音:“老子没得电了你还玩。”<br /> <br /> 吓得店长鸡飞狗跳,说见鬼了,抱头狂号。<br /> <br /> 我打电话给茅十八:“东西还要不要?”<br /> <br /> 茅十八沉默了一会儿,说:“不要了,明天回老家泰州。”<br /> <br /> 我说:“回去干吗?”<br /> <br /> 茅十八说:“家里在新城商业街替我租个铺子,我回去卖手机。”<br /> <br /> 我忽然心里有些难过,也没有话,刚想挂手机,茅十八说:“卖手机挺好的,万一碰到个年轻貌美的姑娘,成就一段姻缘,棒棒的。”<br /> <br /> 我说:“你加油。”<br /> <br /> 茅十八说:“保重。”<br /> <br /> 我说:“保重。”<br /> <br /> 5<br /> <br /> 2012年8月,我心情很差,开车往西,在成都喝了顿大酒,次日突发奇想,还是去稻城看看。<br /> <br /> 虽然只有一个人,但沿途听着导航仪茅十八的胡说八道,一会儿“跑那么快作死,掉沟里面我又不能帮你推”,一会儿“一百米后左拐了,妈逼你慢点儿”,倒也不算寂寞。<br /> <br /> 我觉得茅十八真是天才,我忘记插电源,亮红灯后导航仪疯狂地喊:“老子没得电了老子没得电了,你给老子点儿电啊!”<br /> <br /> 我差点儿笑出来,赶紧插电源。<br /> <br /> 翻过折多山、跑马山、海子山、二郎山,想看牛奶海和五色海的话,要自己爬上去。我觉得很累,于是停在冲古寺。绿的草、蓝的水、红的叶、白的山,我看着这一场秋天的童话发呆。<br /> <br /> 导航仪突然“嘟”的一声响了。<br /> <br /> 是茅十八的声音:<br /> <br /> “荔枝,你又到稻城了吗?这里定位是冲古寺,我向你求婚的地方。抵达这个目的地,我就会对你说:因为是最蓝的天,所以你是天使。你降临到我的世界,用喜怒哀乐代替四季,微笑就是白昼,哭泣就是黑夜。”<br /> <br /> “我喜欢独自一个人,直到你走进我的心里。那么,我只想和你在一起,我不喜欢独自一个人。”<br /> <br /> “我想分担你的所有,我想拥抱你的所有,我想一辈子陪着你,我爱你,我无法抗拒,我就是爱你。”<br /> <br /> “荔枝,我在想,当你听到这段话的时候,是我们结婚一周年呢,还是带着小宝宝自驾游呢?”<br /> <br /> “我站在那一天的天空下,和今天的自己,一起对你说,荔枝,我爱你。”<br /> <br /> 听着导航仪里茅十八的声音,我的眼泪涌出眼眶。<br /> <br /> 那一天在云影闪烁的山坡上,草地无限柔软,茅十八跪在女孩前,说:“荔枝我爱你。”<br /> <br /> 今天在云影闪烁的山坡上,草地无限柔软,茅十八的影子跪在女孩的影子前,说:“荔枝我爱你。”<br /> <br /> 这里无论多美丽,对于茅十八和荔枝来说,都已经成为沙城。<br /> <br /> 一个人的记忆就是座城市,时间腐蚀着一切建筑,把高楼和道路全部沙化。如果你不往前走,就会被沙子掩埋。<br /> <br /> 沙城就是一个人的记忆。<br /> <br /> 偶尔梦里回到沙城,那些路灯和脚印无比清晰,而你无法碰触,一旦双手陷入,整座城市就轰隆隆地崩塌。把你的喜笑颜开,把你的碧海蓝天,把关于我们之间所有的影子埋葬。<br /> <br /> 如果你不往前走,就会被沙子掩埋。所以我们泪流满面,步步回头,可是只能往前走。<br /> <br /> 哪怕往前走,是和你擦肩而过。<br /> <br /> 我从你们的世界路过,可你们也只是从对方的世界路过。<br /> <br /> 哪怕寂寞无声,我们也依旧都是废话流,说完一切,和沉默做老朋友。</p> </div> </body> </html>
![](https://images.cnblogs.com/cnblogs_com/alwaysblog/946318/o_xlogo.bmp)
从你的全世界路过
总有几分钟,其中的每一秒,你都愿意拿一年去换取。
总有几颗泪,其中的每一次抽泣,你都愿意拿满手的承诺去代替。
总有几段场景,其中的每幅画面,你都愿意拿全部的力量去铭记。
总有几句话,其中的每个字眼,你都愿意拿所有的夜晚去复习。
亲爱的,如果一切可以重来,我想和你,永远在一起。
1.从你的全世界路过
一个人的记忆就是座城市,时间腐蚀着一切建筑,把高楼和道路全部沙化。如果你不往前走,就会被沙子掩埋。所以我们泪流满面,步步回头,可是只能往前走。
1
2004年的时候心灰意冷不想劳动,每天捧着电脑打牌,一打就是十几个钟头。但我的技术很差,毫无章法可言,唯一的优势是打字快,于是创造了自己的战术,叫作废话流。
一发牌,我就开始在聊天框里跟玩家说话:“赤焰天使,你娘舅最近身体好吗?”“天使为嘛是赤焰的呢,会炖熟的,你过日子要小心。”“咦,苍凉之心,好久不见你怎么改名字了?”“毛茸茸你好,帮帮我可以吗,我膝盖肿肿的呢……”
结果很多玩家忍无可忍,啪啪啪乱出牌,骂一句“我去你大爷的”就退出了。这样我靠打字赢了打牌,赚到胜率75%。后来慢慢不管用,我又想了新招。
我在对话框里讲故事。
系统发牌,我打字:“从前有个神父,他住的村子里最美的姑娘叫小芳。突然小芳怀孕了,死也不肯说是谁的孩子。村民就暴打她,要将她浸猪笼。小芳哭着说,是神父的呢。村民一起冲进教堂,神父没有否认,任凭他们打断了自己的双腿。过了二十年,奇迹发生了。”
然后我就开始打牌。对话框里一片混乱,其他三个人在号叫:“我弄死你啊,发生了什么奇迹?去你妹的,老子不打了,你讲话能不能完整点儿?”
就这样,我的胜率再次冲到80%。
废话流名声大震,还有很多人来拜师。我一看胜率都在50%以下,头衔全部还是“赤脚”,冷笑拒绝。
正当我骄傲的时候,跟我合租的茅十八异军突起,自学成才。
这狗东西太无耻,他发明的属于废话流分支:诅咒术。比如好端端地大家在打牌,茅十八打一行字:“大慈大悲普度众生观世音菩萨,圣洁的露水照耀世人,明亮的目光召唤平安,如果你想自己的父母健康,就请复述一遍,必须做到,否则出门被车撞死。”
我去你的三姑夫!
当时强迫转发还不流行,被他这么一搞整个棋牌间里一片手忙脚乱,人人无心计算。一局没打完,他已经依次请过太上老君、上帝、耶和华、圣母马利亚、招财童子、唐明皇、金毛狮王谢逊、海的女儿……我输了。
茅十八这人生活中安静沉默,连打电话都基本只有三个字:“喂。嗯。拜。”他成为废话流宗师,让我瞠目结舌。
2
我跟茅十八的友谊一直维持着,2009年甚至一块儿自驾去稻城亚丁。当时他带着自己的女朋友荔枝,开到冲古寺,景色如同画卷,层峦叠嶂的色彩扑面而来。
我知道茅十八的打算,他紧张得发抖。
他跪在荔枝面前,说:“荔枝,你可以嫁给我吗?”
才一句话,后半句就哽咽了,那个“吗”字差点儿没发出来,将疑问句变成祈使句。
荔枝说:“怎么求婚也就一句话,你真够惜字如金的。”
茅十八一边抽泣,一边说:“荔枝,你可以嫁给我吗?”
荔枝说:“好的。”
茅十八给荔枝戴戒指,手抖得几乎戴不上。我和其他两个朋友冒充千军万马,声嘶力竭地号叫,打滚。
2010年荔枝生日,茅十八送的礼物是个导航仪。大家很震惊,这礼物过于奇特,难道有什么寓意?
茅十八羞涩地说,他鼓捣了一个多月,把导航仪的语音文件全部换掉了。我兴奋万分,逼着荔枝开车,一起检验茅十八的研究成果。
这一尝试,我彻底回想起茅十八称霸废话流的光荣战绩。
在开车兜风的过程中,导航仪废话连篇:“完蛋,前面有摄像头。这盘搞不定了,我找不到你想去的地方。大哥你睡醒没有,这地址错的啵?”
大家乐不可支。最牛X的是在等红灯时,导航仪里茅十八严肃地说:“手刹还拉好了?万一倒溜怎么办?你不要按喇叭,按喇叭搞什么啊,前头是个活闹鬼的话马上来干你,你又干不过他,老老实实等不行吗,哦,你没按喇叭,算老子没讲……”
大家笑得眼泪都出来了。荔枝笑得花枝乱颤,说:“你平时不吭声,怎么录音啰唆成这样?”
茅十八说:“上次去稻城,你不是嫌导航仪太古板,不够人性化吗,我就改装了一下,以后开车你就不会觉得无聊了。”
荔枝拿起导航仪,随便一按,导航仪尖叫:“你不会是想关掉我吧,老子又没犯法,你关,你关,回头老子不做导航仪了,换根二极管做收音机,你咬我啊……”
所有人叹服。
3
2011年,茅十八和荔枝分手。
荔枝把茅十八送她的所有东西装个盒子,送到我的酒吧。
我说:“茅十八还没来,在路上,你等他吗?”
荔枝摇摇头,说:“不等啦,你替我还给他。”
我说:“他有话想和你说的。”
荔枝说:“无所谓了,他一直说得很少。”
我说:“荔枝,真的就这样?”
荔枝走到门口,没回头,说:“我们不合适。”
我说:“保重。”
荔枝说:“保重。”
那天茅十八没出现,我打电话他也不接。去他在电子城的柜台找,旁边的老板告诉我,他好几天没来做生意了。
最后在一家小酒馆偶尔碰到,他喝得很多,面红耳赤,眼睛都睁不开,问我:“张嘉佳,你去过沙城吗?”
我想了想:“是敦煌吗?”
他摇头说:“不是的,是座城市,里面只有沙子。”
我说:“你喝多了。”
他趴在桌上睡着了。
4
就这样,荔枝的纸箱子放在我的酒吧里,茅十八从来没有勇气过来拿。
有天店长坐我车回家,拿个导航仪出来玩,我看着眼熟,店长撇撇嘴说:“乱翻翻到的。”
她一开机,导航仪发出茅十八的声音:“老子没得电了你还玩。”
吓得店长鸡飞狗跳,说见鬼了,抱头狂号。
我打电话给茅十八:“东西还要不要?”
茅十八沉默了一会儿,说:“不要了,明天回老家泰州。”
我说:“回去干吗?”
茅十八说:“家里在新城商业街替我租个铺子,我回去卖手机。”
我忽然心里有些难过,也没有话,刚想挂手机,茅十八说:“卖手机挺好的,万一碰到个年轻貌美的姑娘,成就一段姻缘,棒棒的。”
我说:“你加油。”
茅十八说:“保重。”
我说:“保重。”
5
2012年8月,我心情很差,开车往西,在成都喝了顿大酒,次日突发奇想,还是去稻城看看。
虽然只有一个人,但沿途听着导航仪茅十八的胡说八道,一会儿“跑那么快作死,掉沟里面我又不能帮你推”,一会儿“一百米后左拐了,妈逼你慢点儿”,倒也不算寂寞。
我觉得茅十八真是天才,我忘记插电源,亮红灯后导航仪疯狂地喊:“老子没得电了老子没得电了,你给老子点儿电啊!”
我差点儿笑出来,赶紧插电源。
翻过折多山、跑马山、海子山、二郎山,想看牛奶海和五色海的话,要自己爬上去。我觉得很累,于是停在冲古寺。绿的草、蓝的水、红的叶、白的山,我看着这一场秋天的童话发呆。
导航仪突然“嘟”的一声响了。
是茅十八的声音:
“荔枝,你又到稻城了吗?这里定位是冲古寺,我向你求婚的地方。抵达这个目的地,我就会对你说:因为是最蓝的天,所以你是天使。你降临到我的世界,用喜怒哀乐代替四季,微笑就是白昼,哭泣就是黑夜。”
“我喜欢独自一个人,直到你走进我的心里。那么,我只想和你在一起,我不喜欢独自一个人。”
“我想分担你的所有,我想拥抱你的所有,我想一辈子陪着你,我爱你,我无法抗拒,我就是爱你。”
“荔枝,我在想,当你听到这段话的时候,是我们结婚一周年呢,还是带着小宝宝自驾游呢?”
“我站在那一天的天空下,和今天的自己,一起对你说,荔枝,我爱你。”
听着导航仪里茅十八的声音,我的眼泪涌出眼眶。
那一天在云影闪烁的山坡上,草地无限柔软,茅十八跪在女孩前,说:“荔枝我爱你。”
今天在云影闪烁的山坡上,草地无限柔软,茅十八的影子跪在女孩的影子前,说:“荔枝我爱你。”
这里无论多美丽,对于茅十八和荔枝来说,都已经成为沙城。
一个人的记忆就是座城市,时间腐蚀着一切建筑,把高楼和道路全部沙化。如果你不往前走,就会被沙子掩埋。
沙城就是一个人的记忆。
偶尔梦里回到沙城,那些路灯和脚印无比清晰,而你无法碰触,一旦双手陷入,整座城市就轰隆隆地崩塌。把你的喜笑颜开,把你的碧海蓝天,把关于我们之间所有的影子埋葬。
如果你不往前走,就会被沙子掩埋。所以我们泪流满面,步步回头,可是只能往前走。
哪怕往前走,是和你擦肩而过。
我从你们的世界路过,可你们也只是从对方的世界路过。
哪怕寂寞无声,我们也依旧都是废话流,说完一切,和沉默做老朋友。
透明效果:
.transparent{ filter:alpha(opacity=80); /*支持 IE 浏览器*/ -moz-opacity:0.80; /*支持 FireFox 浏览器*/ opacity:0.80; /*支持 Chrome, Opera, Safari 等浏览器*/ }
标题悬浮原理:
1、在图片<img>下设置一个空白区域,高度与标题高度一致,隐藏
2、滚动条向下滚动至图片<img>的宽度时,定位标题为固定,置顶top=0
3、空白区域display:block,解决标题设置为绝对位置后,文章内容向上缩的现象
4、滚动条距离小于<img>高度,去除标题固定设置,空白区域隐藏