首页 技术 正文
技术 2022年11月16日
0 收藏 370 点赞 3,590 浏览 1084 个字

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

<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);    //鼠标移走之后,一秒内显示})
相关推荐
python开发_常用的python模块及安装方法
adodb:我们领导推荐的数据库连接组件bsddb3:BerkeleyDB的连接组件Cheetah-1.0:我比较喜欢这个版本的cheeta…
日期:2022-11-24 点赞:878 阅读:9,088
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接:http://www.codeforces.com/contest/660/problem/CDes…
日期:2022-11-24 点赞:807 阅读:5,564
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
日期:2022-11-24 点赞:569 阅读:6,412
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
日期:2022-11-24 点赞:733 阅读:6,185
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式,并且由于涉及到要把拍到的照片显…
日期:2022-11-24 点赞:512 阅读:7,822
Struts的使用
一、Struts2的获取  Struts的官方网站为:http://struts.apache.org/  下载完Struts2的jar包,…
日期:2022-11-24 点赞:671 阅读:4,905