Jquery通过鼠标移动放大图片功能的一个例子

本文通过一个例子讲述了Jquery如何通过移动鼠标来放大图片。分享给大家参考。具体分析如下：

对于毕业设计，老师看完样张后，不喜欢我购物车里的产品图片太大不好看，从而美化了一下。在网上查代码，修改一个简单的版本。

使用了Jquery，但是没有使用JavaScript来获取鼠标状态，这主要和JavaScript需要把被调用的动作写在标签本身有关，太麻烦了，过一段时间就自己搞混了。使用jquery技术，可以根据id、类等直接识别触发条件。的标签，并做出直接的回应(百度百科说这是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，则不能导出-脚本类型=' text/JavaScript ' src=' http : jquery-1 . 9 . 1 . min . js '/script script language=' JavaScript ' $(function(){ var size=3.3。$('#image1 ')。mouse over(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(函数(){ $('#tip '))。移除()；/* remove element */})})/script style type=' text/CSS ' # imgtest { position : absolute；top:100pxleft:400pxz索引：1；}表格{ left:100pxfont-size :20 px；}/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 : 300 px '产品名称/td td style='WIDTH: 60px '图片/td td style='WIDTH: 170px '数量/Td td style='WIDTH: 170px '价格/TD tdstyle=' width3360 250px '小计/TD/thead tbody TD class=' name '/TD希望本文的描述对大家的jQuery程序设计有所帮助。