javascript -- (js滚动条实现)

标签：

<style>

　　* {

　　　　margin : 0;

　　　　padding : 0;

　　}

</style>

<script type = "text/javascript" >

　　var body = document.getElementsByTagName(‘body‘)[0];

　　var wrap = document.createElement(‘div‘);   //创建最外层边框

　　var p = document.createElement(‘p‘);

　　p.id = ‘content‘;

　　//给p标签里添加文本内容

　　p.innerHTML = ‘第3集 男神身份　　  这次的翻译工作，有了沥川的加盟才能顺利完成。沥川将对方的语言翻译成英文，再由小秋翻译成中文。两人默契配合让雇主和生意合伙得以充分交流，小秋心中对这个博学多才的司机，产生了些奇妙的感觉。整件事本来能够完美结束，可最后碰上了个吃回扣的经理助理，将翻译费克扣了一半。脾气再好的人也是有脾气的，沥川见助理对小秋蛮横无理，一股怒火涌上来，挥拳就打。动静引来了公司经理，这才揭穿了助理的嘴脸，让小秋拿到了全额翻译费。总的来说，这次的工作还算顺利，只是沥川手背上擦出个伤口，小秋对血敏感忙用自己的卡通创可贴帮沥川贴上。小秋带沥川一起来本就是想给他赚些外快，所以将一半翻译费给了他。沥川并不在意这些钱，但见小秋执意不肯收回，就索性请客吃饭以表谢意。在回市中心的公交上，腿脚不便的沥川坚持让小秋坐在唯一的空位上，他宁可拄着拐杖站在一旁。从没体验过这种绅士风度的小秋，对他又平添了几分好感。可吃饭的时候就让小秋不满意了，一顿饭吃了近两千块，对一个“刚失业的司机”简直太奢侈了。小秋甚至怀疑沥川是花钱无度挪用公款才被GMF开除。晚上，沥川又来到咖啡店，静文能见到男神显得异常兴奋。看到静文的男神杯里空空，小秋就将续杯端了过去。刚到近前，小秋看到男神手背上贴着卡通创可贴。等男神转过头，把小秋吓得把咖啡打翻在沥川身上，连咖啡桌上的电脑也顺带遭了殃。静文连忙跑来献殷勤，可沥川似乎并不生气，反而处处为小秋开脱。等沥川离开，童越和静文就兴师问罪。静文也曾在第一次见到沥川时，惊叹于他的帅气而打翻了咖啡，所以她认为小秋有同样的想法。小秋想告诉他们这个男神只是普通人，都没人相信。毕竟沥川出手阔绰，谁会相信他只是个无名之辈。而真正的司机在第二天上班时为沥川送来了儿子周岁的红鸡蛋，以表示对他的感激之情。沥川还是头一次看到红色的鸡蛋，了解到国内的风俗。‘

　　var content = document.createElement(‘content‘); 

　　var slider = document.createElement(‘div‘);   //左侧栏滚动条的父级窗口

　　var sliderBar = document.createElement(‘div‘); //左侧栏滚动条

　　//样式设置

　　wrap.style.width = ‘300px‘;

　　wrap.style.height = ‘300px‘;

　　wrap.style.position = ‘relative‘;

　　wrap.style.margin = ‘auto‘;

　　wrap.style.marginTop = ‘150px‘;

　　wrap.style.borderRadius = ‘5px‘;

　　wrap.style.background = ‘pink‘;

　　wrap.style.overflow = ‘hidden‘;

　　//content样式设置

　　p.style.lineHeight = ‘30px‘;

　　p.style.display = ‘inline-block‘;

　　p.style.position = ‘absolute‘;

　　p.style.marginRight = ‘30px‘;

　　//slider样式设置

　　slider.style.width = ‘10px‘;

　　slider.style.height = ‘300px‘;

　　slider.style.background = ‘lightgray‘;

　　slider.style.position = ‘absolute‘;

　　slider.style.right = ‘0‘;

　　slider.style.top = ‘0‘;

　　slider.style.borderRadius = ‘5px‘;

　　//sliderBar样式设置

　　sliderBar.style.width = ‘100%‘;

　　sliderBar.style.height = ‘20px‘;

　　sliderBar.style.background = ‘blue‘;

　　sliderBar.style.position = ‘absolute‘;

　　sliderBar.style.left = ‘0‘;

　　sliderBar.style.top = ‘0‘;

　　sliderBar.style.borderRadius = ‘5px‘;

　　//onmousedown

　　sliderBar.onmousedown = function(event) {　　

　　　　event = event || window.event;

　　　　//获取鼠标点击的位置相对于slider的top值

　　　　var evTop = event.clientY - sliderBar.offsetTop;

　　　　//onmousemove

　　　　document.onmousemove = function(event) {

　　　　　　event = event || window.event;

　　　　　　var changeTop = event.clientY - evTop;

　　　　　　//判断（如果changeTop < 0 －－－changeTop = 0）

　　　　　　if(changeTop < 0) {

　　　　　　　　changeTop = 0;

　　　　　　} else if (changeTop > (slider.offsetHeight - sliderBar.offsetHeight) ) {

　　　　　　　　changeTop = slider.offsetHeight - sliderBar.offsetHeight;

　　　　　　}

　　　　　　sliderBar.style.top = changeTop + ‘px‘; 

　　　　　　//获取sliderBar的offsetTop与slider的比值

　　　　　　var scale = sliderBar.offsetTop/slider.offsetHeight;

　　　　　　//通过比值得到contentTop的偏移量

　　　　　　var contentTop = -p.offsetHeight * scale; 

　　　　　　p.style.top = contentTop + ‘px‘;

　　　　}

　　　　//onmouseup

　　　　document.onmouseup = function() {

　　　　　　document.onmousemove = null;

　　　　}

　　}

　　//将标签 元素添加到body里

　　wrap.appendChild(p);

　　slider.appendChild(sliderBar);

　　wrap.appendChild(slider);

　　body.appendChild(wrap);

</script>

javascript -- (js滚动条实现)

标签：

原文地址：http://www.cnblogs.com/zhao12354/p/5766616.html