Jquery图片放大

来源：互联网发布：芭比娃娃淘宝编辑：程序博客网时间：2024/05/19 17:06

实现目的：

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");  });});

阅读全文

0 0

Jquery图片放大

主要代码图片放大页代码：

主要代码

图片放大页代码：