Jquery实现鼠标移动，放大图片的功能

最新推荐文章于 2021-03-23 19:27:20 发布

sheep921223

最新推荐文章于 2021-03-23 19:27:20 发布

阅读量1.6k

点赞数

分类专栏： jquery&JS 文章标签： jquery 鼠标移动

本文链接：https://blog.csdn.net/sheep921223/article/details/44486751

版权

jquery&JS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

做毕业设计，老师看完小样后，嫌弃我购物车里商品图片太大，不美观，让美化个效果。上网查查代码，修改了一个简单版的。

使用的是jquery，未使用JavaScript获取鼠标状态，这主要和JavaScript需在标签本身内含写出所调用到的动作，太麻烦了，一会就把自己搞糊涂了，使用jquery技术直接根据标签的id，class等等，就可以辨识出来触发条件，直接作出回应(百度百科上说这是jquery很大的一个优势，不用再在html里面插入一堆js来调用命令，只需要定义id即可)。

使用这个技术的目的是为了实现在购物车内阅览货物时，只需要显示小图，当鼠标滑过时显示大图。主要是为了提高用户体验，否则在购物车大图显示商品信息会直接影响整个网页的美观性。

实现出来的样子就是这样。

源码：

<!DOCTYPE HTML>
<html>
<head>
<title>cart</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- 要把jquery-1.9.1.min.js导进去，不导出不来 -->
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script language="javascript">
$(function(){
var size=3.0*$('#image1').width();
$("#image1").mouseover(function(event) {
var $target=$(event.target);

if($target.is('img'))
{
$("<img id='tip' src='"+$target.attr("src")+"'>").css({
"height":size,
"width":size,
}).appendTo($("#imgtest"));/*将当前所有匹配元素追加到指定元素内部的末尾位置。*/
}
}).mouseout(function() {
$("#tip").remove();/*移除元素*/
})


})
</script>

  <style type="text/css">
    #imgtest{    position:absolute;
    		     top:100px;
    			 left:400px;
   		         z-index:1; }
    table{        left:100px;
   				 font-size:20px; }
    </style>
</head>
<body>
<div id="imgtest"></div>
<br/>
<br/>
              <table border="1" style="text-align:center;" align="center" >
						<thead  style="height:50">
													
								<td style="WIDTH: 300px">
									商品名称
								</td>
								<td style="WIDTH: 60px">
									图片
								</td>

								<td style="WIDTH: 170px">
									数量
								</td>
								<td style="WIDTH: 170px">
									价格
								</td>
								<td style="WIDTH: 250px">
									小计
								</td>
							
						</thead>
						<tbody>
							<td class="name"></td>
							<td class="image">							
							<img src="1.jpg" width="40px" height="40px" id="image1"/>
							</td>
							<td class="quantity"></td>
							<td class="price"></td>
							<td class="total">元	</td>
							</tr>
							
							<tr>
								<td colspan="4" class="cart_total">
								<br></td>
								<td>
									<span class="red">总计:</span>  元
								</td>
							</tr>
						</tbody>
					</table>
      
</body>
</html>