网页图片轮换播放器Bcastr4.0使用教程
Bcastr.swf是一款优秀的通用图片轮换播放器，很多网站程序使用的图片轮播功能，如织梦CMS就是内置了bcastr.swf实现图片轮播，图片轮播很多人第一时间想到使用jquery实现，其实对于普通用户来说，使用 Bcastr可以更轻松的制作图片轮换效果，目前Bcastr 4.0是最新版，它有如下的特点： 可以读取xml设置播放列表,自定义xml地址 可以将图片地址直接写网页中直接,不需要xml 自动适应图片大小 ...
jquery实现网页背景变暗的弹框效果
很多网页的登陆就是在页面上弹出一个登陆框，背景变暗，通过jquery可以实现这个效果： Javascript代码： var GB_DONE = false; var GB_HEIGHT = 400; var GB_WIDTH = 400; function GB_show(caption, url, height, width) { $("GB_window").remove(); GB_HEIGHT = height || 400; GB_WIDTH = width || 400; if(!GB_DONE) { ...
div嵌套导致子区域margin-top失效不起作用的解决方法
有两个嵌套关系的div，如果外层div的父元素padding值为0，那么内层div的margin-top或者margin-bottom的值会“转移”给外层div，使父元素产生上外边距。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> ...
jQuery图片居中裁切效果
给img标签添加样式.t-img <img src="images/1.jpg" class="t-img"> 注：需要给img标签的父层定义宽高 //调用 $(function(){ zmnImgCenter($(".t-img"));//JQ的dom }); //图片居中 function zmnImgCenter(obj){ obj.each(function(){ var $this=$(this); var objHeight=$this.height();//图片高度 var objWidth=$this...
jQuery元素筛选方法集合
1、eq() 筛选指定索引号的元素 2、first() 筛选出第一个匹配的元素 3、last() 筛选出最后一个匹配的元素 4、hasClass() 检查匹配的元素是否含有指定的类 5、filter() 筛选出与指定表达式匹配的元素集合 6、is() 检查元素是否参数里能匹配上的 7、map() 8、has() 筛选出包含指定子元素的元素 9、not() 排除能够被参数中匹配的元素 10、slice() 从指定索引开始，截取指定个数的元素 ...
实现各浏览器html图像灰度 跨浏览器图像灰度(grayscale)解决方案
实现图像灰度（grayscale）最初有ie6推出的专属属性filter实现，后来在css3里w3c实现了标准的filter，但是在不同浏览器的实现程度不一样，因此需要一种浏览器兼容的解决方案。 IE私有滤镜的方式：自IE4开始，IE引入了私有滤镜，可以实现透明度、模糊、阴影、发光等效果，当然也可以实现灰度图像效果。代码如下： img { filter: gray; /* just for IE6-9 */ } IE10开始抛弃了这种私有滤镜，但是还没有提供对标准CSSfilter的支持，所以说IE10以上版本的灰度图像，仍然是一个问题...
实现网页布局的自适应@media screen各max-width和min-width大小
不同分辨率设备或不同窗口大小下布局 @media screen and(min-width:1200px) { } @media screen and(min-width:960px)and(max-width:1199px) { } @media screen and(min-width:768px)and(max-width:959px) { } @media only screen and(min-width:480px)and(max-width:767px) { } @media only screen and(max-width:479px) { }
CSS3选择器nth-child(n)实现隔几行选择元素
nth-child(n)，n 可以是数字、关键词或公式。选择器匹配属于其父元素的第N个子元素，不论元素的类型。 序号写法： li:nth-child(3){background:orange;}/*把第3个LI的背景设为橙色*/ 倍数写法： li:nth-child(3n){background:orange;}/*把第3、第6、第9、…、所有3的倍数的LI的背景设为橙色*/ 倍数分组匹配： li:nth-child(3n+1){background:orange;}/*匹配第1、第4、第7、…、每3个为一组的第1个LI*/ li:nth-child(3n+5...
list-style-image失效background替换方法
使用css+html制作网页时，经常会出现css代码在某浏览器没有效果的情况，如list-style-image代码就经常不能显示出图标，有些时候是因为使用了float的原因，有些时候却难以发现是什么原因。解决的方法一般是使用background背景图片的方法。 如以下css代码： #sidebar ul {margin:15px 0;} #sidebar ul li {line-height:1.5em; padding-left:10px; background:url(images/post.jpg) no-repeat center left; font-...
jQuery hover改变div边框颜色
今天在做一个网页，需要用到鼠标悬浮hover改变当前div边框颜色，由于IE6之类的浏览器不支持非a以外的伪类，所以就用jQuery实现。刚开始使用addClass添加样式的方法，发现不能成功，后来就直接通过jquery给当前div添加一个border的样式。 实现效果的方法： $(document).ready(function() { $('.themelist').hover(function() { $(this).addClass('add'); },function(){ $(this).removeClass('add'); });...
CSS overflow 属性介绍
overflow 属性规定当内容溢出元素框时发生的事情。这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。overflow属性默认值为auto 设置 overflow 属性： div { width:960px; height:150px; overflow:scroll; } overflow其它值如下： visible 默认值。内容不会被修剪，会呈现在元素框之外。 hidden...
jQuery hover(over,out)事件的用法
hover(over,out)这是jQuery的一个模仿悬停事件，即当鼠标移动到一个匹配的元素上面时，会触发指定的第一个函数。当鼠标移出这个元素时，会触发指定的第二个函数。而且，会伴随着对鼠标是否仍然处在特定元素中的检测，如果是，则会继续保持“悬停”状态，而不触发移出事件。 参数 over (Function) : 鼠标移到元素上要触发的函数 out (Function) : 鼠标移出元素要触发的函数 jQuery 例子代码： $('.single').hover(function(){ //鼠标放上去执行某动作 $(...