CSS3和jquery都可以实现缓动追逐效果，但是考虑到浏览器的兼容性，建议使用jquery animate方法来实现。 先给大家展示下实现效果如下：效果演示 源码下载 引用文件： jquery-1.11.1.min.js htmljqueryvar $first=$('#first'); var $second=$('#second'); (function(){ move1(); move2(); })() function move1(){ $first.animate({ "left":220, "top": 0 },400).animate({ "left":220, "top":220 },400).animate({ "left":0, ...
css实现导航菜单带背景图效果，sky整理收集。 ul,li{ list-style:none; float:left;} body{ font-size:12px; line-height:1.6; font-family:Verdana, "宋体", Arial; text-align:center;} #info li{ margin-left:4px; margin-top:15px;} #info a {display:block;text-align:center; padding-left:15px; padding-top:2px;padding-bottom:1px;background-image: url(/upload/201007/20100714195929854.gif); background-repeat...
这也能用CSS来实现啊！为了演示方便，这里用JavaScript代码去控制了扑克牌的切换，挺不错的。Playing Cards with CSS3! body { background: #DDDDDD; overflow: hidden; } body .fire { color: #FF0000; } p { background: #FFFFFF; border: 1px solid #CCCCCC; border-radius: 5px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; box-shadow: 5px 5px 5px #CCCCCC; -webkit-box-shadow: 5px 5px #CCCCCC; -moz-...
CSS导航 首页 关于我们 公司简介 董事长&总裁 发展历程 公司荣誉 产品&服务 产品1 配套 配件 产品2 产品2-1 产品2-2 服务 服务111 服务112 服务113 服务114 服务115 新闻中心 公告 行业新闻 人力资源 人才战略 社会招聘 公司福利 合作伙伴 伙伴1 伙伴2 伙伴3 联系我们 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
Js+CSS间断和不间断文本滚动代码 .box{width:150px;height:25px;line-height:25px;border:#bbb 1px solid;overflow:hidden;} .box ul{margin:0;padding:0} .box li{height:25px;line-height:25px;font-size:12px;text-align:center;list-style-type:none;} 第一行 第二行 第三行 第一行 第二行 第三行 function startmarquee(lh,speed,delay,index){ var t; var p=false; var o=document.getElementById("marqueebox"+ind...
图片立体边框效果 .image{padding:10px;border:1px solid #000;-moz-box-shadow:3px 3px 4px #000;-webkit-box-shadow:3px 3px 4px #000;box-shadow:3px 3px 4px #000;background:#fff;filter:progid:DXImageTransform.Microsoft.Shadow(Strength=4,Direction=135,Color='#000000');} [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
语法说明： E -- 元素 att -- 属性 val -- 属性值 E:first-child E:last-child 匹配文档中具有att属性的E元素 语法: E[att] 匹配文档中具有att属性且其值为val的E元素 语法: E[att=val] 匹配文档中具有att属性且其中一个值（多个值使用空格分隔）为val(val不能包含空格)的E元素 语法: E[att~=val] 匹配文档中具有att属性且其中一个值为val，或者以val开头紧随其后的是连字符的E元素 语法: E[att|=val] 匹配文档中具有att属性且其值...
美工做的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...