12 2014 档案
摘要：
基于jPlayer制作的音/视频播放器3枚！
阅读全文
基于jPlayer制作的音/视频播放器3枚！
阅读全文
摘要：css：#box { width: 200px; height: 100px; overflow-y: auto;}javascript：$(function () { $("#box").scroll(function () { if ($(this).scr...
阅读全文
摘要：window.onload事件是在页面dom元素加载完后执行，也就包括了img图片中src加载完成，那么img.onload 就不会执行了。$("img").each(function () { var src = $(this).attr("src"); $(this).attr("src",""...
阅读全文
摘要：IE6-7-8是不支持背景色渐变或者半透明背景色的，但是可以使用其私有滤镜实现，而IE滤镜所使用的颜色是8位16进制颜色，每次都算很麻烦，所以写个小工具。下载效果如图：
阅读全文
摘要：Demo下载效果如图：css： #box { width: 280px; height: 150px; background: #ff6565; padding: 20px; position: relative; overflow: hidden; } #content { widt...
阅读全文
摘要：Demo下载效果如图：css： a { display: inline-block; color: #fff; font-size: 12px; text-decoration: none; padding: 0 5px; height: 24px; text-align: cente...
阅读全文
摘要：Demo下载 效果如图：js： css： #loading_box { width: 46px; height: 46px; position: absolute; top: 50%; left: 50%; margin: -23px 0 0 -23px; } #loading_box...
阅读全文
摘要：Demo下载获取iframe的document： function iframeDom(id) { return document.getElementById(id).contentDocument||document.frames[id].document; }jquery： window.o...
阅读全文
摘要：中文，英文，中英混合都有不错的效果： text-align:justify; text-justify:inter-ideograph;
阅读全文
摘要：jQuery select美化插件。 下载效果如图：可设参数："width": "", //设置宽度"id": "", //追加id"class": "" //追加class下载地址示例：页面引入： 调用方法：如果使用默认设置，如下： $("#s1").selectForK13();如果自定义参数...
阅读全文
摘要：Demo下载 效果如图：css： * { padding: 0; margin: 0; } html { overflow-x: hidden; } .box { overflow: hidden; height: 365px; width: 100%; position: rela...
阅读全文
摘要：Dome下载 效果如图：css： #clip { width: 306px; zoom: 1; } #clip:after { content: ""; display: block; height: 0; clear: both; } #clip li { float: left; w...
阅读全文
摘要：input表单单选美化Demo下载 效果如图：css：.choose, .choose ul { display: inline-block; *display: inline; *zoom: 1; color: #b2b2b2; font-size: 14px; vertical-al...
阅读全文
摘要：ie6对hover支持不完善，所以不兼容，最好在火狐或谷歌等标准浏览器中观看。Demo下载效果如图：css： #demo { width: 306px; height: 204px; padding: 3px; border: 1px solid #e5e5e5; margin: 100p...
阅读全文
摘要：原始图片：效果如图：css： .box { width: 150px; padding: 3px; border: 1px solid #e5e5e5; } .img { width: 150px; height: 200px; position: relative; backgrou...
阅读全文
摘要：鼠标移上去，元素位置移动，显示隐藏功能效果。（推荐在火狐或谷歌中观看，会有有动画效果）效果如图：css： .box { width: 200px; height: 300px; position: relative; margin: 200px auto 0 auto; } .box:hov...
阅读全文
摘要：适当调整即可变为图片放大镜效果，或者鼠标移上去显示隐藏内容(ie6对hover支持不够完善，推荐在火狐或谷歌中观看)。效果如图：css： .demo { width: 318px; margin: 100px auto 0 auto; } .demo:after { content: ""; ...
阅读全文
摘要：jQuery提示插件，默认css样式使用了css3属性，所以最好在火狐或谷歌等标准浏览器下浏览。可自定义提示框结构及样式。 下载 可设参数： "addID": "", //追加ID，方便自定义控制 "addClass": "", //追加class，方便自定义控制 "dom": "", //自定义d...
阅读全文
摘要：以前Firefox有个插件，可以把设计稿载入进去，设置成半透明，然后这样布局有所参照，可以尽可能完美的还原页面，甚至精确到像素。但 是随着FF的不断升级，那个插件很久没有更新，已经不能用了。当然我们也有其他方法实现，此神功威力强大，但是内力消耗也甚大，慎用，慎用。对眼神功上篇html:after,b...
阅读全文
摘要：效果如图：javascript：// 页面加载完成后运行window.onload = function () { // 定时器，每隔一段时间刷新剩余时间 var _run = setInterval(timeAuto,200); // 点击按钮重新计算剩余时间 document.getElem...
阅读全文
摘要：效果如图：javascript：window.onload = function () { document.getElementById("change").onclick = function () { var color = document.getElementById("color_get...
阅读全文
摘要：经常写html，css和js(基本上都是jquery)，慢慢的养成习惯，有了一套自己喜欢的代码对齐方式，看起来也满整齐。html：关于html，对齐方式基本相同，子元素缩进就可以了，如图：css：很多人喜欢把css写在一行，整体看一行一行的似乎满整齐，其实看起来很费劲，如果真要在乎那几KB的文件大小...
阅读全文
摘要：DocumentIE5 及其以后版本支持在CSS中使用expression，用来把CSS属性和Javascript表达式关联起来，这里的CSS属性可以是元素固有的属性， 也可以是自定义属性。就是说CSS属性后面可以是一段Javascript表达式，CSS属性的值等于Javascript表达式计算的结...
阅读全文
摘要：html+css+js实现的网页播放器。注：Firefox本地打开不会播放，放在服务端正常运行，其他浏览器可以在本地打开，所以压缩包里附带了一个asp的小服务器，运行AspWebServer.exe自动打开页面，浏览器可正常播放，所有播放器相关js，css，html等文件，均在www文件夹内。css...
阅读全文
摘要：写js的时候，我们经常会使用一些js的数学方法，来将字符串转化成数字，经常会用到取整操作。比如将得到的字符串“09.09”转化成整数数字。常用的有4中方法：parseInt()，Math.ceil()，Math.floor()，Math.round()。1.parseInt()丢弃小数部分,保留整数...
阅读全文
摘要：效果如图：css：#box { width: 500px; height: 200px; overflow: auto; border: 1px #000 solid; margin: 20px auto 0;}javascript：html: 这是第001行 这是第002行 这是第003行 这是第...
阅读全文
摘要：效果如图：css：* { padding: 0; margin: 0; list-style-type: none;}body { padding: 20px 0 0 20px;} #shadow { background: #E8E8E8; position: relative; width: 2...
阅读全文
摘要：使用js和css3实现的时钟效果，支持firefox，chrom等标准浏览器。下载效果如图：javascript：css：html： 1 2 3 4 5 6 7 8 9 10 11 12 5:30:25
阅读全文
摘要：由于工作中遇到鼠标滚轮和拖拽的问题，jquery本身不支持滚动事件，而同一元素同时使用单击和双击事件，那么总会执行一次单击事件，所以在解决后脑袋一热，就想把鼠标的左中右键的单双击和拖拽以及滚轮事件封装成一个插件，方便以后使用。下载功能：1.clickL——左键单击事件2.clickM——中键单击事件...
阅读全文
摘要：javascript：css：html：目前有个缺陷:当页面出现滚动条时，中键单击默认可以拖拽网页的功能还未能屏蔽。哪位知道希望能告诉我。呵呵~~下载地址
阅读全文
摘要：心血来潮想用js做个方格移动的图片轮换，于是捣鼓了小半天弄出来了。DEMO下载效果如下：
阅读全文
摘要：以前在花瓣上看到的一个搜索框交互效果，找不到了。搜索标志获得焦点的时候拉伸成搜索框，失去焦点的时候缩回搜索标志，输入内容回车，则会先缩回搜索标志，而后旋转模拟loading。DEMO下载效果如图：----------------------------------------------------...
阅读全文
摘要：有时我们可能想要从一个页面跳转到另一个页面的过渡变得柔和些，也即是，点击链接后，当前页面渐隐，而后跳转渐显新页面的效果。可以使用jquery轻易实现。效果：页面1：页面1opacity2页面1页面2：页面2opacity页面2原理：$(function(){$("html").css("opacit...
阅读全文
摘要：文章过长，一篇无法保存IE下及标准浏览器下的图片旋转（二）——Canvas（1）同样，作为最后，我们使用使用jquery也为canvas写个旋转demo：javascript：$(function(){varw=$("#pic").width();varh=$("#pic").height();v...
阅读全文
摘要：javascript原生有许多方法，jquery自己也有一套封装好的方法，jquery自己的选择器非常方便，但有时候我们需要 使用原生的一些方法，如果我们使用jquery选择元素，直接调用原生javascript的方法就会出现错误。例如我们要输出一张图片的宽度：原生js：javascript:var...
阅读全文
摘要：文章过长，一篇无法保存。IE下及标准浏览器下的图片旋转（一）——滤镜，CSS33.canvascanvas 是html5中的新标签，使用canvas之前我们先看下它的定义：标签只是图形容器，您必须使用脚本来绘制图形。这个标 签是用来绘图的，包括2d和3d，拥有很多方法，因为我们只是拿来实现图片的旋转...
阅读全文
摘要：关于图片的旋转，一般来说有3种解决方案：（1）滤镜（2）css3（3）canvas。接下来逐一讲解。为了方便理解，我们主要以90度整倍数讲解，兼顾其他角度。1.滤镜（IE专属）1.1旋转滤镜语法如下：filter:progid:DXImageTransform.Microsoft.BasicImag...
阅读全文
摘要：页面布局常用的方式有两种，浮动（float）和定位（position），定位已经讲过了（关于position定位及z-index的理解），这篇主要讲浮动，而浮动和清理浮动是成对出现的，所以也一并讲了。理解浮动前，我们需要一些前置条件：1.盒模型；2.文档流；1.盒模型一个元素的width或者heig...
阅读全文
摘要：我们在写页面时经常会遇到让一个元素自动居中显示的需求，这个元素有可能是块级元素，有可能是行内元素，也可能是文字等等，而居中的需求有可能是水平居中，垂直居中或者两者同时居中。据我目前了解，居中有四种方式：1.利用table表格特性；2.使用table-cell属性以table方式渲染；3.margin...
阅读全文
摘要：position属性规定元素的定位类型，顾名思义，它是用来描述元素使用什么方式，如何来定义位置的属性。position的值有 5个：absolute（绝对定位），fixed（固定定位），relative（相对定位），static（默认值），inherit（继承）。我们所 要理解的只是前4种，对于in...
阅读全文
摘要：接触javascript有一段时间了，平时工作都是尽可能去了解原理，然后自己去实现，从来没有封装过插件。前段时间心血来潮，想 写个无敌版的轮换，于是经过一个月的努力，终于完成，虽然还不够完美，但是就目前我的水平来看，也就只能这样了，以后水平提高了再重构一下（图方便使用了css3，在支持css3的浏览...
阅读全文
摘要：CSS：.clearfix:after{content:"";display:block;height:0;clear:both;}.clearfix{zoom:1;}.clear{clear:both;}原理：对于子元素浮动的元素，使用clearfix来清理。Firefox等标准浏览器以及IE8+...
阅读全文
摘要：RGBa是一种在CSS中声明包含透明效果的颜色的方法，通过RGBa我们可以将一个元素设置为透明，而不会影响其子元素。老版本IE浏览器不支持，我们可以使用IE浏览器CSS渐变滤镜来实现同样的效果。html{background:rgba(0,0,0,0.5);filter:progid:DXImage...
阅读全文
摘要：jQuery：$(document).ready(function(){$("#index_listsdl").click(function(){window.location=$(this).find("a").attr("href");returnfalse;});});html：这是标题这是链...
阅读全文
摘要：一、使用jQuery只需判断此元素的长度是否为0，如果为0则此元素不存在，代码如下：if($("#demo").length>0){//如果存在id为demo的元素，则执行此块代码}else{//否则执行此块代码}二、原生javascript方法if(document.getElementById(...
阅读全文
摘要：效果：css：.jt{display:inline-block;/*和后面的文字在同一行*/*display:inline;/*ie67块级元素inline-block兼容*/*zoom:1;/*同上*/height:0px;width:0px;line-height:0px;/*行高设0，不然ie...
阅读全文
摘要：效果：html：一旦你娶了中国太太，就等于娶了她全家，不到半年，她爹、她妈、她二姐、她二姐的孩子就排着队全来了……我好端端的一个美国家庭，一眨眼工夫，就被中国人给占领了。css：#demo{display:table-cell;/*表格单元格*/vertical-align:middle;/*ver...
阅读全文
摘要：vartimer;$("xxx").hover(function(){timer=setTimeout(code,3000);},function(){clearTimeout(timer)});原理：setTimeout()计时执行一次，当鼠标移上去后开始计时，如果没有到设定时间，鼠标移出，则使用...
阅读全文
摘要：效果：CSS：.dot{width:14px;height:14px;font:12px/18pxArial;border-radius:7px;display:inline-block;vertical-align:middle;position:relative;box-shadow:0px1p...
阅读全文
摘要：效果：/*inputfile美化及上传本地预览，兼容IE6-8，FIrefox，Chrome（需在服务端，本地无效）*/inputfile美化+添加图片add.png*******************************************************************...
阅读全文
摘要：ie6不支持fixed定位，设定fixed定位后，ie6会认为是错误值，便会使用默认值static，可以使用absolute模拟fixed效果，并且兼容ie789以及火狐等。核心代码：html,body{margin:0;padding:0;height:100%;}html{overflow:hi...
阅读全文
摘要：添加到中。如何设置网页文字等元素在flash层上——z-index加上这样一句话：或者这样：在做web开发中可能会遇到flash遮挡页面中元素的情况，无论怎么设置flash容器和层的深度(z-index)也无济于事，现有的解决方案是在插入flash的embed或object标签中加入”wmode”属...
阅读全文
摘要：ul宽度不固定html：列表一列表二列表三css：#box{position:relative;width:500px;background-color:#eee;overflow:hidden;}#box.middle{float:left;position:relative;left:50%;m...
阅读全文
摘要：img设置属性：img{vertical-align：middle;}也可以设置top，bottom对齐，用于行内元素，包括input。支持所有浏览器
阅读全文
摘要：css的height属性可以设置100%，但是必须能得到父元素的高度。否则无效。例如：#aa{background:red;height：200px;}#bb{height:80%;background:blue;}#cc{height:50%;background:green;}此时百分比起效，效...
阅读全文
摘要：效果：css：hr { width: 95%; border: 0; border-top: 1px solid #333; border-bottom: 1px solid #fff; filter: Alpha(Opacity=30);/*IE*/ opacity: 0.3;/*火狐*/}原理：...
阅读全文
摘要：写页面布局时经常会遇到1PX边框的表格，对于罗列显示大量数据来说，table是非常合适的，table本身的意义就在于罗列显示数据，web标准化并非是指不去用table标签，而是说不用table去布局，table本身也是属于标准内的。 本身table设置border：0的话，边框其实是2px。如果想...
阅读全文
摘要：网上关于IE6支持PNG24图片背景透明的方法有数种，以下只列出其中两种个人认为比较实用的方法。第一种：使用IE自身滤镜background:url(a.png) repeat-x 0 0; _background:none; _filter:progid:DXImageTransform.Micr...
阅读全文
摘要：本来并无多少墨水可泼，遂用了百度空间。坚持了一些日子，发现百度空间终是不适合技术博客。依旧不想自己建站，便转迁至此，权当笔记，随性写写。谨以此正式文字作为开篇。
阅读全文