小知识点,废话不多说,直接上代码 css: 代码如下:<pre name="code" class="css"><style> #anchor:{ position:absulate; top:40%; left:40%; width:100px; height:100px; background-color:red; } </style></pre><br> js: 代码如下:<pre name="code" class="javascript">var auchorTop = $("#anchor").css("top"); auchorTop = Number(auchorTop.substring(0, anchorTop.indexOf("p"))); //首先在监听器外部记录某id=anchor的标...
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;...
div在顶部不变、滚动条滚动,div还是在顶部!直接上传源码了: 方法一: 代码如下:<!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> <title>div浮层,滚动条移动,保持位置不变</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> body{b...
js+css 实现遮罩居中弹出层(随浏览器窗口滚动条滚动) 代码如下:<!doctype html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> *{}{margin:0;padding:0;} html{}{_background:url(about:blank);} /**//* 阻止闪动 in IE6 , 把空文件换成about:blank , 减少请求 */ body{}{background:#fff; font: 12px/1.5 Tahoma,Geneva, \\5b8b\\4f53, sans-serif; height:100%;} .wrap{}{height:980px; padding-to...
代码如下:<!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>滚动条下拉DIV固定在头部不动</title> <script type="text/javascript" src="http://img.fishburg.net/ks/js/jquery-1.8.js"></script> <style> *{padd...
这是一个js的页面滚动条插件 使用时引入三个文件:(路径自行填写) 代码如下:<link type="text/css" href="路径/jquery.jscrollpane.css" rel="stylesheet" media="all" /> <script type="text/javascript" src="路径/jquery.mousewheel.js"></script> <script type="text/javascript" src="路径/jquery.jscrollpane.min.js"></script> 然后再给需要添加滚动条的容器加上一个方法,搞定 代码如下:$(function(){ $("#contentDiv...
判断滚动条到底部,需要用到DOM的三个属性值,即scrollTop、clientHeight、scrollHeight。 scrollTop为滚动条在Y轴上的滚动距离。 clientHeight为内容可视区域的高度。 scrollHeight为内容可视区域的高度加上溢出(滚动)的距离。 从这个三个属性的介绍就可以看出来,滚动条到底部的条件即为scrollTop + clientHeight == scrollHeight。 废话不多少说,赶紧上代码(兼容不同的浏览器)。 代码如下://滚动条在Y轴上的滚动距离 fun...
代码如下:function getScrollTop(){ var scrollTop=0; if(document.documentElement&&document.documentElement.scrollTop){ scrollTop=document.documentElement.scrollTop; }else if(document.body){ scrollTop=document.body.scrollTop; } return scrollTop; }
代码如下:<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="html.aspx.cs" Inherits="WebApplication1.html" %> <!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 runat="server"> <style type="text/css"> * { margin: 0; padding: 0; } { height: 1000px; } #mainBox { width: 250px...
代码如下:#topmenu{position:absolute;top:100px;background:#4b4a4a;width:100%;margin:0 auto;clear:both;overflow:hidden;z-index:998;left:0} <script type="text/javascript"> jQuery(document).ready(function() { var topmenu = jQuery("#topmenu"); var topmenu_top = topmenu.offset().top; reset_topmenu_top(topmenu, topmenu_top); jQuery(window).scroll(function() { reset_topmenu_top(topmenu, topmenu_top); }); ...
使用JQuery添加如下代码 代码如下:$(#sourceDiv).scroll( function() { $(#targetDiv).scrollTop($(this).scrollTop()); $(#targetDiv).scrollLeft($(this).scrollLeft()); }); $(#targetDiv).scroll( function() { $(#sourceDiv).scrollTop($(this).scrollTop()); $(#sourceDiv).scrollLeft($(this).scrollLeft()); }); 效果图:
最近做项目中有一个模块是用于实时监控的,左边有个菜单栏用于显示所有的设备,那当然是从数据库中动态获取的了,右边是个iframe用于显示监控画面。本来这个功能并不复杂,左边的菜单项是利用dtree.js来实现的,可时当功能实现完成之后,却发现一个问题,就是左边菜单栏中的设备名有的会很长,会超出了div的长度,准确说是左边iframe的宽度和长度不够。那么,这时就必须要利用滚动条了,可以设置左边菜单项div的overflow-x:auto;ov...
代码如下:function setheight() { var div=document.getElementById("event_basicInfo"); //div.style.width="40%"; div.style.height=400; div.style.overflow="auto"; } window.onload=setheight;
代码如下:<!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"></script><script type="text/javascript">$(function(){var lazyheight = 0; /...
JQuery计算滚动条长度和位置,代码如下: javascript 代码如下:<script type="text/javascript"> var scrMinHeight = 1; //滚动条最小高度 var scrMaxHeight = 0; //滚动条最大高度 var scrDefualtTop = 80; //滚动条默认位置 var scrHeight = 0; //初始化滚动条 function InitScroll() { scrMaxHeight = $("#mainScrollContent").height(); //文本框高度 scrHeight = document.getElementById("...