2010-10-08在浏览器中兼容+jQuery3

一.实现背景图片铺满(兼容各种浏览器)

<script type="text/javascript">

$(document).ready(function() {

$("body").ezBgResize({

img     : "image/bg.jpg",   //图片路径

opacity : 1,

center  : true

});

});

</script>

二.使div实现半透明

  1. 子元素也透明:opacity:0.5
  2. 子元素不透明:background:rgba(0,0, 0, 0.4);

另:为了使其在较低版本也能显示,即实现浏览器的兼容性,可写为:

background:rgba(0,0, 0, 0.4)!important;
               filter:Alpha(opacity=40);

 jQuery(3) 

九.设置元素样式

1. 添加、删除CSS类别

$("div").addClass("myClass1 myclass2")     //如果两个样式设置了相同的属性,以后面的(myClass2)属性值为准.

$("div").removeClass("myClass1")             //移除样式

2.样式交替执行

1.$(function(){

$("#btn").click(function({

$(this).toggleClass(“d2”);               //点击时不断切换

}););

});

注意:toggleClass只能设置一种Class不能设置多个

2. $(".d1").toggle(1000)                               //点击之后,显示和隐藏交替执行,设置时间1秒

3. $(".d1").toggle(function(){                        //点击之后,交替执行,只支持版本比较低的jQuery类库文件

$(".d1").hide(1000);

},function(){

$(".d1").show(1000);

});

 3.直接获取、设置样式

mouseover:鼠标移上去之后

mouseout: 鼠标移走之后

     $(".d1").mouseover(function(){              

                 $(this).css(“color”,”red”);
 });

     $(".di").mouseout(function(){

                 $(this).hide(1000);

});

也可以是两种样式合在一起:

     $(".d1").hover(function(){

     $(".d1").hide(1000);     //鼠标移上去之后,一秒内隐藏

},function(){

     $(".di").show(1000);    //鼠标移走之后,一秒内显示

})
时间: 2024-10-14 00:45:37

2010-10-08在浏览器中兼容+jQuery3的相关文章

js new Date(&quot;2016-07-01 08:00:00&quot;) 格式在IE内核浏览器中显示NaN的问题

js new Date("2016-07-01 08:00:00") 格式在IE内核浏览器中显示NaN的问题 废话就不多了,var dd = new Date("2016-07-01 08:00:00");这种格式在ff,chrome,opera,safari等浏览器中没有问题的,而在IE内核浏览器(猎豹,360兼容模式)等会出现无效NaN的问题, 查了一下,原来是格式的问题,注意日期的格式,如果将上面的代码修改为var dd = new Date("20

css在各浏览器中的兼容问题

CSS对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与Fireofx的兼容性处理方法并 整理了一下.对于web2.0的过度,请尽量用xhtml格式写代码,而且DOCTYPE 影响 CSS 处理,作为W3C的标准,一定要加 DOCTYPE声名. CSS技巧 1.div的垂直居中问题 vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了.缺点是要控制内容

css浏览器兼容问题(在IETester及其他浏览器中亲试过)

最近在研究一些关于浏览器兼容性问题的css问题,先归纳总结如下:(1)在一些现代浏览器(opera,chrome,谷歌,safari)中,如果给块级标签如div设置padding后会导致元素的height和width增加,在IE中则不会增加,但是只在IE6中不增加,IE7以上在IETester中测试都会增加,解决办法:可以使用 !important 多设一个 height 和 width (2)使元素水平垂直居中:垂直居中:将该元素的line-height设置为元素本身的高度,再通过vertic

不同浏览器中空格符的兼容问题

刚开始学习前端的时候,遇到空格符在不同浏览器中不等宽的问题自然不以为然,因为我只在一个浏览器下查看!随着自身的提高,也就更能看清楚问题的存在. 有一次,在制作一个注册登录界面的时候,这种参差不齐的表现实在让人忍无可忍.通过查阅资料及各位前辈的见解,总结如下: 1.在空格那一行设置一下字体,把字体设置成任意一种字符等间距的字体,如''宋体''. 由于不同的浏览器会有不同的默认字体,IE的字体多数是采用宋体为默认字体,像谷歌浏览器,欧鹏,火狐,safari等,这些浏览器多数会采用微软雅黑,这种黑体系

获取元素样式对象 页面滚出 页面可是大小 添加监听事件 获取事件参数浏览器中位置 的兼容

/** * 获取浏览滚动出去的距离 * @returns {{scrollY: (Number|number), scrollX: (Number|number)}} */function scroll(){ return{ scrollY:window.scrollY||document.body.scrollTop||document.documentElement.scrollTop||0, scrollX:window.scrollX||document.body.scrollLeft|

【转载】各浏览器CSS兼容问题

CSS对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与Fireofx的兼容性处理方法并 整理了一下.对于web2.0的过度,请尽量用xhtml格式写代码,而且DOCTYPE 影响 CSS 处理,作为W3C的标准,一定要加 DOCTYPE声名. CSS技巧 1.div的垂直居中问题 vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了.缺点是要控制内容

[转文]浏览器的兼容

浏览器的内核 Mozilla Firefox ( Gecko ) Internet Explorer ( Trident ) Opera ( Presto ) Safari ( WebKit ) Google Chrome ( WebKit )<!--more-->腾讯TT.世界之窗.360浏览器.遨游浏 览器都是给IE加了个外壳,不过如果电脑上装的是ie8的话,这些浏览器还是调用ie7的内核.搜狗浏览器比较特殊,它有两种浏览模式:一是兼容模式,该 模式使用IE内核:二是高速模式,该模式使用W

浏览器中CSS的BUG

对于web2.0的过度,请尽量用xhtml格式写代码,而且DOCTYPE 影响 CSS 处理,作为W3C的标准,一定要加 DOCTYPE声明. 其它请参考:CSS hack 针对IE6,IE7,firefox显示不同效果 1.div的垂直居中问题  vertical-align:middle;  将行距增加到和整个DIV一样高 line-height:200px;  然后插入文字,就垂直居中了.缺点是要控制内容不要换行. 2. margin加倍的问题      设置为float的div在ie下设

浏览器的兼容问题

css 1.         div的垂直居中问题:. 2.         margin加倍的问题:设置为float的div在ie下设置的margin会加倍.这是一个ie6都存在的bug. 3.         IE与宽度和高度的问题: IE 不认得min-这个定义,但实际上它把正常的width和height当作有min的情况来使.这样问题就大了,如果只用宽度和高度,正常的浏览器里这两个值就不会变,如果只用min-width和min-height的话,IE下面根本等于没有设置宽度和高度.