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 相关文章推荐
javascript 选择文件夹对话框(web)
Jul 07 Javascript
JavaScript Event学习第八章 事件的顺序
Feb 07 Javascript
通过JS来判断页面控件是否获取焦点
Jan 03 Javascript
JavaScript中String.prototype用法实例
May 20 Javascript
jQuery 弹出层插件(推荐)
May 24 Javascript
jQuery实现手机自定义弹出输入框
Jun 13 Javascript
用js写的一个路由(简单实例)
Sep 24 Javascript
jQuery ajax 当async为false时解决同步操作失败的问题
Nov 18 Javascript
JS基于正则实现数字千分位用逗号分隔的方法
Jun 16 Javascript
移动端H5页面返回并刷新页面(BFcache)的方法
Nov 06 Javascript
使用Sonarqube扫描Javascript代码的示例
Dec 26 Javascript
微信小程序 简易计算器实现代码实例
Sep 02 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
WINDOWS服务器安装多套PHP的另类解决方案
2006/10/09 PHP
PHP实现MVC开发得最简单的方法――模型
2007/04/10 PHP
PHP连接SQLServer2005 的问题解决方法
2010/07/19 PHP
使用php+Ajax实现唯一校验实现代码[简单应用]
2011/11/29 PHP
PHP中strtotime函数使用方法分享
2012/01/10 PHP
PHP判断文件是否存在、是否可读、目录是否存在的代码
2012/10/03 PHP
深入解析php中的foreach问题
2013/06/30 PHP
ThinkPHP令牌验证实例
2014/06/18 PHP
浅析Yii2 GridView 日期格式化并实现日期可搜索教程
2016/04/22 PHP
php测试kafka项目示例
2020/02/06 PHP
如何通过PHP实现Des加密算法代码实例
2020/05/09 PHP
JavaScript取得鼠标绝对位置程序代码介绍
2012/09/16 Javascript
Chrome扩展页面动态绑定JS事件提示错误
2014/02/11 Javascript
JS获得浏览器版本和操作系统版本的例子
2014/05/13 Javascript
jQuery实现的导航下拉菜单效果
2016/07/04 Javascript
jquery 实现复选框的全选操作实例代码
2017/01/24 Javascript
Vue中父组件向子组件通信的方法
2017/07/11 Javascript
AngularJS service之select下拉菜单效果
2017/07/28 Javascript
微信小程序使用GoEasy实现websocket实时通讯
2020/05/19 Javascript
利用Python演示数型数据结构的教程
2015/04/03 Python
Python3使用turtle绘制超立方体图形示例
2018/06/19 Python
itchat-python搭建微信机器人(附示例)
2019/06/11 Python
基于python模拟bfs和dfs代码实例
2020/11/19 Python
python读取excel数据并且画图的实现示例
2021/02/08 Python
pytorch 实现L2和L1正则化regularization的操作
2021/03/03 Python
纯CSS3实现手风琴风格菜单具体步骤
2013/05/06 HTML / CSS
很酷的小工具和电子产品商城:GearBest
2016/11/19 全球购物
英国老牌潮鞋店:Offspring
2019/08/19 全球购物
中兴通讯全球官方网站:ZTE
2020/12/26 全球购物
初一地理教学反思
2014/01/16 职场文书
干部培训自我鉴定
2014/01/22 职场文书
珍珠鸟教学反思
2014/02/01 职场文书
铣床操作工岗位职责
2014/06/13 职场文书
2015年见习期工作总结
2014/12/12 职场文书
2015年环保局工作总结
2015/05/22 职场文书
刮痧观后感
2015/06/05 职场文书