1.首先搭建html
分析页面可知,一个大的div class="p_list"里面嵌套一个<img>标签和图片标题,图片标题用div class="p_Alt"包括。
2.搭建css样式
分析样式可知,现在主要有三种样式,p_list和<img>和p_Alt。
3.编写JQuery代码
首先需要获取P_list类,且获取p_list是多个对象数组,我们不知道具体操作哪一个p_list,需要用到jQuery当中的each函数来遍历。
each():以每一个匹配的元素作为上下文来执行一个函数,相当于,rach可以帮助我们获取第一个p-list,然后操作一系列动作。
注意:如果你想得到jquery对象,可以使用$(this)函数。
append():像每个匹配的元素内容追加内容。
eg: $("<div class='p_Img'>").append(img),在我们p_img元素中添加img元素。
//相当于
<div class='p_img'>
<img src ="">
</div>
解释:$(A.append)(B):将元素B添加到元素A当中
$(A)appendTo(B):是将A元素添加到B当中
$ ("<div class='p_Img'>").append(img).propendTo($this)
首先我们通过$("<div class='p_Img'>")创建了一个div:<div class='p_Img'></div>
然后,我们通过 $ ("<div class='p_Img'>").append(img)将img元素添加到了p_img当中
相当于:
<div class='p_img'>
<img src="">
</div>
最后通过.prependTo($this),
我们将
<div class='p_img'>
<img src="">
</div>
添加到了p_list当中,相当于
<div class='p_list'>
<div class='p_img'>
<img src="">
</div>
</div>
点击放大的动画有哪些
1,首先p_list长宽放大,以及边框放大了
2,图片回到正常尺寸
3,p_Alt图片标题出现
4,关闭按钮出现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-1.8.3.min.js"></script>
<script>
$(document).ready(function(){
//each遍历
$('.p_list').each(function(index){//参数index表示:p_list的索引(下标)
//完成图片初始化的页面效果
//在遍历p-list的过程中,先获取设置好,外框与图片的长与宽
var $this=$(this)
var img=$(this).find('img')//在当前p_list下找到img元素
var Info=$(this).find('p_Alt')//在当前p_list下找到p_Alt元素
imgWidth=img.width()
imgHeigth=img.Height()
console.log("imgWidth:"+imgWidth+" imgHeight:"+imgHeigth)
orgWidth=$this.width()
orgHeight=$this.Height()
console.log("orgWidth:"+orgWidth+"orgHeight:"+orgHeight)
//将图片放入一个新的div里面class="p_Img"
var p_img=$ ("<div class='p_Img'>").append(img).propendTo($this)
var p_big=$("<a href='javascript:void(0)' class='p_big'>").propendTo($this)
var p_cla=$("<a href=javascript:void(0)' class='p_cla'>").propendTo($this)
//点击放大动画
p_big.click(function(){
/*
*
*
* */
$this.animate({
width:imgWidth,
height:imgHeight+85,
borderWidth:'5'
},3000)
$(".p_Alt".$this).fadeIn()
p_big.fadeOut()
img.animate({
marginTop:"0px",
marginLeft:"0px",
},3000)
p_img.animate({
width:imgWidth,
height:imgHeight
},3000)
})
})
})
</script>
<script type="text/css">
.p_list{
position: relative;
float: left;
width: 90px;
height: 98px;
padding: 8px;//图片和边框的距离
border: 1px slode #666;
margin: 10px;
}
img{
margin-left: -120px;
margin-top: -120px;
}
.p_Alt{display: none}
.p_Img{
width: 90px;
height: 90px;
margin-bottom: 5px;
overflow: hidden;
}
.p_big{
display: block;
width: 90px;
height: 23px;
background: url("images/imgLarge.jpg");
cursor: pointer;/*鼠标箭头样式*/
}
.p_cla{
poaition:abaolute;
right: 10px;
bottom: 10px;
width: 20px;
height: 21px;
background: url("images/imgLarge.jpg");
display: none;
}
</script>
</head>
<body>
<div class="p_list">
<div class="p_Alt">
<img src="images/list_1.jpg">
<h3>风景一</h3>
</div>
</div>
<div class="p_list">
<div class="p_Alt">
<img src="images/list_2.jpg">
<h3>风景二</h3>
</div>
</div>
<div class="p_list">
<div class="p_Alt">
<img src="images/list_3.jpg">
<h3>风景三</h3>
</div>
</div>
<div class="p_list">
<div class="p_Alt">
<img src="images/list_4.jpg">
<h3>风景四</h3>
</div>
</div>
</body>
</html>