用过Arcgis的筒子们对于Arcmap里面的一个卷帘效果肯定记忆很深刻，想把它搬到自己的WebGIS系统中去，抱着同样的想法，我也对这种比较炫的卷帘效果做了一下研究，吼吼，出来了，给大家汇报一下成果 看到这样的效果，你是不是小鸡动了一下，嘿嘿，别急，听我慢慢道来。 首先，容器。分别用两个DIV来显示两个不同时期的影像。接下来设置两个容器的样式，代码： #after{ position: absolute; top: 0px; left: 0px; background-imag...
在页面点击"注册"，出现一层有不透明度的黑色遮罩；遮罩层的上方是注册框；此时无法点击页面上除注册框外的其他元素；点击注册框上的"随便逛逛"，遮罩层消失。 预览地址： http://jsfiddle.net/p2x3c7df/embedded/result/ 要点： 1.注册框始终水平、垂直居中，包括鼠标滚轮上下滚动页面、缩放页面和调整浏览器窗口大小时 主要由CSS控制，注册框的宽度和高度都已经确定( 620*420px )，首先使用position:fixed来使它相对于浏览器窗口...
CSS伪元素非常强大，它经常被用来创建CSS三角形提示，使用CSS伪元素可以实现一些简单的效果但又不需要增加额外的HTML标签。有一点就是Javascript无法获取到这些CSS属性值，但现在有一种方法可以获取到： 看看下面的CSS代码： .element:before {content: NEW;color: rgb(255, 0, 0); }.element:before {content: NEW;color: rgb(255, 0, 0); }为了获取到.element:before的颜色属性，你可以使用下面的代码： var color = window.getC...
最近在写项目的framework，写个JQueryMessageBox的类，以使用jquery ui中的dialog()来显示消息框，为了使方法方便调用，便加入了自动判断页面是否加入了ui.js和ui.css,代码如下： //如果没有包含ui.js,则引用 if ($(script[src$=""jquery-ui-1.8.11.custom.min.js""]).length == 0) {{ $(""<script src=/js/jquery-ui-1.8.11.custom.min.js type=text/javascript />"").appendTo(head); }} //如果没有加载css,则加载 if ($(li...
一个简单的动态加载js和css的jquery代码，用于在生成页面时通过js函数加载一些共通的js和css文件。 //how to use the function below: //$.include(file/ajaxa.js);$.include(file/ajaxa.css); //or $.includePath = file/;$.include([ajaxa.js,ajaxa.css]);(only if .js and .css files are in the same directory) $.extend({ includePath: , include: function(file) { var files = typeof file == "string" ? [file] : ...
代码如下:function preview(oper) { if (oper < 10) { bdhtml = window.document.body.innerHTML;//获取当前页的html代码 sprnstr = "<!--startprint" + oper + "-->";//设置打印开始区域 eprnstr = "<!--endprint" + oper + "-->";//设置打印结束区域 prnhtml = bdhtml.substring(bdhtml.indexOf(sprnstr) + 18); //从开始代码向后取html prnhtml = prnhtml.substring(0, prnhtml.indexOf(eprnstr));//从结束代码向前取html windo...
代码如下:<%@page pageEncoding="utf-8" contentType="text/html;charset=utf-8" %> <HTML> <HEAD> <title>WebForm5</title> <style>/* Root = Horizontal, Secondary = Vertical */ ul#navmenu-h { margin: 0; border: 0 none; padding: 0; width: 500px; /*For KHTML*/ list-style: none; height: 24px; } ul#navmenu-h li { margin: 0; border: 0 none; padding: 0; float: left; /*For Gecko*/ display: inline; list-style: n...
用js如何获取div中css的 margin、padding、height、border等。你可能说可以直接用document.getElementById("id").style.margin获取。但是你说的只能获取直接在标签中写的style的属性，无法获取标签style外的属性（如css文件中的属性)。而下面方法则两者值都可以获取。实例效果图如下: js在获取css属性时如果标签中无style则无法直接获取css中的属性，所以需要一个方法可以做到这点。getStyle(obj,attr) 调用方法说明：obj为对像...
使用css控制页面有4种方式，分别为行内样式(内联样式)、内嵌式、链接式、导入式。 行内样式(内联样式)即写在html标签中的style属性中，如<div style="width:100px;height:100px;"></div> 内嵌样式即写在style标签中，例如<style type="text/css">div{width:100px; height:100px}</style> 链接式即为用link标签引入css文件，例如<link href="test.css" type="text/css" rel="stylesheet" /> 导入式即为用import引入css文件，例如@im...
js函数，可以放到单独的js文件中也可以放到当前页的<head>标记之内代码如下:function getCSS(){ datetoday = new Date(); timenow=datetoday.getTime(); datetoday.setTime(timenow); thehour = datetoday.getHours(); if (thehour<12) display = "1.css"; else if (thehour>12) //样式表的名称，或者你可以加上路径 display = "1.css"; else ...
模拟select 并带有提交后取得数据的代码 HTML Code 代码如下:<div id="dropdown"> <p>请选择城市</p> <ul> <li><a href="#" rel="2">北京</a></li> <li><a href="#" rel="3">上海</a></li> <li><a href="#" rel="4">武汉</a></li> <li><a href="#" rel="5">广州</a></li> </ul> </div> <div id="result"></div> JavaScript Code 代码如下:<script type="text/javascript"> $(function(){ $("#dropdown p").click(function(){ v...
一、ready函数的实现经常用jQuery类库或其他类库中的ready方法，有时候想想它们到底是怎么实现的，但是看了一下jQuery中的源码，涉及到的模块比较多，(水平有限)代码比较难看懂；自己结合了一些书籍内容，总结一下。先说一下ready函数的实现思路：变量ready通过表达式赋值，右侧为一个自执行匿名函数，在这个匿名函数中，首先为各个浏览器的事件绑定处理函数，并为isReady赋值(根据事件异步处理程序来确定)，然后返回一个传参闭包，...
jquery动态加载css,js文件方法简单很， 例 方法1： 代码如下 代码如下:$.getscript("test.js"); 方法2： 代码如下 代码如下:function loadjs(file){ var head = $(head).remove(#loadscript); $("<scri"+"pt>"+"</scr"+"ipt>").attr({src:file,type:text/javascript,id:load}).appendto(head); }方法3： 代码如下 代码如下:$("<scri"+"pt>"+"</scr"+"ipt>").attr({src:file,type:text/javascript,id:load}).appendto($(head).re...
这个功能主要是解决内容页中的图片过大撑出，导致页面比较难看，就需要这样的代码，需要的朋友可以参考下 需求：图片width<=600px,height<=800。 1、利用max-width,max-height使图片等比例自动缩放代码： 代码如下:img{max-width: 600px;max-height: 800px;} 由于ie6不支持css max-width,max-height,所以在ie6中需要利用javascript脚本来控制大小。 2、用javascript脚本来兼容ie6，代码如： 代码如下:var img_width = img.Offse...
document.styleSheets里保存了当前页面上所有CSS规则的集合。通过它可以遍历出页面<style>里定义的所有selector，访问selectorText属性可得选择器的匹配规则。然后将规则规则传递给 document.querySelectorAll 即可获取页面内匹配此规则的元素列表。这里我们只求CSS规则的覆盖率，所以访问 querySelectorAll().length 即可。通过排序就可看出各个CSS使用情况。代码很简单。代码如下:var usage = [];var sheets = document.styleShe...