美工做的css样式里icon越来越多，手工来写icon名几乎不可能实现。所以就有了这个功能点：将css样式里的所有icon类列举出来以图形化的形式显示供配置人员选择！ 搜索一圈，发现介绍从css里遍历东西的文章非常少。于是花了半天的时间自己来实现了！先看下一个选择图标的demo： 这里用的是easyui：一个comboxtree。 这里省略引用css和js库的代码（jquery和easyui库）。 html： 代码如下: Javascript： 代码如下: function getstyl...
jQuery的css方法统一了两种写法，直接使用float属性即可，如下css方法中传参数“float”即可以设置也可以获取元素的float。 代码如下: float div $('#d1').css('float', 'right'); var str = $('#d1').css('float'); alert(str); 但jQuery非要自作聪明，加上对cssFloat和styleFloat的支持，见API文档，比如获取元素的float属性时，以下是等价的。1 $('div.left').css('float'); 2 $('div.left').css('cssFloat'); 3 $('div.lef...
很有意思。小邪就跟着做了一个Demo，木有用插件，只挂了jQuery。 Demo 演示页面 一. CSS+jQuery实现随滚动条增减汽水瓶中的液体： 话说喝汽水的那个网站是用一个瓶子的图片，分为瓶口、瓶身、吸管还有瓶底。在这些图片中瓶子内部都是透明的，所以我们可以在底下一层按 x 轴平铺液体的图片，当然记得弄好吸管，吸管则是按照 y 轴平铺。其他具体的请看代码中注释。 啊，对了，那家公司的地址在这里 - http://janploch.de/ 代...
近日在做一些OA前端界面，为了更好管理页面代码想写个js选择器，写着写着发现很费力，索性在网上找找看，功夫不负有心人， 找到一个mini css选择器，且性能不凡：以下代码是压缩后的，仅2KB。 代码如下: var $=(function(){var b=/(?:[\w\-\\.#]+)+(?:\[\w+?=([\"])?(?:\\\1|.)+?\1\])?|\*|>/ig,g=/^(?:[\w\-_]+)?\.([\w\-_]+)/,f=/^(?:[\w\-_]+)?#([\w\-_]+)/,j=/^([\w\*\-_]+)/,h=[null,null];function d(o,m){m=m||document;va...
效果如下： 使用jquery我们可以轻松的实现上面效果，代码如下： 代码如下: jquery奇偶行css效果 /*table中偶数行*/ .tabEven { background: #9d8e8b; } /*table中奇数行*/ .tabOdd { background: #ffffff; } $(document).ready(function () { $("#datalist tr:even").addClass("tabEven"); $("#datalist tr:odd").addClass("tabOdd"); }); 第1行 第2行 第3行 第4行 第5行 JavaScript教程/参考手册 JavaS...
在正式开始本文之前，先来简单介绍下HTML的标签：使用标签，我们可以在HTML页面上定义锚（anchor），锚有两种用法： 通过使用 href 属性，创建指向另外一个文档的链接（或超链接） 通过使用 name 或 id 属性，创建一个文档内部的书签（也就是说，可以创建指向文档片段的链接） 本文的内容与锚的第一种用法有关。 代码如下: $(document).ready(function () { // 单击spanAGo，调用超链接的单击事件 $('#spanAGo').click(fun...
CSS实现鼠标移动到图片，更换图片，这是一个完全用CSS实现的效果，当然用JavaScript也可以实现，当把鼠标移动到图片的时候，图片自动更换为其它的图片，由此我们可以制作一些效果复杂的按钮，比如换色按钮。 CSS实现鼠标移动到图片，更换图片 *{ margin:0; padding:0;} ul li{ list-style:none;} .nav{ width:800px; height:40px; margin:150px auto;} .nav ul li{ float:left; width:200px;} .nav ul li a:link,a:visited{ d...
先给出函数。 代码如下: varaddSheet=function(){ vardoc,cssCode; if(arguments.length==1){ doc=document; cssCode=arguments[0] }elseif(arguments.length==2){ doc=arguments[0]; cssCode=arguments[1]; }else{ alert("addSheet函数最多接受两个参数!"); } if(!+"v1"){//增加自动转换透明度功能，用户只需输入W3C的透明样式，它会自动转换成IE的透明滤镜 vart=cssCode.match(/opacity:(d?.d+);/); if(t!=null){ cssCode=cssCo...
iphone手机桌面效果，因为用了css3样式，只测试了谷歌浏览器。 iphone手机桌面效果 body,div,ul,li{padding: 0; margin: 0; } li{list-style: none; } body {background: #333; } #iphone {width: 900px; height: 600px; background: url(http://files.jb51.net/file_images/article/201212/mobilhdmenu/bg.jpg); position: absolute; top: 50%; left: 50%; margin: -300px 0 0 -450px; } #wrap {width: 240px; height: 360px...
强调连接 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
最近看一个网站，发现显示器不同的分辨率，样式文件调用的也不一样，今天写了一个例子研究一下， 代码如下: 无标题文档 window.onload=function(){ var sc=document.getElementById("sc"); var d=document.getElementById("d"); if(screen.width>1024) //获取屏幕的的宽度 { sc.setAttribute("href","css/c2.css"); //设置css引入样式表的路径 d.innerHTML = "你的电脑屏幕宽度大于1024，我的宽度是 1200px, 背景色现在是红...
js： 代码如下: var posX; var posY; fdiv = document.getElementById("divBody"); document.getElementById("divHead").onmousedown=function(e) { if(!e) e = window.event; //IE posX = e.clientX - parseInt(fdiv.style.left); posY = e.clientY - parseInt(fdiv.style.top); document.onmousemove = mousemove; } document.onmouseup = function() { document.onmousemove = null; } function mousemove(ev) { if(ev==null) ...
代码如下: JS+CSS制作的DIV层最小化和随意拖拽排序功能 body { margin:10px; } #dragHelper { position:absolute;/*重要*/ border:2px dashed #000000; background-color:#FFFFFF; filter: alpha(opacity=30); } .normal { position:absolute;/*重要*/ width:300px; #height:10px; border:1px solid #666666; background-color:#FFFFFF; } .over { position:absolute;/*重要*/ width:300px; #height:10px; border:1px solid #66...
源码下载bxCarousel参数说明： move：每次滚动移动图片的数量，默认为4。 display_num：展示图片的数量，默认为4。 speed：图片滚动速度，默认为500毫秒。 margin：图片间的间距，默认为0。 auto：是否自动滚动，默认为false。 auto_interval：当设为自动滚动时，每次滚动的时间间隔（毫秒），默认为2000毫秒即2秒。 auto_dir：自动滚动的方向，默认为next，你可以试下prev。 next_image：向右滚方向按钮图片，可以用CSS设置。 pre...
DIV+CSS+JS实现不间断横向滚动代码 代码如下: 横向不间断滚动DIV CSS代码-DIVCSS5 .scroll_div {width:600px; height:49px;margin:0 auto; overflow: hidden; white-space: nowrap; background:#ffffff;} .scroll_div img {width:120px;height:49px;border: 0;margin: auto 8px; } #scroll_begin, #scroll_end, #scroll_begin ul, #scroll_end ul, #scroll_begin ul li, #scroll_end ul li{display:inline;}/* 设置ul和li横...