<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';
p.style.marginTop = '0px';
//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 - sliderBar.offsetHeight);
//通過比值得到contentTop的偏移量
var contentTop = -(p.offsetHeight - wrap.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>