Jquery案例2--制作图片展示效果

西狂小杨过

于 2024-11-14 10:09:12 发布

阅读量1.7k

点赞数 29

CC 4.0 BY-SA版权

分类专栏： jqeury案例合集文章标签： javascript jquery 前端

本文链接：https://blog.youkuaiyun.com/qq_45461146/article/details/143758486

jqeury案例合集专栏收录该内容

2 篇文章

订阅专栏

任务描述：

在页面中有4副小图片和一个图片展示区域，当光标移入某副小图片时，在图片展示区域可以看到其对应的大图。为凸显当前小图的状态，把其他3副小图透明度设置为0.2

案例效果：

思路分析：

(1).得先把基本结构写好，css样式写好，再去实现功能。这个css和html代码很好写。首先啊，分为3个部分，最上面一个<p>标签，演示图片，中间一张图片，最下面一个div，里面放4张小图片。话不多说，上代码：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
</head>
<style>
    * {
	padding:0;
	margin:0;
}
#test {
	border-radius:6px;
	margin-top:5px;
	margin-bottom:15px;
}
div img{
	width:30px;
	height:30px;
	border-radius:4px;
	margin-left:12px;
	margin-right:12px;
}
/*半透明*/
.alpha{
	 filter:alpha(Opacity=20);
	 -moz-opacity:0.2;
	 opacity:0.2;
}
</style>
<body>
  <center>
    <p>演示图片</p>
    <img id="test" title="test" src="img/test1.jpg" /><br />
    <div>
      <img src="img/test1.jpg" />
      <img src="img/test2.jpg" />
      <img src="img/test3.jpg" />
      <img src="img/test4.jpg" />
    </div>
  </center>
</body>
</html>

(2)为4副小图片绑定光标移入事件

(3)获取当前光标移入事件的小图片的src属性，并将其作为大图片的src属性值。这样大图片也就随之改变了。

(4)把其他3副小图透明度设置为0.2

代码实现：

在写代码之前，大家要学会的知识点就是jquery中获取和设置属性的方法：

假如我们某副图片的id为photo，在jquey里可以用attr()方法来获取和设置元素属性，要获取图片的src属性，只要给attr()方法传递一个参数，即属性名称。代码如下：

var $img = $("#photo");
var path = $img.attr("src");

如果要设置图片的src属性值，继续使用attr()方法，不同的是，要传递两个参数，即属性名和对应的值，代码如下：

var $img = $("#photo");
var path = $img.attr("src","路径");

删除属性，可以使用removeAttr()方法来实现。

var $img = $("#photo");
var path = $img.removeAttr("src");

这两个知识点掌握了之后，我们就开始写脚本吧。

光标移入事件，用mouseover(function(){})，我们得找到小图片吧，那是不是就是div里的img，那我们的代码怎么写呢，获取小图片，并把图片绑定光标移入事件。用你们聪明的脑袋瓜想想。

是不是就是

$(function(){
    $("div img").mouseover(function(){
        
    });
})

往里面填东西，获取小图片的属性，并设置为大图片的属性。怎么做呢，刚刚上面的知识点已经讲了，大家应该会了。

  $(function() {
	$("div img").mouseover(function() {
		var big_src = $(this).attr("src");
    	$("#test").attr("src",big_src);
	});
});

写到这，就剩最后一个需求了，就是把透明度设置一下，这里就涉及到几个新的知识点了，也就是追加类的样式用addClass()，选择同辈元素用siblings()，移除类的样式用removeClass();因为是案例课，所以这些知识点我就不详细解释了，简单提及一下，在我的jquery入门系列里，我会详细的讲解这些方法。如果大家感兴趣的，可以订阅我的系列或者关注我哦。跟着我，我手把手的带着你们，从0到精通jquery。我敢说没有哪个博主有我讲的详细。带你分析思路，代码不重要，思路最重要。我们接着讲课：

在页面打开时，我们将4副小图片的透明度全部设置为0.2，第一幅小图片不设置透明度。我们需要追加一个样式alpha,透明度样式。

$(function() {
	$("div img").addClass("alpha");
	$("div img:eq(0)").removeClass("alpha");
	//给Prev按钮添加上一张图片功能
	$("div img").mouseover(function() {
		var big_src = $(this).attr("src");
    	$("#test").attr("src",big_src);
	});
});

当鼠标移入其他小图时，其他3副小图的透明度发生变化，比如说我鼠标放在第一张图片上，那我是不是要移除透明度这个样式，然后呢，把它的同类元素，也就是其他图片添加上透明度的样式，那代码我们用链式结构写：

$(function() {
	$("div img").addClass("alpha");
	$("div img:eq(0)").removeClass("alpha");
	//给Prev按钮添加上一张图片功能
	$("div img").mouseover(function() {
		var big_src = $(this).attr("src");
    	$("#test").attr("src",big_src);
		$(this).removeClass("alpha").siblings().addClass("alpha");
	});
});

至此，完整代码已经写完。从这个里面需要学到的知识点就是元素的属性的获取和设置，删除属性，以及添加类的样式，移除类的样式，选择同辈元素。大家可以多多练习。自己重新做一遍，而不是直接复制粘贴，这样一点效果也没有。