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


Posted in Javascript onMarch 25, 2015

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

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

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

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

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

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

源码:

<!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程序设计有所帮助。

Javascript 相关文章推荐
ASP.NET中基于JQUERY的高性能的TreeView补充
Feb 23 Javascript
深入探讨前端框架react
Dec 09 Javascript
微信小程序 教程之wxapp视图容器 swiper
Oct 19 Javascript
ionic进入多级目录后隐藏底部导航栏(tabs)的完美解决方案
Nov 23 Javascript
详解webpack2+node+react+babel实现热加载(hmr)
Aug 24 Javascript
微信小程序实现图片滚动效果示例
Dec 05 Javascript
JavaScript实现页面中录音功能的方法
Jun 04 Javascript
Vue.js实现大屏数字滚动翻转效果
Nov 29 Javascript
BootStrap前端框架使用方法详解
Feb 26 Javascript
Vue项目页面跳转时浏览器窗口上方显示进度条功能
Mar 26 Javascript
javascript中正则表达式语法详解
Aug 07 Javascript
vue监听浏览器原生返回按钮,进行路由转跳操作
Sep 09 Javascript
jQuery延迟加载图片插件Lazy Load使用指南
Mar 25 #Javascript
jQuery实现购物车计算价格功能的方法
Mar 25 #Javascript
JavaScript的事件代理和委托实例分析
Mar 25 #Javascript
JS实现简易图片轮播效果的方法
Mar 25 #Javascript
jquery处理页面弹出层查询数据等待操作实例
Mar 25 #Javascript
JavaScript动态添加列的方法
Mar 25 #Javascript
javascript实现复选框选中属性
Mar 25 #Javascript
You might like
mysql5的sql文件导入到mysql4的方法
2008/10/19 PHP
神盾加密解密教程(一)PHP变量可用字符
2014/05/28 PHP
php从数组中随机选择若干不重复元素的方法
2015/03/14 PHP
WordPress伪静态规则设置代码实例
2020/12/10 PHP
js传值 判断
2006/10/26 Javascript
用js模拟JQuery的show与hide动画函数代码
2010/09/20 Javascript
由JavaScript中call()方法引发的对面向对象继承机制call的思考
2011/09/12 Javascript
js动画效果制件让图片组成动画代码分享
2014/01/14 Javascript
jquerymobile局部渲染的各种刷新方法小结
2014/03/05 Javascript
JS实现的一个简单的Autocomplete自动完成例子
2014/04/16 Javascript
JSON.parse()和JSON.stringify()使用介绍
2014/06/20 Javascript
Jsonp post 跨域方案
2015/07/06 Javascript
jQuery实现文件上传进度条特效
2015/08/12 Javascript
JS实现的添加弹出层并完成锁屏操作示例
2017/04/07 Javascript
Angular利用内容投射向组件输入ngForOf模板的方法
2018/03/05 Javascript
在vue中实现某一些路由页面隐藏导航栏的功能操作
2020/09/21 Javascript
[52:52]DOTA2上海特级锦标赛C组资格赛#1 OG VS LGD第三局
2016/02/27 DOTA
[01:48]2018DOTA2亚洲邀请赛主赛事第二日五佳镜头 VG完美团战逆转TNC
2018/04/05 DOTA
[01:22:19]EG vs TNC Supermajor小组赛B组败者组第一轮 BO3 第二场 6.2
2018/06/03 DOTA
[32:36]完美世界DOTA2联赛PWL S3 LBZS vs CPG 第二场 12.12
2020/12/16 DOTA
python中文件变化监控示例(watchdog)
2017/10/16 Python
TensorFlow实现卷积神经网络CNN
2018/03/09 Python
tensorflow 1.0用CNN进行图像分类
2018/04/15 Python
pandas.DataFrame选取/排除特定行的方法
2018/07/03 Python
Python利用lxml模块爬取豆瓣读书排行榜的方法与分析
2019/04/15 Python
Python线程障碍对象Barrier原理详解
2019/12/02 Python
Python partial函数原理及用法解析
2019/12/11 Python
通过Python实现一个简单的html页面
2020/05/16 Python
Belle Maison倍美丛官网:日本千趣会旗下邮购网站
2016/07/22 全球购物
急诊科护士自我鉴定
2013/10/14 职场文书
《窗前的气球》教学反思
2014/04/07 职场文书
和睦家庭事迹
2014/05/14 职场文书
检查机关领导群众路线教育实践活动个人整改措施
2014/10/28 职场文书
2015年监理工作总结范文
2015/04/07 职场文书
工资证明格式模板
2015/06/12 职场文书
Mysql 文件配置解析介绍
2022/05/06 MySQL