课程列表:


自定义滚动条课程001-html和样式的编写






以下是具体的代码

前面我们七七八八的讲了些基础也分析了一些小的实现,下面我们直接上代码,代码里面均有注释,结合前面几节课的知识,我相信代码能够看得明白。有看不明白的可以留言。

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <title>scroll</title>
  6. <link rel="stylesheet" type="text/css" href="css/reset.css"/>
  7. <script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.js" ></script>
  8. <style type="text/css">
  9. body{
  10. background: #ccc;
  11. }
  12. .scroll-demo{
  13. width:540px;
  14. border: 1px solid #e5e5e5;
  15. background: #fff;
  16. margin: 30px auto;
  17. }
  18. /**便签切换区*/
  19. .scroll-tab{
  20. height: 34px;
  21. border-bottom: 1px solid #E5E5E5;
  22. color: #666;
  23. background: #f8f8f8;
  24. }
  25. .scroll-tab .tab-item{
  26. float: left;
  27. font:14px/34px "microsoft yahei";
  28. height: 34px;text-align: center;
  29. border-right: 1px solid #E5E5E5;
  30. padding: 0 20px;
  31. }
  32. .scroll-tab .tab-active{
  33. color: #00be3c;
  34. background: #FFFFFF;
  35. border-top: 2px solid #00BE3C;
  36. margin: -1px 0;
  37. }
  38. /**滚动内容取*/
  39. .scroll-wrap{
  40. position: relative;
  41. width: 100%;
  42. height: 300px;
  43. }
  44. /**滚动内容*/
  45. .scroll-wrap .scroll-cont{
  46. height: 100%;
  47. padding: 0 15px;
  48. overflow: hidden;
  49. }
  50. .scroll-wrap .scroll-cont{
  51. font:14px/3 "microsoft yahei";
  52. margin-bottom: 10px;
  53. text-indent: 2em;
  54. line-height: 20px;
  55. }
  56. .scroll-wrap .scroll-cont .scroll-ol{
  57. padding-bottom: 1px;
  58. }
  59. .scroll-wrap .scroll-bar{
  60. position: absolute;
  61. top: 0;
  62. right: 0;
  63. width: 10px;
  64. height: 100%;
  65. background-color: #eaeaea;
  66. }
  67. /**滑块*/
  68. .scroll-wrap .scroll-slider{
  69. position: absolute;
  70. top: 0;
  71. left: 1px;
  72. width: 8px;
  73. height: 30px;
  74. background-color: #fff;
  75. }
  76. </style>
  77. </head>
  78. <body>
  79. <!--
  80. 作者:NoteShare
  81. 时间:2016-09-23
  82. 描述:自定义滚动条
  83. -->
  84. <div class="scroll-demo">
  85. <!--标签切换区-->
  86. <ul class="scroll-tab clearfix">
  87. <li class="tab-item tab-active">第一篇</li>
  88. <li class="tab-item">第二篇</li>
  89. <li class="tab-item">第三篇</li>
  90. <li class="tab-item">第四篇</li>
  91. </ul>
  92. <!--滚动内容区-->
  93. <div class="scroll-wrap">
  94. <!--滚动内容-->
  95. <div class="scroll-cont">
  96. <h5 class="anchor">第一篇</h5>
  97. <div class="scroll-ol">
  98. 很多新人都很关心的问题,掌握了SEO技术能做什么?下面总结几种SEO赚钱的方式,刚开始做的新手可以先去网络公司打工,等有经验了和一定的人脉资源,可以开办一家网站优化工作室。
  99. 掌握SEO技术盈利覆盖面较广,可以参考以下几点!
  100. 1、提供搜索引擎排名服务赚钱:
  101. 服务对象:中小企业网站
  102. 适合对象:SEO新手
  103. 收费模式:按照关键词收费
  104. 2、利用SEO打造大流量网站:
  105. 适合对象:SEO熟练者+网站制作高手
  106. 赚钱模式:收取广告费
  107. 3、利用SEO和传统贸易公司合作
  108. 适合对象:有传统生意基础的SEO人员
  109. 赚钱模式:销售产品
  110. 4、SEO+CPA销售联盟
  111. 适合对象:SEO人员,英文好的优先
  112. 赚钱模式:赚取佣金
  113. 5、SEO顾问服务:
  114. 服务对象:大中型网站
  115. 适合对象:经验丰富的SEO
  116. 赚钱模式:按照时间收取顾问费、按照项目收入费用。
  117. 6、给别的公司打工:
  118. 服务对象:大型网站或者公司
  119. 适合对象:不想创业的SEO人员
  120. 赚钱模式:按月领取工资
  121. 赚钱流程:听从公司安排做对应的工作。
  122. 总结:掌握好SEO技术不仅能够通过优化企业网站接单赚钱,也可以优化行业网站采取合作的方式赚钱,SEO技术是一个能把任何产品都能够摆到用户面前的一个技术手段,掌握好SEO技术就能免费够获得更多潜在用户,最后实现盈利目的。
  123. 很多新人都很关心的问题,掌握了SEO技术能做什么?下面总结几种SEO赚钱的方式,刚开始做的新手可以先去网络公司打工,等有经验了和一定的人脉资源,可以开办一家网站优化工作室。
  124. 掌握SEO技术盈利覆盖面较广,可以参考以下几点!
  125. 1、提供搜索引擎排名服务赚钱:
  126. 服务对象:中小企业网站
  127. 适合对象:SEO新手
  128. 收费模式:按照关键词收费
  129. 2、利用SEO打造大流量网站:
  130. 适合对象:SEO熟练者+网站制作高手
  131. 赚钱模式:收取广告费
  132. </div>
  133. <h5 class="anchor">第二篇</h5>
  134. <div class="scroll-ol">
  135. 3、利用SEO和传统贸易公司合作
  136. 适合对象:有传统生意基础的SEO人员
  137. 赚钱模式:销售产品
  138. 4、SEO+CPA销售联盟
  139. 适合对象:SEO人员,英文好的优先
  140. 赚钱模式:赚取佣金
  141. 5、SEO顾问服务:
  142. 服务对象:大中型网站
  143. 适合对象:经验丰富的SEO
  144. 赚钱模式:按照时间收取顾问费、按照项目收入费用。
  145. </div>
  146. <h5 class="anchor">第三篇</h5>
  147. <div class="scroll-ol">
  148. 6、给别的公司打工:
  149. 服务对象:大型网站或者公司
  150. 适合对象:不想创业的SEO人员
  151. 赚钱模式:按月领取工资
  152. 赚钱流程:听从公司安排做对应的工作。
  153. 6、给别的公司打工:
  154. 服务对象:大型网站或者公司
  155. 适合对象:不想创业的SEO人员
  156. 赚钱模式:按月领取工资
  157. 6、给别的公司打工:
  158. 服务对象:大型网站或者公司
  159. 适合对象:不想创业的SEO人员
  160. 服务对象:大型网站或者公司
  161. 适合对象:不想创业的SEO人员
  162. 赚钱模式:按月领取工资
  163. 赚钱流程:听从公司安排做对应的工作。
  164. 6、给别的公司打工:
  165. 服务对象:大型网站或者公司
  166. 适合对象:不想创业的SEO人员
  167. 赚钱模式:按月领取工资
  168. 6、给别的公司打工:
  169. 服务对象:大型网站或者公司
  170. 适合对象:不想创业的SEO人员
  171. 赚钱模式:按月领取工资
  172. 赚钱流程:听从公司安排做对应的工作。
  173. 总结:掌握好SEO技术不仅能够通过优化企业网站接单赚钱,也可以优化行业网站采取合作的方式赚钱,SEO技术是一个能把任何产品都能够摆到用户面前的一个技术手段,掌握好SEO技术就能免费够获得更多潜在用户,最后实现盈利目的。
  174. 掌握SEO技术盈利覆盖面较广,可以参考以下几点!
  175. 1、提供搜索引擎排名服务赚钱:
  176. 服务对象:中小企业网站
  177. 适合对象:SEO新手
  178. 收费模式:按照关键词收费
  179. </div>
  180. <h5 class="anchor">第四篇</h5>
  181. <div class="scroll-ol">
  182. 2、利用SEO打造大流量网站:
  183. 适合对象:SEO熟练者+网站制作高手
  184. 赚钱模式:收取广告费
  185. </div>
  186. <!--内容高度补足-->
  187. <div class="correct-bot"></div>
  188. </div>
  189. <!--滚动条-->
  190. <div class="scroll-bar">
  191. <!--滚动滑块-->
  192. <div class="scroll-slider"></div>
  193. </div>
  194. </div>
  195. </div>
  196. <script type="text/javascript">
  197. "use strict";
  198. (function (win,doc,$){
  199. //构造函数
  200. function CusScrollBar(options){
  201. this._init(options);
  202. }
  203. /*把以下初始化方法重写为下面使用extend方法实现的方式
  204. * CusScrollBar.prototype._init = function(){
  205. console.log("test");
  206. }*/
  207. $.extend(CusScrollBar.prototype, {
  208. _init:function(options){
  209. var self = this;
  210. self.options = {
  211. scrollDir : "y", //滚动方向
  212. contSelector : "", //滚动内容区选择器
  213. barSelector : "", //滚动条选择器
  214. sliderSelector : "", //滚动滑块选择器
  215. tabItemSelector : ".tab-item", //标签选择器
  216. tabActiveClass : "tab-active", //选中标签类名
  217. anchorSelector : ".anchor", //锚点选择器
  218. correctSelector : ".correct-bot", //校正元素
  219. articleSelector : ".scroll-ol", //文章选择器
  220. wheelStep : 10 //滚轮步长
  221. }
  222. ;
  223. $.extend(true,self.options,options || {});
  224. self._initDomEvent();
  225. return self;
  226. },
  227. /**
  228. * 初始化DOM引用
  229. */
  230. _initDomEvent : function(){
  231. var self = this;
  232. var opts = this.options;
  233. this.$cont = $(opts.contSelector);
  234. this.$slider = $(opts.sliderSelector);
  235. this.$bar = opts.barSelector ? $(opts.barSelector) : self.$slider.parent();
  236. //标签项
  237. this.$tabItem = $(opts.tabItemSelector);
  238. //锚点项
  239. this.$anchor = $(opts.anchorSelector);
  240. //正文
  241. this.$article = $(opts.articleSelector);
  242. //校正元素对象
  243. this.$corret = $(opts.correctSelector);
  244. //获取文档对象
  245. this.$doc = $(doc);
  246. this._initSliderDragEvent()._bindContScroll()._bindMousewheel()._initTabEvent()._initArticleHeight();
  247. },
  248. /**
  249. * 初始化文档高度
  250. */
  251. _initArticleHeight : function(){
  252. var self = this,
  253. lastArticle = self.$article.last();
  254. var lastArticleHeight = lastArticle.height(),
  255. contHeight = self.$cont.height();
  256. if(lastArticleHeight < contHeight){
  257. //outHeight()包含padding-top和padding-bottom和border-top和border-bottom的高度。
  258. self.$corret[0].style.height = contHeight - lastArticleHeight - self.$anchor.outerHeight() + "px";
  259. }
  260. return self;
  261. },
  262. /**
  263. * 初始化滑块拖动功能
  264. */
  265. _initSliderDragEvent : function(){
  266. var self = this;
  267. var slider = this.$slider,
  268. sliderEl = slider[0];
  269. if(sliderEl){
  270. var doc = self.$doc,
  271. dragStartPagePosition,
  272. dragStartScrollPosition,
  273. dragContBarRate;
  274. function mousemoveHandler(e){
  275. e.preventDefault;
  276. if(dragStartPagePosition == null){
  277. return;
  278. }
  279. //console.log(dragStartScrollPosition);
  280. //console.log(e.pageY);
  281. //console.log(dragContBarRate);
  282. //console.log(dragStartScrollPosition + (e.pageY - dragStartPagePosition) * dragContBarRate);
  283. self.scrollTo(dragStartScrollPosition + (e.pageY - dragStartPagePosition) * dragContBarRate);
  284. }
  285. slider.on("mousedown",function(e){
  286. //因为事件的默认行为往往会导致一些不可预测的结果,所以我们通过preventDefault把事件的默认行为阻止掉。
  287. e.preventDefault();
  288. //鼠标当前位置
  289. dragStartPagePosition = e.pageY;
  290. //内容区滚动的距离
  291. dragStartScrollPosition = self.$cont[0].scrollTop;
  292. dragContBarRate = self.getMaxScrollPosition()/self.getMaxSliderPosition();
  293. doc.on("mousemove.scroll",mousemoveHandler)
  294. .on("mouseup.scroll",function(){
  295. //解除事件绑定
  296. //console.log("mouseup");
  297. //这个会把document上的所有mousemove mouseup方法解除绑定,这必然会存在一定的风险。===为了解决这个风险我们给事件添加命名空间,
  298. //具体可以查看on和off的相关说明
  299. //doc.off("mousemove mouseup");
  300. //通过命名空间移出绑定的事件
  301. doc.off(".scroll");
  302. });
  303. });
  304. }
  305. return self;
  306. },
  307. /**
  308. * 初始化标签切换功能
  309. */
  310. _initTabEvent : function(){
  311. var self = this;
  312. self.$tabItem.on("click",function(e){
  313. e.preventDefault();
  314. var index = $(this).index();
  315. self.changeTabSelect(index);
  316. //已经滚出可视区的内容高度
  317. //+指定锚点与内容容器的距离
  318. self.scrollTo(self.$cont[0].scrollTop + self.getAnchorPosition(index));
  319. });
  320. return self;
  321. },
  322. //切换标签的选中
  323. changeTabSelect : function(index){
  324. var self = this,
  325. active = self.options.tabActiveClass;
  326. return self.$tabItem.eq(index).addClass(active).siblings().removeClass(active);
  327. },
  328. //获取指定锚点到上边界的像素值
  329. //position() 获取匹配元素中第一个元素的当前位置,相对于离该元素最近且被定位过的父元素(relative,absolute,fixed)
  330. //position(coordinates)设置匹配的元素集合中每一个元素的坐标,坐标相对于文档如:{x:10,y:20}
  331. getAnchorPosition : function(index){
  332. return this.$anchor.eq(index).position().top;
  333. },
  334. //获取每个锚点位置信息的数组
  335. getAllAnchorPostion : function(){
  336. var self = this,
  337. allPositionArr = [];
  338. for(var i =0;i < self.$anchor.length; i++){
  339. allPositionArr.push(self.$cont[0].scrollTop + self.getAnchorPosition(i));
  340. }
  341. return allPositionArr;
  342. },
  343. //监听内容的滚动,同步滑块的位置
  344. _bindContScroll : function(){
  345. var self = this;
  346. self.$cont.on("scroll",function(){
  347. var sliderEl = self.$slider && self.$slider[0];
  348. if(sliderEl){
  349. sliderEl.style.top = self.getSliderPosition() + "px";
  350. }
  351. });
  352. return self;
  353. },
  354. _bindMousewheel : function(){
  355. var self = this;
  356. self.$cont.on("mousewheel DOMMouseScroll",function(e){
  357. e.preventDefault();
  358. var oEv = e.originalEvent,
  359. wheelRange = oEv.wheelDelta ? -oEv.wheelDelta/120 : (oEv.detail || 0)/3;
  360. self.scrollTo(self.$cont[0].scrollTop + wheelRange * self.options.wheelStep);
  361. });
  362. return self;
  363. },
  364. //计算滑块的当前位置
  365. getSliderPosition : function(){
  366. var self = this,
  367. maxSliderPosition = self.getMaxSliderPosition();
  368. return Math.min(maxSliderPosition,maxSliderPosition * self.$cont[0].scrollTop/self.getMaxScrollPosition());
  369. },
  370. //内容可滚动的高度
  371. getMaxScrollPosition : function(){
  372. var self = this;
  373. //self.$cont[0].scrollHeight内容的整体高度
  374. //$cont.height()文档可视区的高度
  375. //console.log(self.$cont.height());
  376. //console.log(self.$cont[0].scrollHeight);
  377. //以下求max是为了解决的内容的整体高度小于可视区时,取最大的值作为内容的整体高度
  378. //这里有点没弄明白,当内容的整体高度小于可视区时,测试的结果self.$cont.height()和self.$cont[0].scrollHeight相同均为可视区高度
  379. return Math.max(self.$cont.height(),self.$cont[0].scrollHeight) - self.$cont.height();
  380. },
  381. //滑块可移动的距离
  382. getMaxSliderPosition : function(){
  383. var self = this;
  384. return self.$bar.height() - self.$slider.height();
  385. },
  386. scrollTo : function(positionVal){
  387. var self = this;
  388. var posArr = self.getAllAnchorPostion();
  389. //滚动条的位置与tab标签的对应
  390. function getIndex(positionVal){
  391. for(var i = posArr.length -1;i >= 0; i--){
  392. if(positionVal >= posArr[i]){
  393. return i;
  394. }else{
  395. continue;
  396. }
  397. };
  398. }
  399. //锚点数与标签数相同
  400. if(posArr.length == self.$tabItem.length){
  401. self.changeTabSelect(getIndex(positionVal));
  402. }
  403. self.$cont.scrollTop(positionVal);
  404. }
  405. });
  406. win.CusScrollBar = CusScrollBar;
  407. })(window,document,jQuery);
  408. //测试代码
  409. var temp = new CusScrollBar({
  410. contSelector : ".scroll-cont", //滚动内容区选择器
  411. barSelector : ".scroll-bar", //滚动条选择器
  412. sliderSelector : ".scroll-slider", //滚动滑块选择器
  413. wheelStep : 10 //滚轮步长
  414. });
  415. </script>
  416. </body>
  417. </html>

一下是reset.css

  1. html, body, div, span, applet, object, iframe, h1, h2, h3,
  2. h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address,
  3. big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp,
  4. small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li,
  5. fieldset, form, label, legend, table, caption, tbody, tfoot,
  6. thead, tr, th, td {
  7. margin: 0;
  8. padding: 0;
  9. border: 0;
  10. outline: 0;
  11. font-weight: inherit;
  12. font-style: inherit;
  13. font-size: 100%;
  14. font-family: inherit;
  15. vertical-align: baseline;
  16. }
  17. :focus {
  18. outline: 0;
  19. }
  20. table {
  21. border-collapse: separate;
  22. border-spacing: 0;
  23. }
  24. caption, th, td {
  25. text-align: left;
  26. font-weight: normal;
  27. }
  28. a img, iframe {
  29. border: none;
  30. }
  31. ol, ul {
  32. list-style: none;
  33. }
  34. input, textarea, select, button {
  35. font-size: 100%;
  36. font-family: inherit;
  37. }
  38. select {
  39. margin: inherit;
  40. }
  41. /* Fixes incorrect placement of numbers in ol’s in IE6/7 */
  42. ol { margin-left:2em; }
  43. /* == clearfix == */
  44. .clearfix:after {
  45. content: “.”;
  46. display: block;
  47. height: 0;
  48. clear: both;
  49. visibility: hidden;
  50. }
  51. .clearfix {display: inline-block;}
  52. * html .clearfix {height: 1%;}
  53. .clearfix {display: block;}

接下来我们给出演示地址:

作者:星辰 时间:2016-09-26 浏览 924评论 0 赞 0砸 0 标签: jquery 课程 前端 demo
评论
还可以再输入500个字

请您注意

·自觉遵守:爱国、守法、自律、真实、文明的原则
·尊重网上道德,遵守《全国人大常委会关于维护互联网安全的决定》及中华人民共和国其他各项有关法律法规
·严禁发表危害国家安全,破坏民族团结、国家宗教政策和社会稳定,含侮辱、诽谤、教唆、淫秽等内容的作品
·承担一切因您的行为而直接或间接导致的民事或刑事法律责任
·您在NoteShare上发表的作品,NoteShare有权在网站内保留、转载、引用或者删除
·参与本评论即表明您已经阅读并接受上述条款