Jquery图片放大

实现目的：

1.鼠标悬浮在图片上，图片放大，并显示对应信息。

2.点击跳转页面，显示对应信息，购买增加表格记录。

效果图：

图片放大图1-1

跳转显示信息与表格记录图1-2

主要代码

图片放大页代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>购物栏</title>

<script type="text/javascript" src="js/jquery-1.6.3.js" ></script>
<script type="text/javascript" src="js/shop.js"></script>


 <style type="text/css"> 
 
 #bigpic { position:absolute; display:none;}  
  
 #bigpic img { width:400px; height:400px; padding:5px; background:#fff; border:1px solid #e3e3e3; }
 
 .pic img {width:100px; height:100px; padding:5px; background:#fff; border:1px solid #e3e3e3;}
 
  </style> 
</head>

<body>
<div id="shoplist" align="center">
<!-- javascript:void(0)表示不做任何动作 -->
<a href="javascript:void(0)" class="pic" rel=picture/1.jpg><img alt="" src="picture/1.jpg" id="pic1"></a>
<br>

<a href="javascript:void(0)" class="pic" rel=picture/2.jpg><img alt="" src="picture/2.jpg" id="pic2"></a>

<br>
<a href="javascript:void(0)" class="pic" rel=picture/3.jpg><img alt="" src="picture/3.jpg" id="pic3"></a>

</div>
</body>
</html>

shop.js代码：

$(function(){ 
	
     var x = 22; 
     var y = 20; 
     $(".pic").hover(function(event){  
    	
    //绑定一个鼠标悬停时事件 
         $("body").append('<p id="bigpic"><img src="'+ this.rel + '" alt="" /></p>');  
        
    //判断停留在哪一个图片上然后显示对应信息
        if($(this).children().attr("id")=="pic1")
        {
        	$("#bigpic").append("<p id='message'>产品名称：迅雷白金会员<br>价格：30/月 </p>");
        	
        }
        if($(this).children().attr("id")=="pic2")
    	{
        	$("#bigpic").append("<p id='message'>产品名称：steam<br>价格：98/年 </p>");
    	
    	}
        if($(this).children().attr("id")=="pic3")
    	{
        	$("#bigpic").append("<p id='message'>产品名称：QQ绿钻<br>价格：10/月 </p>");
    	
    	}
        
     //改变小图片的透明度0.5
         $(this).find('img').stop().fadeTo('slow',0.5); 
         
    //将鼠标的坐标和声明的x，y做运算并赋值给大图片绝对定位的坐标，然后以fadeIn的效果显示 
         $("#bigpic").css({top:(event.pageY - y ) + 'px',left:(event.pageX + x ) + 'px'}).fadeIn('fast'); 
     },
     function(){ 
    	 
     //将变暗的图片复原 
        $(this).find('img').stop().fadeTo('slow',1); 
       
     //移除新增的p标签 
        $("#bigpic").remove(); 
     }); 
     $(".pic").mousemove(function(event){  
    	 
     //将鼠标的坐标和声明的x，y做运算并赋值给大图片绝对定位的坐标，这样大图片就能跟随图片而移动了 
     $("#bigpic").css({top:(event.pageY -y ) + 'px',left:(event.pageX + x ) + 'px'}); 
     });

     
     //img绑定事件跳转页面
     $('img').bind('click', function(evt){
    	 
    	 var cid = $(this).attr("id");//获取对应商品id用以区分商品
    	 //把cid传过去
    	 location.href = "shopcar.html?id="+cid;
		  
		  });
     
 });

跳转shopcar.html代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>

<script type="text/javascript" src="js/jquery-1.6.3.js" ></script>
<script type="text/javascript" src="js/shopcar.js"></script>

 <style type="text/css">  
  
  img { width:300; height:300px; padding:5px; background:#fff; border:1px solid #e3e3e3; }
 
  </style> 
  
<body>
<div id="tietu" algin="left" style = "width:450px;height:450px border:1px solid  black;">


</div>
<div align="center" style="width:250px;height:130px;border:1px solid  black ;">

产品名称：<input type="text" id="name" readonly="readonly"/><br>
产品价格：<input type="text" id="money" readonly="readonly"/><br>
购买数量：<input type="text" id="shuliang" value="1"/><br>

总计：<input type="text" id="count"/>
<input type="button" value="购买" id="buy">
</div>

<br>
<table border="1px" align="center" id="daytable">
	</tr>
		<td colspan="5">产品日报表</td>
	<tr>
	<tr>
		<td>编号</td>
		<td>产品名称</td>
		<td>产品价格</td>
		<td>购买数量</td>
		<td>总计</td>	
	</tr>
</table>
</body>
</html>

shopcar.js代码：

$(function(){ 
	//获取url传过来的参数cid值
	var thisURL = document.URL;  
	var  getval =thisURL.split('?')[1];  
	var showval= getval.split("=")[1];
	
	//判断哪个图片
	if(showval=="pic1")
		{
		//在文本框加入对应信息
		$("#tietu").append("<img src='picture/1.jpg' />");
		$("#name").val("迅雷白金会员");
		$("#money").val("30");
		}
	if(showval=="pic2")
		{
		$("#tietu").append("<img src='picture/2.jpg' />");
		$("#name").val("steam");
		$("#money").val("98");
		}
	if(showval=="pic3")
		{
		$("#tietu").append("<img src='picture/3.jpg' />");
		$("#name").val("QQ绿钻");
		$("#money").val("15");
		}
	
$('#buy').bind('click', function(evt){
		  var name = $("#name").val();
		  var money = $("#money").val().toString();
		  var shuliang = $("#shuliang").val().toString();
		  var allm = money*shuliang;
		  $("#count").val(allm);
		  var num = $("#daytable tr").length-2;
		  //信息插入表格
		  $("<tr><td>"+num+"</td><td>"+name+"</td><td>"+money+"</td><td>"+shuliang+"</td><td>"+allm+"</td></tr>").appendTo("#daytable");
		  });



});

猜你喜欢