实际上细心的朋友会发现，这个顶部的工具条实则是一个平铺的背景图像，CSS起到固定背景的作用，也算是一种独特的实现方法。 顶部拖动无闪烁菜单栏 * { margin: 0px; padding: 0px; } body { background-image: url(); background-attachment: fixed; } #topNavWrapper { width: 980px; text-align: left; height: 31px; margin: 0px auto; z-index:100; _position: relative ; _top:0px; } #topNav { width: 980px; float: ...
其中一种办法是改变页面元素的CSS类(Class)，这在传统的Javascript里，我们通常是通过处理HTML Dom的classname特性来实现的；而jQuery里提供三种方法来实现这个功能，虽然它们和传统方法的思想相通，但是却节省了许多代码。还是那句话 - “jQuery让JavaScript代码变得简洁！” 1. addClass() - 添加CSS类 代码如下:$("#target").addClass("newClass"); //#target 指的是需要添加样式的元素的ID //newClass 指的是CSS类的名称 2. ...
其中一种接受两个输入参数：样式属性和样式值，它们之间用逗号分开。比如我们要改变链接颜色，我们可以使用下面的代码： 代码如下:$("#61dh a").css(color,#123456); //这里选择器‘$("#61dh a")表示ID为‘#61dh的元素下的所有链接。 //.css(‘color,#123456);表示把颜色设为#123456 如果我们需要改变多个样式属性，我们可以先定义属性变量，然后直接赋值给css()方法。示例如下： 代码如下:var divcss = { background: #EEE, wi...
比如为某个HTML元素级联了一组样式信息，其中width属性的值为80px。然后调用脚本读取这个值，得到的结果总是一个空字符串，而事实上我想得到"80px"。针对这种情况，David Flanagan在《JavaScript 权威指南》（第五版）一书中给出了解决方案。以下是针对JavaScript: The Definitive Guide, 5th Edition Chapter16 Section4的翻译 脚本计算的样式 HTML元素的style属性相当于style HTML 特性， 而作为style属性的值，CSS2属性对象只为...
1.透明度： 如果没有为一个文本指定一个背景颜色或者一个背景图像，那么这个元素的背景通常是透明的。 这一点很重要，如果一个绝对定位的且带有文本的元素放在一个有文本的元素之上，那么将会十分的混乱，那么我们就可以通过设置背景图片或者背景颜色来进行遮盖，如果必须的话我们可以将其显示的设置为"transparent"（透明的） 通用的设置透明元素通用的css如下： 代码如下:opacity:.75;//ff new -moz-opacity:.75;// transparenc...
CSS给图片添加阴影 *{padding:0;margin:0;} body{background:#E8EDF1;padding:20px;} #profileAvatar {overflow:hidden;zoom:1;} #profileAvatar i{float:left;visibility:hidden;background:url(//files.jb51.net/demoimg/200912/avatar.gif) 0 0 no-repeat;} #profileAvatar i i{background-position:100% 0; } #profileAvatar i i i{background-position:0 100%;} #profileAvatar i i i i{padding:0 5px 6px 0;background...
代码如下:var lCSSCoder={ format : function(s){//格式化代码 s=s.replace(/\s*([\{\}\:\;\,])\s*/g,"$1"); s=s.replace(/\,[\s\.\#\d]*{/g,"{"); s=s.replace(/([^\s])\{([^\s])/g,"$1 {\n\t$2"); s=s.replace(/([^\s])\}([^\n]*)/g,"$1\n}\n$2"); s=s.replace(/([^\s]);([^\s\}])/g,"$1;\n\t$2"); s=s.replace(/;\s*;/g,";");//清除连续分号 return s; }, pack :function(s){//压缩代码 s=s.replace(/\/\*(.|\n)*?\*\//g,"");//...
相比JavaScript，CSS的语法就简单多了，主要是处理注释、字符串、CSS样式名称、CSS样式值、缩进和换行，具体详情请看代码。 Javascript实现CSS代码高亮显示 body{ font-size:12px; line-height:1.8; font-family:'Courier New', Courier, monospace; } #area{ width:320px; height:120px; } body{ font-size:12px; line-height:1.8; } #area{ width:320px; line-height:1.5; font-family:"Courier New", Courier, monospace;...
CSS渐变背景 var setGradient = (function(){ var p_dCanvas = document.createElement('canvas'); var p_useCanvas = !!( typeof(p_dCanvas.getContext) == 'function'); var p_dCtx = p_useCanvas?p_dCanvas.getContext('2d'):null; var p_isIE = /*@cc_on!@*/false; try{ p_dCtx.canvas.toDataURL() }catch(err){ p_useCanvas = false ; }; if(p_useCanvas){ return function (dEl , sColor1 , sColor2 , bRepeatY ){ if(typ...
你可以把它看作像写一般的CSS列表一样，只用增加两三行代码就能完成切换效果。 文本定时变动代码 #newslist{ background:#f8f8f8;border:1px solid silver;padding:1px;height:20px;line-height:20px;width:288px; } #contain{ font-size:12px;overflow:hidden;list-style:none;width:288px;height:20px;margin:0px;padding:0; } #contain li{ height:22px;line-height:22px;white-space:nowrap;overflow:hidden; } 百度，...
我们用js书写css样式通常会用下面的两种方式： 一般情况下我们用js设置元素对象的样式会使用这样的形式： 代码如下:var element= document.getElementById(”id”); element.style.width=”20px”; element.style.height=”20px”; element.style.border=”solid 1px red”; 但是上面的方法有一个缺点，样式一多，代码就很多；而且通过JS来覆写对象的样式是比较典型的一种销毁原样式并重建的过程，这种销毁和重建，都会增加浏览器...
代码如下:/** * @author Supersha * @QQ:770104121 */ var cssQuery = { //parent:用于存储当前节点的父节点的引用 parent: document, select: function(selectorStr){ var selectors=selectorStr.split(" "); //分隔字符串 for (var i = 0, len = selectors.length; i < len; i++) { var el = this.parent || document; //用于存储指定class属性的节点引用 var val=this.replaceStr(selectors[i]); //代替掉"#"和"."点号，用于获取...
]但在《CSS二级菜单》中，如果一级菜单中的超链接是#，那么只要单击该一级菜单，那么与这个一级菜单对应的二级菜单就会一直显示在网页中，不能隐藏，是一个小小的bug。后来仔细的想了一想，其实，无论是什么样的二级菜单，原理都是一样的： 1、每一个一级菜单都会对应一个层，而这个层里放着的就是该一级菜单对应的二级菜单。 2、默认情况下，二级菜单这个层是隐藏的，在CSS中将层的display属性值设为none，可以达到这一目的。 3、...
css菜单演示 0? " ": "") + "sfhover"; } sfEls[i].onMouseDown=function() { this.className+=(this.className.length>0? " ": "") + "sfhover"; } sfEls[i].onMouseUp=function() { this.className+=(this.className.length>0? " ": "") + "sfhover"; } sfEls[i].onmouseout=function() { this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"), ""); } } } window.onload=menuFix; // 脚本之家 ...
当我们需要的是一条规则的时候，总不能在每次dom发生变化的时候去执行这个操作，否则也太效率低下了。好在dom中css rules也是可以修改的。不过不同浏览器的对于css rules的接口描述也不同，其中ie中以类似hash table的方式，而ff以数组方式。 从可编程性上说，ie的接口描述更讨程序员喜欢，不过从逻辑上说，ff显然更为合理。 我提供了类似于ie的方式对两套代码进行简单包装，不过ie在dom的css removeRule之后并不能确定同步的把规则...