<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/com.js"></script>
<link rel="stylesheet" href="css/com.css" />
<!--<script type="text/javascript" src="js/index.js"></script>-->
<!--<link rel="stylesheet" href="css/index.css" /> -->
<style>
.wrap{
margin-top: 20px;
margin-left: 20px;
height: 400px;
width: 300px;
border: 1px solid black;
overflow: hidden;
}
.context{
/*height: 400px;*/
width: 280px;
float: left;
}
.scroll{
float: left;
height: 400px;
width: 20px;
background-color:#CCC;
position: relative;
}
.bar{
height: 100px;
width: 20px;
position: absolute;
border-radius: 30%;
background-color: yellowgreen;
}
</style>
</head>
<body>
<!--<img src="img/timg.jpg" style="height: 50px; width: 50px; position: absolute;" id="timg"/>-->
<div id="wrap" class="wrap">
<div class="context" id="context">
传智播客黑马程序员作为一个IT学习平台，历经11年的成长，免费分享视频教程长达10万余小时，累计下载量超2000万次，受益人数达千万。2018年我们不忘初心，继续前行！2018版贺岁版前端全套教程就是分享，专业，便利，让更多喜爱前端的人都能系统的学习！从今天起不要再找借口，不要再说想学前端却没有资源，赶快行动起来，前端等你来探索，高薪距你只差一步！
前端学科应市场发展及企业需求，将课程进一步优化更新。根据最新市场调研，新增了后端PHP开发模块，使课程整体由浅入深，将更有利于学生学精学透，提升职场竞争力！
为了答谢广大网友的支持，传智播客前端学院决定开源3年打造的精品教程，帮助更多想自学和转型的学子，从零基础快速掌握前端开发。
2018版贺岁版全套教程包含五个部分
前端第一阶段视频（12天）
HTML、CSS、JD案例
前端第二阶段视频（20天）
内容包含：JavaScript基础、Web API、JavaScript高级、jQuery
前端第三阶段视频（16天）
内容包含：PHP后台开发、Ajax、阿里百秀项目
前端第四阶段视频（16天）
内容包含：HTML5、CSS3、Canvas、移动Web、电商全端项目
前端第五阶段视频（18天）
内容包含：node.js、vue.js
传智播客自开源前端教程以来，获得了大量的好评：
热心网友1：讲的很细致，很幽默，例子生动形象，还带着敲代码，真的非常好的老师
热心网友2：讲的真清晰，非常好，感觉其他机构没法活了~~
热心网友3：老师讲解很好，就服传智播客
热心网友4：网盘啥资料都没，都是传智播客的，呜呜呜，欠你们太多了！
热心网友5：平时看书没明白的知识，看这个老师讲解就秒懂了。
热心网友6：我已经推荐好多身边人在学习传智播客的前端教程了
以上全部来自真实网友评论，仅截取部分，不一一列举。
全套前端视频全部无码开放下载，包含全套的视频+笔记+源代码，一切只为了让学员少走弯路，我们相信掌握本套教程，你完全能胜任企业级的前端开发工作。还在等什么？赶紧下载吧！
</div>
<div class="scroll" id="scroll">
<div class="bar" id="bar"></div>
</div>
</div>
<script>
//获取文字内容
var context=my$("context");
//获取滚动条
var scroll=my$("scroll");
//获取滚动按钮
var bar=my$("bar");
//让滚动条随内容大小变化
//滚动条的heigh/scorll=warp/context
var he=scroll.offsetHeight*my$("wrap").offsetHeight/context.offsetHeight;
bar.style.height=he+"px";
//滚动条滑动
//获取鼠标y
bar.onmousedown=function(e){
var spaceY=evt.getClientY(e)-bar.offsetTop;
document.onmousemove=function(e){
var y=evt.getClientY(e)-spaceY;
y=y>0?y:0;
y=y>scroll.offsetHeight-bar.offsetHeight?scroll.offsetHeight-bar.offsetHeight:y;
console.log(y);
bar.style.top=y+"px";
window.getSelection?window.getSelection().removeAllRanges():document.selection.empty();
//滚动条的移动距离比文字的移动距离=滚动条最大的移动距离比文字最大的移动距离
//文字的移动距离
var moveY=y*(context.offsetHeight-my$("wrap").offsetHeight)/(scroll.offsetHeight-bar.offsetHeight);
context.style.marginTop= (-moveY)+"px";
}
}
document.onmouseup=function(){
document.onmousemove=null;
}
</script>
</body>
</html>
自定义滚动条
最新推荐文章于 2023-06-27 15:18:39 发布
3333
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
