核心代码： 代码如下: $(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...
获取浏览器窗口的可视区域高度和宽度,滚动条高度有需要的朋友可参考一下。IE中，浏览器显示窗口大小只能以下获取： 代码如下 代码如下:document.body.offsetWidth document.body.offsetHeight在声明了DOCTYPE的浏览器中，可以用以下来获取浏览器显示窗口大小： 代码如下 代码如下:document.documentElement.clientWidth document.documentElement.clientHeightIE，FF，Safari皆支持该方法，opera虽支持该属性，但是返回的是页面尺...
代码如下: jQuery(document).ready( function($){ $("container").lazyload();$("img").lazyload({ placeholder : "grey.gif", //加载图片前的占位图片 effect : "fadeIn" //加载图片使用的效果(淡入) }); }); #container { height: 2500px; background:#333; } JavaScript教程/参考手册 JavaScript热搜 Vue利用canvas实现移动端手写板的方法vue2.0 移动端实现下拉刷新和上拉加载更多的示例解决vue-router...
当一个页面内容很长的时候，侧边栏栏目可能显得太短，当窗口滑动到靠下的位置，则侧边即失去了展示内容的机会。很多新闻资讯类网站如新浪、网易、CSDN等，会在边栏的右下角以固定的小弹窗形式，以提供更多的内容展示方式，但这并不适合博客和web2.0风格的网站。 现在很多的独立博客和网站如人人网等，都使用了让侧边栏模块随滚动条滑动而位置固定的效果。就是当一个页面很长的时候，设定侧栏内容会跟随滚动条，这种效果适用于评论较...
代码如下: $("#feedbackContainer").scrollTop($("#feedbackContainer").height());
JQuery计算滚动条长度和位置，代码如下： javascript 代码如下: var scrMinHeight = 1; //滚动条最小高度 var scrMaxHeight = 0; //滚动条最大高度 var scrDefualtTop = 80; //滚动条默认位置 var scrHeight = 0; //初始化滚动条 function InitScroll() { scrMaxHeight = $("#mainScrollContent").height(); //文本框高度 scrHeight = document.getElementById("mainScrollContent").scrollHeigh...
这篇文章介绍了jquery滚动条事件的简单实例，有需要的朋友可以参考一下代码如下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script type="text/javascript" src="jquery-1.6.2.js"></s...
最近做项目中有一个模块是用于实时监控的，左边有个菜单栏用于显示所有的设备，那当然是从数据库中动态获取的了，右边是个iframe用于显示监控画面。本来这个功能并不复杂，左边的菜单项是利用dtree.js来实现的，可时当功能实现完成之后，却发现一个问题，就是左边菜单栏中的设备名有的会很长，会超出了div的长度，准确说是左边iframe的宽度和长度不够。那么，这时就必须要利用滚动条了，可以设置左边菜单项div的overflow-x:auto;ov...
使用JQuery添加如下代码 代码如下: $(#sourceDiv).scroll( function() { $(#targetDiv).scrollTop($(this).scrollTop()); $(#targetDiv).scrollLeft($(this).scrollLeft()); }); $(#targetDiv).scroll( function() { $(#sourceDiv).scrollTop($(this).scrollTop()); $(#sourceDiv).scrollLeft($(this).scrollLeft()); }); 效果图：
在使用dialog插件时，默认是屏幕居中的，但是当页面出现滚动条时，dialog并没有随着滚动条往下滚动，这时就需要用户滑动滚动条来定位dialog，这不人性化，在说出解决方案前先来普及一下jquery关于定位的几个方法 代码如下: //获取浏览器显示区域的高度 $(window).height(); //获取浏览器显示区域的宽度 $(window).width(); //获取页面的文档高度 $(document.body).height(); //获取页面的文档宽度 $(document.body).width(); //获...
这是一个js的页面滚动条插件 使用时引入三个文件：（路径自行填写） 代码如下: 然后再给需要添加滚动条的容器加上一个方法，搞定 代码如下: $(function(){ $("#contentDiv").jScrollPane(); }) 太好用了！ ps：如果要修改滚动条的默认样式可以打开jquery.jscrollpane.css文件修改 当然这作为jquery的一个插件，原始的jquery包不能少且要放在插件包之前，本文略。JavaScript教程/参考手册 JavaScript热搜 自定义...
代码如下: 滚动条下拉DIV固定在头部不动 *{padding:0;margin:0;} .ab{ width:100%; background-color:#eee; height:250px; text-align:center; line-height:250px;} .bc{ width:100%; background-color:#eee; text-align:center; text-align:center; color:#fff; font-size:24px; background-color:#060;} .pf{ width:100%; height:50px; background-color:#C00; text-align:center; line-height:50px; color:#fff;} /*-----...
js与jquery获得页面大小、滚动条位置、元素位置 代码如下://页面位置及窗口大小 function GetPageSize() {var scrW, scrH; if(window.innerHeight && window.scrollMaxY) { // Mozilla scrW = window.innerWidth + window.scrollMaxX; scrH = window.innerHeight + window.scrollMaxY; } else if(document.body.scrollHeight > document.body.offsetHeight){ // all but IE Mac scrW = document.body.scrollWidth;...
代码如下:自定义滚动条插件html,body{height:100%;}body {margin:0; padding:0; background:#111 url(mcs_demo_bg.jpg) no-repeat; min-width:1100px; min-height:940px;}a:link,a:visited,a:hover{color:#C30;}.info{position:absolute; left:40px; top:20px; width:260px; color:#CCC; font-family:"Lobster",Arial, Helvetica, sans-serif; font-size:18px; padding:5px;}.info .big{font-size:34px;}.postURL{position:absolut...