脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → Jquery实现鼠标移动放大图片功能

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

 更新时间：2015年03月25日 12:12:28   作者：sheep921223  
这篇文章主要介绍了Jquery实现鼠标移动放大图片功能,实例分析了jQuery操作鼠标与图片的技巧,非常具有实用价值,需要的朋友可以参考下

本文实例讲述了Jquery实现鼠标移动放大图片功能的方法。分享给大家供大家参考。具体分析如下：

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

使用的是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>

希望本文所述对大家的jQuery程序设计有所帮助。

您可能感兴趣的文章:

相关文章

  • 一个背景云变换js特效 鼠标移动背景云变化

    一个背景云变换js特效 鼠标移动背景云变化

    分享一个背景云变换js特效随着鼠标的移动，背景云会不断的变化位置和形状,感兴趣的朋友可以研究下
    2012-12-12
  • jQuery简单实现页面元素置顶时悬浮效果示例

    jQuery简单实现页面元素置顶时悬浮效果示例

    这篇文章主要介绍了jQuery简单实现页面元素置顶时悬浮效果的方法,涉及jQuery针对页面元素样式的动态操作技巧,需要的朋友可以参考下
    2016-08-08
  • jQuery中:input选择器用法实例

    jQuery中:input选择器用法实例

    这篇文章主要介绍了jQuery中:input选择器用法,以实例形式较为详细的分析了:input选择器的功能、定义及匹配input元素时的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-01-01
  • jQuery中:checkbox选择器用法实例

    jQuery中:checkbox选择器用法实例

    这篇文章主要介绍了jQuery中:checkbox选择器用法,实例分析了:checkbox选择器的功能、定义及匹配复选框的使用技巧,需要的朋友可以参考下
    2015-01-01
  • jQuery DOM删除节点操作指南

    jQuery DOM删除节点操作指南

    本章节主要介绍了jQuery中dom操作的三种删除节点的方法，即remove()，detach()和empty()，并附上示例代码，非常实用，这里推荐给小伙伴们。
    2015-03-03
  • jQuery仅用3行代码实现的显示与隐藏功能完整实例

    jQuery仅用3行代码实现的显示与隐藏功能完整实例

    这篇文章主要介绍了jQuery仅用3行代码实现的显示与隐藏功能,以完整实例形式分析了jQuery实现鼠标响应及页面元素属性变换的相关技巧,需要的朋友可以参考下
    2015-10-10
  • 33个优秀的jQuery 教程分享(幻灯片、动画菜单)

    33个优秀的jQuery 教程分享(幻灯片、动画菜单)

    jQuery 是一个非常优秀的 JavaScript 框架，使用简单灵活，在现在的Web开发项目中扮演着重要角色。这篇文章与大家分享33个优秀的 jQuery 教程，教您如何使用 jQuery 制作幻灯片、动画菜单、照片墙、图片画廊等很多效果很炫的功能。
    2011-07-07
  • 腾讯UED 漂亮的提示信息效果代码

    腾讯UED 漂亮的提示信息效果代码

    腾讯UED 漂亮的提示信息效果代码，需要的朋友可以参考下。
    2011-09-09
  • 浅谈jQuery中replace()方法

    浅谈jQuery中replace()方法

    这篇文章主要介绍了jQuery中replace()方法用法,实例分析了replace()方法的功能、定义及匹配元素去替换指定内容的方法,需要的朋友可以参考下
    2015-05-05
  • 基于jquery实现自定义的audio

    基于jquery实现自定义的audio

    最近接到一个古早的项目变更,设计的音乐播放的功能是自定义的样式,对于jquery的项目第一反应是先找插件,然而找了半天没找到,最后只能自己实现,文中有详细的代码示例供大家参考,需要的朋友可以参考下
    2023-12-12

最新评论