- 浏览: 5780332 次
- 性别:
- 来自: 上海
文章分类
- 全部博客 (890)
- WindowsPhone (0)
- android (88)
- android快速迭代 (17)
- android基础 (34)
- android进阶 (172)
- android高级 (0)
- android拾遗 (85)
- android动画&效果 (68)
- Material Design (13)
- LUA (5)
- j2me (32)
- jQuery (39)
- spring (26)
- hibernate (20)
- struts (26)
- tomcat (9)
- javascript+css+html (62)
- jsp+servlet+javabean (14)
- java (37)
- velocity+FCKeditor (13)
- linux+批处理 (9)
- mysql (19)
- MyEclipse (9)
- ajax (7)
- wap (8)
- j2ee+apache (24)
- 其他 (13)
- phonegap (35)
最新评论
-
Memories_NC:
本地lua脚本终于执行成功了,虽然不是通过redis
java中调用lua脚本语言1 -
ZHOU452840622:
大神://处理返回的接收状态 这个好像没有监听到 遇 ...
android 发送短信的两种方式 -
PXY:
拦截部分地址,怎么写的for(int i=0;i<lis ...
判断是否登录的拦截器SessionFilter -
maotou1988:
Android控件之带清空按钮(功能)的AutoComplet ...
自定义AutoCompleteTextView -
yangmaolinpl:
希望有表例子更好。。。,不过也看明白了。
浅谈onInterceptTouchEvent、onTouchEvent与onTouch
http://www.aa25.cn/content.asp?id=794
jquery.linscroll.js源码:
<script type="text/javascript" src="jquery-1.1.3.1.js"></script> <script type="text/javascript" src="jquery.linscroll.js"></script> <script type="text/javascript"> $(document).ready( function(){ $(’#scrollContent’).setScroll( //scrollContent为滚动层的ID {img:scroll_bk.gif’,width:10},//背景图及其宽度 {img:scroll_arrow_up.gif’,height:3},//up image {img:scroll_arrow_down.gif’,height:3},//down image {img:scroll_bar.gif’,height:25}//bar image );}); </script> <div id="scrollContent" style="width:140px;overflow:hidden;height:170px;"> 内容 </div>
jquery.linscroll.js源码:
jQuery.fn.setScroll = function(_scroll,_scroll_up,_scroll_down,_scroll_bar){ this.each(function(){ var _bar_margin = 3; //create scroll dom var _scroll_control = jQuery('<div class="scroll_zone">').width(_scroll.width).css({'position':'absolute','float':'none',margin:0,padding:0}).css('background','url('+_scroll.img+')'); var _scroll_control_up = jQuery('<img class="scroll_down">').attr('src',_scroll_up.img).width(_scroll.width).css({'z-index':'1000','position':'absolute', 'top':'0','float':'none',margin:0,padding:0}); var _scroll_control_down = jQuery('<img class="scroll_down">').attr('src',_scroll_down.img).width(_scroll.width).css({'z-index':'1000','position':'absolute', 'bottom':'0','float':'none',margin:0,padding:0}); var _scroll_control_bar = jQuery('<img class="scroll_bar">').attr('src',_scroll_bar.img).width(_scroll.width).css({'z-index':'1500','position':'absolute','float':'none',margin:0,padding:0,height:_scroll_bar.height+'px'}).css('top',_scroll_up.height+_bar_margin+'px'); _scroll_control.append(_scroll_control_up); _scroll_control.append(_scroll_control_bar); _scroll_control.append(_scroll_control_down); var _oheight = jQuery(this).css('height').substring(0,jQuery(this).css('height').indexOf('px')); var _owidth = jQuery(this).width(); var _ocontent = jQuery(this).html(); if(jQuery(this).attr('scrollHeight')<=_oheight) return; var _content_zone = jQuery('<div>').html(_ocontent).css({ width:_owidth-10+'px',height:_oheight+'px',overflow:'hidden','float':'none',margin:0,padding:0}); jQuery(this).css({'overflow':'hidden'}); jQuery(this).empty().append(_content_zone).css({position:'relative'}).append(_scroll_control.css({left:_owidth-_scroll.width+'px',top:'0',height:_oheight+'px',margin:0,padding:0})); //register drag event jQuery(this).find('.scroll_bar') .mousedown( function(){ jQuery(document).mousemove( function(e){ var _content = _content_zone.get(0); var lastProgress = _scroll_control_bar.attr('progress'); _scroll_control_bar.attr('progress',e.pageY); var nowProgress = _scroll_control_bar.css('top'); nowProgress = nowProgress.substring(0,nowProgress.indexOf('px')); nowProgress = Number(nowProgress) + Number(e.pageY-lastProgress); var preProgress = nowProgress/(_oheight-_scroll_up.height-_scroll_down.height-_scroll_bar.height-(2*_bar_margin)); _content.scrollTop = ((_content.scrollHeight - _content.offsetHeight) * preProgress); if(nowProgress<(_scroll_up.height+_bar_margin) || nowProgress > (_oheight-(_scroll_down.height+_scroll_bar.height+_bar_margin))) return false; try{_scroll_control_bar.css('top',nowProgress+'px');}catch(e){} return false; } ); return false; } ) .mouseout( function(){ jQuery(document).mouseup( function(){ jQuery(document).unbind('mousemove'); } ) } ) }); }
- jquery.linscroll.zip (1.1 KB)
- 下载次数: 134
评论
2 楼
gundumw100
2010-09-13
http://www.aa25.cn/content.asp?id=794
1 楼
lotnhiro
2010-09-12
e .....
能发个效果图吗??
谢谢
能发个效果图吗??
谢谢
发表评论
-
jquery动态实现填充下拉框
2010-01-15 20:37 4685项目需要实现一个功能 当点下拉框时动态加载后台数据。 这是后台 ... -
使用jQuery动态绑定事件插件livequery弥补live的不足
2009-12-25 15:05 8831jquery1.3.2的动态绑定事件方法live不支持blur ... -
JQuery插件: moreSelectors为jQuery提供更多的选择器
2009-12-15 15:46 2017为jQuery提供更多的选择器 http://www.soft ... -
JQuery解析Json
2009-12-11 10:15 2431var arr1 = [ "one", ... -
jquery最大化窗口
2009-12-11 10:13 5803<script type="text/ja ... -
JQuery解析xml
2009-12-11 10:04 3211java类中 response.setContent ... -
Jquery ajax跨域访问的问题
2009-12-11 10:02 2511$(document).ready(function(){ ... -
jQuery插件flexiGrid的完全使用,附代码下载
2009-12-10 15:52 35945在这个例子中其实不光使用了flexiGrid,还有 <s ... -
jQuery图片放大镜插件jqzoom
2009-12-09 16:33 3993<html> <head> & ... -
jquery操作select的联动插件FillOptions&CascadingSelect
2009-12-08 12:17 13480详细介绍看这里 http://blog.csdn.net/le ... -
jquery操作select
2009-12-07 16:23 8791//得到select项的个数 jQuery.fn.s ... -
javascript调试工具:Blackbird
2009-12-07 11:38 4191You might never use alert() aga ... -
基于jQuery的FlexiGrid的插件使用和改造
2009-11-30 15:13 16104已不推荐下载,如要下载去这个连接下载最新的 http://gu ... -
最简单的FlexiGrid使用(静态的)
2009-11-27 14:41 3107<link rel="styleshe ... -
jquery插件FlexiGrid的使用(已更新)
2009-11-27 13:51 47420已不推荐下载,如要下载去这个连接下载最新的 http://gu ... -
jQuery之下拉菜单
2009-09-30 13:49 1980<!DOCTYPE html PUBLIC &quo ... -
jquery Tooltips插件cluetip
2009-09-27 13:46 4719demo: http://plugins.learningjq ... -
jQuery插件linkButton
2009-09-23 10:34 11592linkButton是一个可以把<a href=&quo ... -
jQuery插件Font effect实现Javascript文字特效
2009-09-17 20:54 5767http://www.biuuu.com/p837.html ... -
jQuery插件animateToClass实现javascript自定义动画效果
2009-09-17 20:52 8222或许使用这个JavaScript库也可以达到自定义动画的功能: ...
相关推荐
jquery 获取当前浏览器滚动条宽度数值
JQ浏览器滚动条插件 浏览器滚动条美化JQ浏览器滚动条插件 浏览器滚动条美化
主要介绍了jQuery实现浮动层随浏览器滚动条滚动的方法,涉及jQuery操作页面元素滚动的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
1、我一开始用swipeup和swipedown来做,发现因为有滚动条,不会触发。因此只能判断滚动条是上滚下滚等。关于手机手势,后面的文章会介绍,欢迎关注! 2、通过上滚下滚来让底部导航显示或者因此,安卓上面的浏览器都...
通过捕捉浏览器滚动条下拉事件,触发异步加载数据的js方法,实现数据的动态添加。 脚本: var lastId=0;//记录每一次加载时的最后一条记录id,跟您的排序方式有关。 var isloading = false; $(window).bind(...
实现弹出层不再难,只要引用jQuery.UI.Impromptu.js这个js文件后,想要弹出哪个tag都行了 如:我想要这里是弹出浮动遮罩层</div> 并随页面滚动而滚动 只要调用 $('#ok').showModel();这个方法就可以了 调用$('#ok')...
自己项目上使用的向上滚动代码。如果你需要测试,首先你得下载jq资源包。最好是1.7版本及以上。代码中包含两种滚动模式,使用者自己看下代码就知道怎么回事了。代码经过ie ff 谷歌 360等浏览器的测试。本文档建议懂...
今天给大家分享一款基于jquery固定于顶部的导航,这款导航当浏览器滚动条位于顶部时,导航高度较高,当浏览器滚动向下滚动时,导航高度自动减低,并位于顶部。效果图如下: 源码下载 实现的代码: html代码: ...
自从腾讯微博上线以来,基本上就开始用了,一直到现在,作为一个开发人员,也看到了腾讯微博一直在不停的改变,也不知道大家有没有发现,腾讯微博提供两种加载数据的方式,一种是分页,一种是滚动浏览器滚动条加载...
本文实例讲述了jQuery实现判断滚动条滚动到document底部的方法。分享给大家供大家参考,具体如下: 滚动条没有实际的高度。只是为了呈现效果才在外型上面有长度。 在js当中也没有提供滚动条的高度API。 参考了网上...
至于浏览数据,尤其是浏览最新的数据,利用浏览器滚动条来加载,是很好的尝试…… 我试着用jquery来实现这个功能。先要得到滚动条的总长属性值:scrollHeight,还有滚动条当前位置属性值:scrollTop。然后通过计算,...
这次我们要来分享一些关于网页表格数据展示优化的jQuery插件,首先表格的表头是固定的,当数据行比较多时,向下...其次表格的滚动条时经过美化过的,重写了浏览器自带的滚动条样式,这样让整个数据表格显得更加美观。
获取浏览器窗口的可视区域高度和宽度,滚动条高度有需要的朋友可参考一下。IE中,浏览器显示窗口大小只能以下获取: 代码如下复制代码 代码如下:document.body.offsetWidth document.body.offsetHeight在声明了...
这种效果经常看到一些分享网站,其实这种效果也是很方面用户不需要返回导航可以点击自己想要去的栏目,其实原理很简单,先给浏览器绑定滚动条滚动事件,获取当前浏览器滚动页面的高度,然后在获取导航条div距离头部...
有些需求中,需要当用户滚动到浏览器底部的时候,再加载新的内容。笔者在这里介绍如何使用Jquery判断用户是否已经浏览到网页的底部了。 在了解下面的知识点之前,... //获取垂直滚动条到顶部的垂直距离 $(document).scr
水平滚动图片特效,支持横向滚动条左右拖动。...大家都知道,一般对于网页来说,水平滚动条是非常可怕的,网页大忌,但是如果你能将滚动条做合理的改编,那么用户肯定会乐意接受的,今天给大家推荐的这个就不错
禁止浏览器滚动条滚动: $('body').css({ "overflow-x":"hidden", "overflow-y":"hidden" }); 关闭弹出的窗口的时候需要显示出来,让浏览器窗口可以继续滚动 还原滚动: $('body').css({ "overflow-x":"auto...
在使用dialog插件时,默认是屏幕居中的,但是当页面出现滚动条时,dialog并没有随着滚动条往下滚动,这时就需要用户滑动滚动条来定位dialog,这不人性化,在说出解决方案前先来普及一下jquery关于定位的几个方法 ...
代码如下:$(document).height() //是获取整个页面的高度$(window).height() //是获取当前也就是浏览器所能看到的页面的那部分的高度。这个大小在你缩放浏览器窗口大小时会改变,与document是不一样的要获取顶端,...
然后通过整个大容器滚动条的左右或者上下的移动来实现滚动。下面附上一张手绘的图,来简要阐述下原理。首先,我们的目的是实现框1中的内容水平向左滚动(向右滚动,上下滚动的原理其实大致是一样的,只要知道其中一...