document.styleSheets里保存了当前页面上所有CSS规则的集合。通过它可以遍历出页面里定义的所有selector，访问selectorText属性可得选择器的匹配规则。然后将规则规则传递给 document.querySelectorAll 即可获取页面内匹配此规则的元素列表。这里我们只求CSS规则的覆盖率，所以访问 querySelectorAll().length 即可。通过排序就可看出各个CSS使用情况。代码很简单。代码如下:var usage = [];var sheets = document.styleSheets; fo...
jQuery Animation的工作原理是通过将元素的CSS样式从一个状态改变为另一个状态。CSS属性值是逐渐改变的，这样就可以创建动画效果。只有数字值可创建动画（比如 "margin:30px"）。字符串值无法创建动画（比如 "background-color:red"）。详细用法请参考jQuery 效果 - animate()方法和官方教程。 像CSS3好多效果因为不是数值的，所以是没有办法直接通过animate()方法实现的。如translate(), rotate(), scale(), skew(), matrix(), ro...
分享一个气泡提示框，练习的技术有：（1）JS响应鼠标的事件；（2）纯CSS制作三角形。 效果这样： 这是html： 代码如下: 气泡对话框 h1{ font-size: 60px; margin-top: 0; font-family: Arial, sans-serif; text-shadow: 2px 0px 10px #292929; letter-spacing: 0px; text-decoration: none; color: #DDDDDD; } div#left{ border: 1px solid #CCCCCC; width: 200px; height: 300px; background-color: #EEEEEE; float: lef...
div+css+javascript 实现无缝滚动,marquee无缝滚动，无缝滚动,兼容firefox 用marquee实现首尾相连循环滚动效果（仅IE）： 代码如下: 这里是要滚动的内容 用div+css+javascript实现首尾相连循环滚动效果（兼容firefox）： 代码如下: div+css+javascript 实现无缝滚动,marquee无缝滚动，无缝滚动,兼容firefox #scrollobj { white-space: nowrap; overflow: hidden; width: 500px; } 这里是要滚动的内容 function scro...
今天帮朋友写了一些代码,自己觉得写着写着，好几个版本以后，有点满意，于是就贴出来。 都是定死了的。因为需求就只有4个元素。如果是要用CSS的class来处理，那就需要用到CSS3动画了。 代码如下: CSS+jQuery动画效果 body{ z-index: 0; width: 100%; min-height: 400px; } .pages{ position: absolute; } .current{ position: absolute; z-index: 12 !important; left: 0px !important; } .page1{ background-color: #a5c...
一、ready函数的实现经常用jQuery类库或其他类库中的ready方法，有时候想想它们到底是怎么实现的，但是看了一下jQuery中的源码，涉及到的模块比较多，(水平有限)代码比较难看懂；自己结合了一些书籍内容，总结一下。先说一下ready函数的实现思路：变量ready通过表达式赋值，右侧为一个自执行匿名函数，在这个匿名函数中，首先为各个浏览器的事件绑定处理函数，并为isReady赋值(根据事件异步处理程序来确定)，然后返回一个传参闭包，...
CSS： 代码如下: .backToTop { display: none; width: 18px; line-height: 1.2; padding: 5px 0; background-color: #000; color: #fff; font-size: 12px; text-align: center; position: fixed; _position: absolute; right: 10px; bottom: 100px; _bottom: "auto"; cursor: pointer; opacity: .6; filter: Alpha(opacity=60); } jQuery代码 代码如下: (function() { var $backToTopTxt = "返回顶部", $backToTopEle = $().app...
方法一：用CSS和JavaScript实现预加载 实现预加载图片有很多方法，包括使用CSS、JavaScript及两者的各种组合。这些技术可根据不同设计场景设计出相应的解决方案，十分高效。 单纯使用CSS，可容易、高效地预加载图片，代码如下： 代码如下: #preload-01 { background: url(http://domain.tld/image-01.png) no-repeat -9999px -9999px; } #preload-02 { background: url(http://domain.tld/image-02.png) no-repeat -9999px -9999p...
直接贴代码 代码如下://取元素 用两个$是为了不与jquery冲突function $$(s) { return document.getElementById(s);}function setblue() { //先写cookie //writeCookie("ISCSSSTYLE", "css/CRM_blue.css", 365, true); //设置新的css文件 $$("maincss").href = "css/CRM_blue.css"; //取主框架页,并重新设置css文件 //var childobj = window.parent.document.getElementById("ManagerMain").contentWindow; ...
js+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-top:20px;text-align:center;} p{}{font-size:14px;text-align:center;line-height:24px;}...
效果： html: 代码如下: 用法： 代码如下: var total = 310; var pageNo = 1; var pageCount = 31;//共有多少页 var pageSize = 10; var actionName = "list.action"; var otherParam = "&name=www&order=time"; $(function(){ paginate();//分页} ); css: 代码如下: #page{ font-size: 14px; clear: both; padding-top: 1.45em; white-space: nowrap; } #page a{ background: white; border: 1px solid #E7ECF0; display: ...
css3 Animation： 代码如下: @-webkit-keyframes twinkling{ /*透明度由0到1*/ 0%{ opacity:0; /*透明度为0*/ } 100%{ opacity:1; /*透明度为1*/} }Jquery ： 代码如下:$(element).css({"-webkit-animation":"twinkling 1s infinite ease-in-out"}); //在对象element中添加闪烁动画也可以在css样式里添加如下： 代码如下: #element{-webkit-animation: twinkling 1s infinite ease-in-out; }注：...
要判断这个 CSS 文件是否加载完毕，各个浏览器的做法差异比较大，这次要说IE浏览器做的不错，我们可以直接通过onload方法来处理CSS加载完成以后的处理： 代码如下:// 代码节选至seajsfunction styleOnload(node, callback) { // for IE6-9 and Opera if (node.attachEvent) { node.attachEvent(onload, callback); // NOTICE: // 1. "onload" will be fired in IE6-9 when the file is 404, but in // t...
今天帮朋友写了一些代码,自己觉得写着写着，好几个版本以后，有点满意，于是就贴出来。 都是定死了的。因为需求就只有4个元素。如果是要用CSS的class来处理，那就需要用到CSS3动画了。 功能 : 在上方的按钮上滑动，可以切换各个page,点击下方的各个page，也可以切换收缩还是展开状态。 初始效果预览 代码如下: CSS+jQuery动画效果 body{ z-index: 0; width: 100%; min-height: 400px; } .pages{ position: absolute; } ....
1、动态加载js，css文件(用原生js和jquery) iframe结构： frame0(父) frame2（子） frame3（子） frame2中触发事件，动态的向frame3中 加载js、css文件和 dom元素？ *同级之间可以调用，可以 通过 子-父-子 的方式调用同级 parent.parentFram(“这个方法在调用其他子farme”); 1.jquery的append() 代码如下: 速度快，同步（需要引入jquery） var oBody = document.getElementById("frame3_id").contentWindow.$("body"); var str ...