JQuery鼠标移到小图显示大图效果的方法

墨蓝 2022-03-29 15:22 202阅读 0赞

# JQuery鼠标移到小图显示大图效果的方法 #

本文实例讲述了JQuery鼠标移到小图显示大图效果的方法。分享给大家供大家参考。具体分析如下：

这里的显示大图功能类似上一篇《[JQuery实现超链接鼠标提示效果的方法][JQuery]》，稍微修改一下代码，就可以做出一个图片的提示效果。

参考前面的超链接提示效果的代码，只需要将创建的div元素的代码改为：

[?][Link 1]

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> </td> 
   <td> 
    <div> 
     <div> 
      <code>//创建 div 元素 图片提示</code> 
     </div> 
     <div> 
      <code>var</code> 
      <code>tooltip = </code> 
      <code>"&lt;div id="</code> 
      <code>tooltip</code> 
      <code>"&gt;&lt;img src="</code> 
      <code>"+ this.href +"</code> 
      <code>" alt="</code> 
      <code>预览图</code> 
      <code>"&gt;&lt;\/div&gt;"</code> 
      <code>; </code> 
     </div> 
     <div> 
      <code>&lt;/div&gt;</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

当鼠标滑过图片后，显示就会有大图提示效果。为了使效果更为人性化，还需要为图片增加说明文字，即提示出来的大图片下面出现图片相应的介绍文字。

可以根据超链接的title属性值来获得图片相应的介绍文字，JQuery代码如下：

[?][Link 1]

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> </td> 
   <td> 
    <div> 
     <div> 
      <code>this</code> 
      <code>.myTitle = </code> 
      <code>this</code> 
      <code>.title; </code> 
     </div> 
     <div> 
      <code>this</code> 
      <code>.title = </code> 
      <code>""</code> 
      <code>;&nbsp; </code> 
     </div> 
     <div> 
      <code>var</code> 
      <code>imgTitle = </code> 
      <code>this</code> 
      <code>.myTitle? </code> 
      <code>"&lt;br /&gt;"</code> 
      <code>+ </code> 
      <code>this</code> 
      <code>.myTitle : </code> 
      <code>""</code> 
      <code>;</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

然后将它追加到div元素中，代码如下：

[?][Link 1]

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> </td> 
   <td> 
    <div> 
     <div> 
      <code>// 创建 div 元素</code> 
     </div> 
     <div> 
      <code>var</code> 
      <code>tooltip = </code> 
      <code>"&lt;div id='tooltip'&gt;&lt;img src='"</code> 
      <code>+ </code> 
      <code>this</code> 
      <code>.href +</code> 
      <code>"' alt='产品预览图'/&gt;"</code> 
      <code>+imgTitle+</code> 
      <code>"&lt;\/div&gt;"</code> 
      <code>; </code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

在判断this.myTitle是否为""时，使用了三元运算。三元运算结构为：Boolean? 值1 : 值2。它的第1个参数必须为布尔值。当然三元运算也可以用“if()\{ \}else\{ \}”代替，例如：

[?][Link 1]

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> 
    <div>
      4 
    </div> 
    <div>
      5 
    </div> 
    <div>
      6 
    </div> </td> 
   <td> 
    <div> 
     <div> 
      <code>var</code> 
      <code>imgTitle; </code> 
     </div> 
     <div> 
      <code>if</code> 
      <code>(</code> 
      <code>this</code> 
      <code>.myTitle) { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>imgTitle = </code> 
      <code>"&lt;br /&gt;"</code> 
      <code>+ </code> 
      <code>this</code> 
      <code>.myTitle; </code> 
     </div> 
     <div> 
      <code>} </code> 
      <code>else</code> 
      <code>{ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>imgTitle = </code> 
      <code>""</code> 
      <code>; </code> 
     </div> 
     <div> 
      <code>}</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

这样，图片提示效果就完成了，当鼠标滑过图片时，图片会出现预览的大图，大图下面还会有介绍文字。

本例完整代码如下：

[?][Link 1]

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> 
    <div>
      4 
    </div> 
    <div>
      5 
    </div> 
    <div>
      6 
    </div> 
    <div>
      7 
    </div> 
    <div>
      8 
    </div> 
    <div>
      9 
    </div> 
    <div>
      10 
    </div> 
    <div>
      11 
    </div> 
    <div>
      12 
    </div> 
    <div>
      13 
    </div> 
    <div>
      14 
    </div> 
    <div>
      15 
    </div> 
    <div>
      16 
    </div> 
    <div>
      17 
    </div> 
    <div>
      18 
    </div> 
    <div>
      19 
    </div> 
    <div>
      20 
    </div> 
    <div>
      21 
    </div> 
    <div>
      22 
    </div> 
    <div>
      23 
    </div> 
    <div>
      24 
    </div> 
    <div>
      25 
    </div> 
    <div>
      26 
    </div> 
    <div>
      27 
    </div> 
    <div>
      28 
    </div> 
    <div>
      29 
    </div> 
    <div>
      30 
    </div> 
    <div>
      31 
    </div> </td> 
   <td> 
    <div> 
     <div> 
      <code>&lt;script type=</code> 
      <code>"text/javascript"</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>//&lt;![CDATA[</code> 
     </div> 
     <div> 
      <code>$(</code> 
      <code>function</code> 
      <code>(){ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>var</code> 
      <code>x = 10;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>var</code> 
      <code>y = 20;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>$(</code> 
      <code>"a.tooltip"</code> 
      <code>).mouseover(</code> 
      <code>function</code> 
      <code>(e){ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>this</code> 
      <code>.myTitle = </code> 
      <code>this</code> 
      <code>.title;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>this</code> 
      <code>.title = </code> 
      <code>""</code> 
      <code>;&nbsp; </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>var</code> 
      <code>imgTitle = </code> 
      <code>this</code> 
      <code>.myTitle? </code> 
      <code>"&lt;br/&gt;"</code> 
      <code>+ </code> 
      <code>this</code> 
      <code>.myTitle : </code> 
      <code>""</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>var</code> 
      <code>tooltip = </code> 
      <code>"&lt;div id='tooltip'&gt;&lt;img src='"</code> 
      <code>+ </code> 
      <code>this</code> 
      <code>.href +</code> 
      <code>"' alt='预览图'/&gt;"</code> 
      <code>+imgTitle+</code> 
      <code>"&lt;\/div&gt;"</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>//创建 div 元素</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>$(</code> 
      <code>"body"</code> 
      <code>).append(tooltip);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>//把它追加到文档中&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>$(</code> 
      <code>"#tooltip"</code> 
      <code>)</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>.css({ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>"top"</code> 
      <code>: (e.pageY+y) + </code> 
      <code>"px"</code> 
      <code>,</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>"left"</code> 
      <code>: (e.pageX+x) + </code> 
      <code>"px"</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>}).show(</code> 
      <code>"fast"</code> 
      <code>); </code> 
      <code>//设置x坐标和y坐标，并且显示</code> 
     </div> 
     <div> 
      <code>&nbsp;</code> 
      <code>}).mouseout(</code> 
      <code>function</code> 
      <code>(){ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>this</code> 
      <code>.title = </code> 
      <code>this</code> 
      <code>.myTitle;&nbsp; </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>$(</code> 
      <code>"#tooltip"</code> 
      <code>).remove(); </code> 
      <code>//移除 </code> 
     </div> 
     <div> 
      <code>&nbsp;</code> 
      <code>}).mousemove(</code> 
      <code>function</code> 
      <code>(e){ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>$(</code> 
      <code>"#tooltip"</code> 
      <code>)</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>.css({ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>"top"</code> 
      <code>: (e.pageY+y) + </code> 
      <code>"px"</code> 
      <code>,</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>"left"</code> 
      <code>: (e.pageX+x) + </code> 
      <code>"px"</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>});</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>});</code> 
     </div> 
     <div> 
      <code>})</code> 
     </div> 
     <div> 
      <code>//]]&gt;</code> 
     </div> 
     <div> 
      <code>&lt;/script&gt;</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

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

[JQuery]: http://www.jb51.net/article/67616.htm
[Link 1]: http://www.jb51.net/article/67617.htm