一.实现背景图片铺满(兼容各种浏览器)
<script type="text/javascript">
$(document).ready(function() {
$("body").ezBgResize({
img : "image/bg.jpg", //图片路径
opacity : 1,
center : true
});
});
</script>
二.使div实现半透明
- 子元素也透明:opacity:0.5
- 子元素不透明: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); //鼠标移走之后,一秒内显示 })