第三章事件处理(二)

本篇内容：

随着鼠标移动使图像明亮或模糊——opacity()属性 & rgba()属性

在按钮上应用悬停效果

切换应用一个CSS类——toggleClass()方法

创建基于图像的变换

8.随着鼠标移动使图像明亮或模糊——opacity()属性 & rgba()属性

网页上的图片初始是模糊的，但当鼠标移到图片上方时，图片明亮。

<!DOCTYPE html>

<html>

<head>

$(document).ready(function(){

$("img").css("opacity",0.4);

$("img").bind("mouseover",function(){

$("img").css("opacity",1.0);

});

$("img").bind("mouseout",function(){

$("img").css("opacity",0.4);

});

</script>

</head>

<body>

</body>

</html>

CSS属性opacity属性（不透明度）。Opacity的取值范围从0到1（或0~100%）

<!DOCTYPE html>

<html>

<head>

<title>不同透明度的图像</title>

img.opacity1{opacity: 0.25; width: 350px;height: 500px;} //设置图片的透明度

img.opacity2{opacity: 0.5; width: 350px;height: 500px;}

img.opacity3{opacity: 0.75; width: 350px;height: 500px;}

</style>

</head>

<body>

</body>

</html>

显示效果：

设置透明度的另一种方法——rgba(r,g,b,透明度)颜色属性：

<!DOCTYPE html>

<html>

<head>

<title>使用RGBA实现不同透明度</title>

div.rgbaL1{background:rgba(255,0,0,0.2);height: 20px;} //其中0.2是透明值

div.rgbaL2{background:rgba(255,0,0,0.4);height: 20px;}

div.rgbaL3{background:rgba(255,0,0,0.6);height: 20px;}

div.rgbaL4{background:rgba(255,0,0,0.8);height: 20px;}

div.rgbaL5{background:rgba(255,0,0,1.0);height: 20px;}

</style>

</head>

<body>

</body>

</html>

显示效果：

9.在按钮上应用悬停效果

应用悬停效果，意味着当鼠标经过HTML元素时，改变元素的样式（比如按钮或图像的形状或颜色）。HTML页面如下显示：

<!DOCTYPE html>

<html>

<head>

$(document).ready(function(){

$(".buttons").hover(

function(){

$(this).addClass("hover");

function(){

$(this).removeClass("hover");

}

);

});

</script>

</head>

<body>

<span class="italic buttons">Italic</span>

</body>

</html>

CSS页面代码：

.buttons{

width:100px;

float:left;

text-align:center;

margin:5px;

border:2px solid;

font-weight:bold;

}

.hover{

cursor:crosshair; //设置或检索在对象上移动的鼠标采用何种系统预定义的光标形状

color:blue;

background-color:cyan;

}

hover()方法把两个事件处理程序附加到指定的元素。一个事件处理程序在鼠标指针进入元素时触发，另一个事件处理程序在鼠标离开元素时触发。

.hover(handler1 , handler2)；

Handler1是事件处理函数，包含鼠标进入指定元素时要执行的语句，而Handler2也是事件处理函数，包含鼠标离开指定元素时触发。在以上代码中可见，hover()中包含两个函数，一个addClass(“hover”)为元素添加hover的CSS样式；另一函数removeClass(“hover”)为元素移除hover的CSS样式。并将hover运用与两个按钮。

页面显示效果：

（当鼠标悬停在italic按钮上时）

注解：CSS样式表中：

cursor:crosshair; //设置或检索在对象上移动的鼠标采用何种系统预定义的光标形状

10.切换应用一个CSS类——toggleClass()方法

当某事件发生在元素上时，请为该元素应用定义在CSS类中的样式属性，当同一事件发生在同一元素上时，从该元素中删除CSS类。也就是说，要在CSS类的应用与不应用之间进行切换。

保持上一个案例（在按钮上应用悬停效果）中的HTML页面代码和CSS样式表代码不变，修改jQuery代码。

$(document).ready(function(){

$(".buttons").click(function(){

$(this).toggleClass("hover");

});

toggleClass()方法：如果CSS类已经应用到指定元素，则此方法删除CSS类；如果尚未应用，则为指定元素应用CSS类。

.toggleClass(“class”);

这里的class是在指定元素上将要应用的CSS类（如果尚未应用），或将要删除的CSS类（如果已经应用）。

以上jQuery代码表示，按钮上第一次发生单击事件时，把hover类所提供的样式表运用到按钮上，改变背景色和前景色；再次单击时（即在同一个按钮上再次发生单击事件时），从按钮上删除CSS样式，按钮恢复初始的外观。

同样效果的toggle()方法（此方法在新的jQuery版本中被删除，不推荐使用）

以上示例也可以用toggle()方法实现，修改jQuery代码：

$(document).ready(function(){

$(".buttons").toggle(

function(){

$(this).addClass("hover");

function(){

$(this).removeClass("hover");

}

)

});

11.创建基于图像的变换

创建基于图片的变换。图片变换是指当鼠标在图像上移动时图像改变形状、图像指定超链接到某个网站。一旦单击图像，图像也发生变化，表示该图像已经被访问过。

HTML页面代码以及jQuery代码：

<!DOCTYPE html>

<html>

<head>

// 把定义在样式表中的样式应用到roll类的空span元素

$(document).ready(function(){

$(".roll").addClass("link");

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

$(this).addClass("hover");

function(){

$(this).removeClass("hover");

});

$(".roll").click(function(event){

$(this).addClass("active");

event.preventDefault(); //使超链接忽略默认动作（即导航到链接所指的网站）

})

});

</script>

</head>

<body>

</body>

</html>

CSS样式表代码：

.link{

display:block;

width:300px;

height:300px;

background-image:url(btn1.png);

background-repeat:no-repeat;

background-position:top center;

}

.hover{

display:block;

width:700px;

height:700px;

background-image:url(btn2.png);

background-repeat:no-repeat;

background-position:top left;

}

.active{

display:block;

width:700px;

height:700px;

background-image:url(btn3.png);

background-repeat:no-repeat;

background-position:top left;

}

img{

border:0;

}

前面的HTML文件中包含roll类的span元素，通过样式规则和jQuery代码为该元素填充图像。在样式表中，样式规则link包含网页加载时应用到图片的属性。它为图像指定宽度为300像素，高度300像素。把图片btn1加载为背景图片，不重复即只出现一次。

因为鼠标指针在图片上面移动时，想让图片变大，所以使用样式规则hover包含btn1图像，但使图像大小改变。

第三个样式active则表示一旦链接被访问过，则显示什么图像，这里还是使用了btn1图像。

（注意：由于图像资源有限，这三个图像内容应该是一样的，但是图像的样式，如大小、颜色、边框都应该不同，以便区分该连接是否访问过。）

posted on 2016-11-14 22:24 Miss.coding 阅读(206) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

Mr.coding