- 浏览: 439001 次
- 性别:
- 来自: 广州
文章分类
最新评论
-
ubuntu的疯狂:
推荐一份完整的教程:http://blog.ddlisting ...
Emberjs学习 -
ptz19:
请问,如果把合并前的文件,不要dest 目标目录来。如: js ...
gulp下静态资源的合并、压缩、MD5后缀 -
zhouzq1008:
楼主,还有个问题,<a href="" ...
gulp下静态资源的合并、压缩、MD5后缀 -
zhouzq1008:
感谢楼主,用到了您的代码, 但现在好像有改动 否则会报错:修改 ...
gulp下静态资源的合并、压缩、MD5后缀 -
denverj:
感谢分享~
Emberjs学习
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <link type="text/css" rel="styleSheet" href="base.css"/> <script type="text/javascript" charset="utf-8" src="jquery.js"></script> <style> #wrapper{width:300px;background: #ff0;position:fixed;right:10px;top:20px;bottom:0;color:#fff;} #wrapper{*height:100%;} .box{overflow: hidden;position: relative;height:100%;} .box ul{height:1200px;background:#006600;border:1px solid #FABE28;} .fakebar{position:absolute;top:0;right:5px;height:50%;width:15px;background:#ccc;opacity:0.5; border-radius:8px; } </style> </head> <body> <div id="wrapper"> <div class="box"> <ul> <li>啊啊飞ffe</li> <li>试试方法</li> <li>啊啊飞ffe</li> <li>试试方法</li> <li>啊啊飞ffe</li> <li>试试方法</li> <li>啊啊飞ffe</li> <li>试试方法</li> <li>啊啊飞ffe</li> <li>试试方法</li> <li>啊啊飞ffe</li> <li>试试方法</li> <li>啊啊飞ffe</li> <li>试试方法</li> <li>啊啊飞ffe</li> <li>试试方法</li> <li>啊啊飞ffe</li> <li>试试方法</li> <li>啊啊飞ffe</li> <li>试试方法</li> <li>啊啊飞ffe</li> <li>试试方法</li> <li>啊啊飞ffe</li> <li>试试方法</li> <li>啊啊飞ffe</li> <li>试试方法</li> <li>啊啊飞ffe</li> <li>试试方法</li> <li>啊啊飞ffe</li> <li>试试方法</li> <li>啊啊飞ffe</li> <li>试试方法</li> <li>啊啊飞ffe</li> <li>试试方法</li> <li>啊啊飞ffe</li> <li>试试方法</li> <li>啊啊飞ffe</li> <li>试试方法</li> <li>啊啊飞ffe</li> <li>试试方法</li> <li>啊啊飞ffe</li> <li>试试方法</li> </ul> <div class="fakebar"></div> </div> </div> <script> var $ = jQuery; var boxEl = $(".box").get(0); var $ulEl = $(".box ul"); var $barEl = $(".fakebar"); var hiddenH = 0; var spaceH = 0; var h0 = 0; var h1 = 0; var step = 20; var barStep = 0; function scrollFunc(e){ if(e.wheelDelta){ //W3C 向上120/向下-120,opera 在V9.5之前的取值是反的。 return window.opera && window.opera.ver < 9.5 ? -e.wheelDelta:e.wheelDelta; }else if(e.detail){ // firefox : 向上-3/向下3 return e.detail * -40; } } function bindMousewheel(el,fn){ var callback = function(e){ fn(scrollFunc(e)); }; if(document.addEventListener){//W3C el.addEventListener('DOMMouseScroll',callback,false);//firefox el.addEventListener('mousewheel',callback,false);//IE8+,Opera,Chrome }else if(document.attachEvent){ el.attachEvent('onmousewheel',callback); } } function computeStep(){ h0 = 0; h1 = 0; //滚动条高度 var barH = parseInt($barEl.height(),10); //滚动条的空白高度 spaceH = boxEl.clientHeight - barH; //内容被hidden的高度 hiddenH = boxEl.scrollHeight - boxEl.clientHeight; //计算滚动条的步长 barStep = spaceH/(hiddenH/step); } function scrollPos(delta){ if(delta === -120){ //向下滚动 h0 += step; h0 = Math.min(h0,hiddenH); h1 += barStep; h1 = Math.min(h1,spaceH); }else{//向上滚动 h0 -= step; h0 = Math.max(h0,0); h1 -= barStep; h1 = Math.max(h1,0); } $ulEl.css("marginTop",-h0); $barEl.css("top",h1); } jQuery(function(){ $(window).resize(function(){ computeStep(); //简单重置偏移。最好能优化一下,保留当前位置 $ulEl.css("marginTop",0); $barEl.css("top",0); }); computeStep(); bindMousewheel(boxEl,scrollPos); }); </script> </body> </html>
发表评论
-
webpack简单打包PC网站前端资源
2016-02-23 14:30 1626:arrow: 1. 纯前端的打包输出,比较有局限 2 ... -
简单下拉框模拟
2015-06-19 16:19 693<!doctype html> < ... -
grunt构建基于seajs的网站实现
2015-06-16 16:49 1092Gruntfile.js module.exports ... -
js平滑滚动回到顶部
2015-06-10 11:42 3952优先使用 requestAnimationFrame实现。 实 ... -
fis-amd 的使用与修改
2015-05-26 16:14 3910https://github.com/fex-team/fis ... -
scrollMagic 视差与滚动动画GSAP
2015-05-19 18:14 4250scrollMagic(https://github.com/ ... -
skrollr-视差滚动动画插件
2015-05-19 14:18 1698skrollr ( https://github.com/Pr ... -
stellar插件的使用
2015-05-18 17:30 1675<!DOCTYPE html> < ... -
四个方向鼠标滑入的css动画
2015-05-14 18:08 2120<!DOCTYPE html> <ht ... -
icon font VS svg font
2015-05-14 15:21 1159关于字体图标和SVG图标,CSS TRICK网站有较好的说明。 ... -
gulp下静态资源的合并、压缩、MD5后缀
2015-05-05 15:48 22531var gulp = require('gulp'); ... -
DOMContentLoaded VS onload VS onreadystatechange
2015-04-30 14:50 69391. DOMContentLoaded 在页面html、scr ... -
简单的css3全屏滚动-左右方向
2015-04-28 15:17 3987据说 translateZ(0)可以触发GPU渲染,提高动画的 ... -
简单的css3全屏滚动
2015-04-27 16:41 1402<!DOCTYPE html> <ht ... -
jquery插件treetable 的使用
2015-04-20 16:12 11840插件的文档写得不是很好,为了能弄出异步加载的功能,小折腾了一番 ... -
纯CSS3的图片slider
2015-04-16 14:36 922<div class="container ... -
sublime 侧边栏字体大小修改
2015-04-16 10:46 3779【转载自:http://jekhy.com ... -
移动端的“点透”问题
2015-04-15 14:13 1604移动端的“点透”问题,这篇博文有较好的说明: http://w ... -
scheme缺少,ie的bug
2015-04-01 17:34 499在页面上定位一个资源(JS/CSS/image),通常的url ... -
大整数相加
2015-03-26 22:18 879function repeatStr(ch, n){ ...
相关推荐
js 模拟滚动条js 模拟滚动条js 模拟滚动条js 模拟滚动条
js模拟滚动条,相当好用,让你的滚动条变得绚丽!
很好用的模拟滚动条,jq的,里面有demo,样式很多
jQuery实现模拟滚动条插件版
04-模拟滚动条.html
09-模拟滚动条.html
11-模拟滚动条.html
10-模拟滚动条.html
simScroll插件使用图片模拟滚动条,个人觉得从功能上来说已接近完美了,不过还是有点东西要完善的。就目前来说它支持的功能有: 1、上下按钮、滚动区域,支持切换快速滚动;遗憾的地方:滚动区域翻页滚动时,当...
javascript 模拟 滚动条 能动态添加内容
应一个朋友之邀,他说用vb的时间空间来控制一个滚动条的增长...本程序没有使用MFC,倒是十分简单,就是设置一个timer,然后定时处理“滚动条”,我也没有使用真正的滚动条,而是根据朋友的要求,自己用矩形模拟了一个。
IE浏览器,div模拟滚动条,div宽度小于18 滚动条不滚动 环境 win7 IE 10 代码: 复制代码代码如下: <!DOCTYPE html> <html> <head> <title>scroll</title> <meta http-equiv=”...
系统默认的滚动条很丑,用这个可以自己换成图片等。 主要事件: 上、下按钮按住,内容慢慢滚动。 拖动滚动条,内容快速滚动。 点击滚动条空闲位置,内容定位。 鼠标滚轮在内容中滚动时,内容滚动。 代码未整理,...
js模拟滚动条(横向竖向),需要的朋友可以参考一下
系统默认的滚动条很丑,用这个可以自己换成图片等。 主要事件: 上、下按钮按住,内容慢慢滚动。 拖动滚动条,内容快速滚动。 点击滚动条空闲位置,内容定位。 鼠标滚轮在内容中滚动时,内容滚动。
易语言滚动条模拟法换肤源码,滚动条模拟法换肤,初始化模拟滚动条,置颜色方案,列表框_子类化,列表框_消息处理,安装鼠标钩子,卸载鼠标钩子,列表框_WM_NCPAINT,CallWinProc,拷贝内存,取矩形,取类名,申请内存,释放内存,...
C#180滚动条示例 源代码