是基于MooTools来做的. 效果比较平滑. 看图: 在线演示:http://demo.jb51.net/js/ScrollClock/打包下载:http://xiazai.jb51.net/201011/yuanma/ScrollClock.rar
此问题在UI1.7就出现,到了UI1.8也未修复,真不知道该怎么说好.. JQUI 开发提交BUG的帖子:http://dev.jqueryui.com/ticket/3623 解决办法相当不科学~ 我的解决办法,个人感觉好过那个,因为我只隐藏横的滚动条,呵呵 附上修改的代码: 修改:jquery.ui.dialog.js 代码如下: var $el = (this.oldInstances.pop() || $().addClass(ui-widget-overlay)) .appendTo(document.body) .css({ width: this.width(), height: this.height() }); #在...
查找了很多方法,有些不能实现(被滚动内容的宽度未知,但使用这种方法必须已知),其它的不能完全兼容这些浏览器(IE6,Firefox,Chrome)。最后决定使用JQuery的Slider控件。 1. 下载jquery-1.3.2.min.js,jquery-ui-1.7.1.custom.min.js 2. Html 代码如下: 滚动内容 3. css 代码如下: #topslider { width: 98%; height: 6px; background: #BBBBBB; position: relative; } #bottomslider { width: 98%; height: 6px; ba...
这个比较简单,做个记录而已。 创建一个嵌套节点,让外层节点产生滚动条,然后用offsetWidth - clientWidth即可获得滚动条宽度。需要注意的是为了避免页面抖动,可以设置外层元素position:absolute和visibility:hidden 参考: 代码如下: function getScrollWith(){ var wrap = setAttributes(document.createElement(div),{ style : { width : 200px, height: 200px, overflow: auto, position:absolute, visibility:hidden } }) ...
虽然平滑性处理的不好,但非常适合学习 代码如下: //怎么获取网页的高度 让页面一出来就滚动条在最底端 function myScroll() { //前边是获取chrome等一般浏览器 如果获取不到就是ie了 就用ie的办法获取 var x=document.body.scrollTop||document.documentElement.scrollTop; var timer=setInterval(function(){ x=x-100; if(x{ x=0; window.scrollTo(x,x); clearInterval(timer); } window.scrollTo(x,x); },"250"); } ...
比如一个网页的聊天室,滚动条会随着内容的增加自动往下滚动。 当用户鼠标在滚动条上按下的时候,我们可以假设他(她)正在浏览聊天内容,那么这个时候好的用户体验就不能让滚动条再自动滚动了。 为了实现这个功能,可能大家首先会想到的就是mouse down 和 mouse up事件了。 可是具体实现的时候我们会发现在滚动条上按下鼠标左键再松开的时候,捕获不到mouse up了。如下面例子 代码如下: var captureTarget = null; function ...
这是一个跟随滚动条漂浮的JS特效,就是说滚动条滚动而元素相对屏幕位置不变 网上有很多类似的效果,本代码比较起来有如下优点: 1. 兼容IE6.0+ & FF1.5+ 2. 使用非常简单,属于菜鸟最爱的那种拿来就能用的,见下面说明 3. 元素之间不会起冲突,一页中可以有n个特效,多元素使用无代码冗余 缺点有: 1. 只能在声明为xHTML的文档中使用 2. 元素最好放在body下 3. 滚动时不可避免的会有闪烁(已经比较轻微,但追求完美者可能觉得不爽)...
代码如下: 拉动滚动条加载数据 $(function () { var i = 4;$(window).bind("scroll", function (event) { //滚动条到网页头部的 高度,兼容ie,ff,chrome var top = document.documentElement.scrollTop + document.body.scrollTop; //网页的高度 var textheight = $(document).height(); // 网页高度-top-当前窗口高度 if (textheight - top - $(window).height() = 100) { return; //控制最大只能加载到100 } $('#div1').css(...
核心代码: 代码如下: $(function() { $(window).scroll(function() { var top = $(window).scrollTop()+200; var left= $(window).scrollLeft()+320; $("#editInfo").css({ left:left + "px", top: top + "px" }); }); }); 用户名: 密码: 年龄: 备注: 在线演示 http://demo.jb51.net/js/2012/jquery_demo/jquery_div.html记得以前写这样的代码比较麻烦,现在有了JQuery简单多了,就几行代码搞定!JavaScript教程/参考手...
例如:淘宝商品详情里,滚动条往下来拉的时候,商品详情和评价那个nav会固定,现在很多网站也都有这样类似的效果,现在流行这个么?元芳,你怎么看?我也在网上找了找代码,屡试不爽啊,很多代码乱且没用。于是乎,我自己写一个,代码非常之简单,只有10几行,但遗憾的是,不兼容IE6,如果谁有兼容IE6的例子,还请指教。 直接贴下代码吧。 代码如下: demo $(document).ready(function(){ var loaded = true; var top = $("#dem...
问题:iframe 上下滚动条如何默认在下方,做的是聊天工具,数据多了,每次刷新出现的上下滚动默认在上方,还需下拉到下面才能看到聊天记录,有办法让它出现在下方吗? 答案:直接在iframe里写window.scrollTo(0,9999999)或者设置div等容器的scrollTop 代码如下: document.getElementById(“x”).scrollTop = document.getElementById(“x”).scrollHeight window.scrollTo(0,9999999) 这个是解决了在下方,但是有新信息后,滚动条...
获取浏览器窗口的可视区域高度和宽度,滚动条高度有需要的朋友可参考一下。IE中,浏览器显示窗口大小只能以下获取: 代码如下 代码如下:document.body.offsetWidth document.body.offsetHeight在声明了DOCTYPE的浏览器中,可以用以下来获取浏览器显示窗口大小: 代码如下 代码如下:document.documentElement.clientWidth document.documentElement.clientHeightIE,FF,Safari皆支持该方法,opera虽支持该属性,但是返回的是页面尺...
主流浏览器默认为html元素提供的滚动条不美观,而且前端开发人员想对其通过css进行统一样式的美化也是不可实现的。比如ie可以通过样式来实现简单的美化、Webkit内核浏览器可以控制滚动条的显示效果,firefox则不允许用户为滚动条定义样式。但是对于追求友好的用户体验的前端开发人员,是不会被这些浏览器的不一致行为所阻止的。我们可以自己通过标准的html元素模拟来实现自定义的滚动条。 这里是自己在工作不太忙的时候写出来了一个...
JS:代码如下:(function(win){ var doc = win.document,db = doc.body; var mousewheel = onmousewheel in document ? mousewheel : DOMMouseScroll; var skyScroll = function(opts){ return new skyScroll.prototype.init(opts);}; skyScroll.prototype = { constructor:skyScroll, //初始化 init:function(opts){ var set = _extend({ target:contentbox,...
写了个js自制滚动条,首先,先看一下demo(点击这里) 先 有两个demo,右边那个黑色那个,是我一开始写的比较肤浅的代码:代码如下:var scrollself=(function(){var scrollblock, //滚动块 scrollcontent, //被滚动的内容 scrollbar, //滚动条 scrollpanel, //滚动内容的滚动区域 cdistance, //滚动内容要滚动的距离 bdistance, //滚动块要滚动的距离 minuTop, //滚动条头尾...