jQuery学习(一)：鼠标移动显示大图

鼠标移动，显示大图，在不少网站上都有这种需要，特别是Zol、360buy、Taobao等。平时显示缩略图，在用户需要查看细节的时候，才显示与此图形匹配的大图。使用jQuery实现非常方便。即先显示小图片，当用户鼠标在小图片上移动时，再根据进入、移除或在图片上移动，而添加不同的处理事件，分别显示、删除或移动大图片，其大致代码如下：

1.定义所用到的样式

1:

   2:     <style type="text/css">

   3:         *

   4:         {

   5:             margin: 0px;

   6:             padding: 0px;

   7:         }

   8:         img

   9:         {

  10:             border: 1px solid #CCCCCC;

  11:         }

  12:         #imgdiv /*新增加大图样式*/

  13:         {

  14:             margin: 0 auto;

  15:             border: 1px solid #0F0F0F;

  16:             padding: 80px;

  17:             width: 410px;

  18:             background: #FFFFFF;

  19:             display: none;

  20:             position: absolute; /*  这个对显示鼠标的位置很重要，如果不是绝对位置的话，将显示的地方不一样*/

  21:             vertical-align: middle;

  22:             text-align: center;

  23:             font-family: Arial;

  24:         }

  25:         div#imgdiv p /*大图下面的文字标题样式*/

  26:         {

  27:             padding-top: 20px;

  28:             text-align: center;

  29:         }

  30:         ul

  31:         {

  32:             margin: 0 auto;

  33:             margin-left: 50px;

  34:             text-align: center;

  35:             width:100%;

  36:         }

  37:         li

  38:         {

  39:             list-style: none;

  40:             float: left;

  41:             text-align: center;

  42:             margin: 10px 10px 10px 10px;

  43:         }

  44:         li p

  45:         {

  46:             padding-top: 6px;

  47:         }

  48:     </style>

2.添加jQuery引用，并为图片添加mouseover、mouseout和mousemove函数。

   1: <script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>

   2: <script type="text/javascript">

   3:     $(function () {

   4:         $("img").mouseover(function (e) {

5:

   6:             var s = $("<div id = 'imgdiv'><img src = " + this.src + "  width = '300' height='300'/><p>" + this.title + "</p></div>");

   7:             $("body").append(s);

   8:             $("#imgdiv").css({

   9:                 "top": (e.pageY + 20) + "px",

  10:                 "left": (e.pageX + 10) + "px"

  11:             }).show("slow");

12:

  13:         }).mouseout(function () {

  14:             $("#imgdiv").remove();

  15:         }).mousemove(function (e) {

16:

  17:             $("#imgdiv").css({

  18:                 "top": (e.pageY + 20) + "px",

  19:                 "left": (e.pageX + 10) + "px"

  20:             });

  21:         });

  22:     });

  23: </script>

其中mouseover也可以使用mouseenter函数替换，其效果一样。

3.Html页面代码。

   1: <body>

   2:     <ul>

   3:         <li><a href="">

   4:             <img src="Images/4.png" width="200" height="150" title="Nice girl" alt="Nice girl!" /></a><p>

   5:                 Nice girl</p>

   6:         </li>

   7:         <li><a href="">

   8:             <img src="Images/1.PNG" width="200" height="150" title="Fangfang" alt="Fangfang!" /></a><p>

   9:                 FangFang</p>

  10:         </li>

  11:     </ul>

  12: </body>

4.显示效果。

参考文献：

[1] fivecent, 图片提示－鼠标放在图片上会显示图片的大图上。

转载于:https://www.cnblogs.com/RitchieChen/archive/2012/08/21/2648363.html

jQuery学习(一)：鼠标移动显示大图相关推荐

jQuery 仿淘宝鼠标悬停显示大图效果
页面只需要包含 jquery库, bigpic.js 和 bigpic.css即可自动给页面上符合条件的图片加上悬停效果. <script type="text/javascript& ...
[JQuery 学习笔记] 隐藏和显示 hide() 和 show()
hide() 和 show() 方法 <!DOCTYPE html> <html lang="en"> <head><meta char ...
css实现鼠标覆盖显示大图
html <div <a href="#"> <img src="img01.jpg"> <img src="im ...
jQuery学习笔记系列（一）——入口函数，jQuery对象和DOM对象，jQuery选择器、样式操作、效果（显示隐藏、滑入滑出、淡入淡出、自定义动画、停止动画队列）
day01 - jQuery 学习目标: 能够说出什么是 jQuery 能够说出 jQuery 的优点能够简单使用 jQuery 能够说出 DOM 对象和 jQuery 对象的区别能够写出常用的 ...
Jquery 点击图片在弹出层显示大图
[转]Jquery 点击图片在弹出层显示大图使用jquery, 实现点击图片在弹出层显示大图,再次点击关闭,加入图片高宽和窗口高宽的大小判断. 效果图片: 1.点击前的效果: 2.点击后的效果: h ...
java 鼠标停留时,[Java教程]鼠标悬浮停留三秒显示大图_星空网
鼠标悬浮停留三秒显示大图 2014-06-27 0 网站大连烟花网 http://dlyh365.com *{margin:0;padding:0;list-style-type:none;} im ...
html点击图片弹出大图特效代码,Jquery 点击图片在弹出层显示大图
使用jquery,实现点击图片在弹出层显示大图,再次点击关闭,加入图片高宽和窗口高宽的大小判断. 效果图片如下: 1.点击前的效果: 2.点击后的效果: html代码如下: 弹出层图片 Js代码如下: ...
php鼠标显示图片,鼠标放在图片上显示大图的JS代码
显示大图和隐藏大图的js代码: //显示图片 function over(imgid,obj,imgbig) { //大图显示的最大尺寸 4比3的大小 400 300 maxwidth=400; ...
jQuery 学习笔记
jQuery学习ing jQuery初学入口函数 jQuery对象和DOM对象区别转换选择器 + 迭代基本选择器层级选择器隐式迭代筛选选择器链式编程修改样式 jQuery 效果显 ...

jQuery学习(一)：鼠标移动显示大图

jQuery学习(一)：鼠标移动显示大图相关推荐

最新文章

热门文章