不完全运行代码jquery

最新推荐文章于 2023-08-23 09:44:43 发布

lbxzbh

最新推荐文章于 2023-08-23 09:44:43 发布

阅读量1.9k

点赞数

<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="jquery-1.8.3.min.js"></script>
<script>
$(document).ready(function(){
/*var a =$("p-list")
 console..log(typeof(a[0]))*/
/*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��,info=information.
 var imgWidth = img.width()
 var imgHeight = img.height()
 console.log("imgWidth:"+imgWidth+"img.height:"+imgheight)
 var orgWidth= $this.width()
 var orgHeight= $this.height()/*fangruyige xing de div limian */
 console.log("orgWidth:"+orgWidth+"orgheight:"+orgheight)
 var p_img = $("<div class='p_img'>").append().prependTo($this)
 var p_big = $("<a href='javascript:void(0)' class = 'p_big'>").appendTo($this)
 var p_cls = $("<a href='javascript:void(0)' class = 'p_cls'>").appendTo($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>


<style type="text/css">
.p-list{ 
	position:relative;
	float:left;
	width: 90px;
	height: 98px;
	padding:8px;
	border:1px solid #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("image/imgLarge.jpg");
	cursor:pointer//����ͷ��ʽ

}
.p_cls{
	position:absolute;
	right: 10px;
	bottom:10px;
	width: 20px;
	height: 21px;
	background:url("image/imgClose.jpg");
	display:none;
}
</style>
</head>
<body>
<div class="p-list">
<img src="images/list_1.jpg">
<div class="p-Alt">
<H3>风景1</H3>
</div>
</div>
<div class="p-list">
<img src="images/list_2.jpg">
<div class="p-Alt">
<H3>风景2</H3>
</div>
</div>
<div class="p-list">
<img src="images/list_3.jpg">
<div class="p-Alt">
<H3>风景3</H3>
</div>
</div>
<div class="p-list">
<img src="images/list_4.jpg">
<div class="p-Alt">
<H3>风景4</H3>
</div>
</div>
</body>
</html>

1.首先搭建HTML，分析页面可知，一个大的<div>嵌套一个<image>标签和图片标题，图片标题用div包括。
图片标题用<div class="p_Alt"></div>
2.搭建CSS样式。
分析样式可知，现在主要有三种样式，p_List和<img>和P_Alt这三种样式。
3.编写Jquery代码。
首先需要获取p-list，且获取p-list是多个对象数组。我们不知道具体操作哪一个p-list需要用到Jquery当中each函数来遍历。
each（）相当于each可以帮助我们获取第一个p-list然后操作一系列动作。
注意:将改变后的
append()向每个匹配元素内部追加内容。
在我们的p-img当中添加img元素
eg：$("<div class='p_img'>").append()
、、相当于
<div class=“p-img”>
<IMG SRC="">
</div>
$("<div class='p_img'>").append().prependTo($this)
解释：
$(A).append(B)将元素的B添加到A当中。
$(A).appendTo(B)将元素A添加到B当中。
首先我们通过创建用了一个div
用于保存改变后的图片
然后，我们通过("<div class='p_img'>")将img元素添加到p-img元素当中
相当于

最后通过，
我们将添加到了 p-list当中，相当于
<div class='p-list'>
<div class="p_img"><img src=""></div>

点击放大的动画有哪些
1.首先p_llis长宽放大以及边框放大了
2.图片回到正常尺寸
3.p_Alt图片标题出现
4.关闭按钮出现
5.点击放大的按钮消失

lbxzbh

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
不完全运行代码jquery

<html><head><meta charset="UTF-8"><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title><script src="jquery-1.8.3.min.js">...
复制链接

扫一扫