你的位置:首页 > Java教程

[Java教程]鼠标悬停出现大图并跟随鼠标指针移动


鼠标悬停出现大图并跟随鼠标指针移动:
在一些具有图片列表的网站中,当鼠标放在小图上的时候能够弹出一个大图,并且当鼠标在图片上移动的时候,大图也能够随着鼠标指针运动,非常的人性化,也提高了网站的动态化效果,下面简单介绍一下如何实现此效果:

<!DOCTYPE html><html><head><meta charset="utf-8"><title>jQuery的鼠标悬停时放大图片的效果制作</title><style>* { margin:0; padding:0;}img{ vertical-align:bottom; border:none;}body{ background:#f0f0f0; height:800px; font-family:Arial;}ul { list-style:none;}h1{ font-size:20px; width:680px; margin:3% auto 5px; color:#202020;}ul#gallery{ width:660px; margin:0 auto 10px; padding-left:20px; border:1px solid #d3d3d3; background:#fff; overflow:hidden;}ul#gallery li{ width:200px; height:200px; float:left; margin:20px 20px 20px 0; display:inline;}ul#gallery li a.smallimage{ background:#333; display:block; width:200px; height:200px;}#bigimage{ position:absolute; display:none;}#bigimage img{ width:400px; height:400px; padding:5px; background:#fff; border:1px solid #e3e3e3;}</style><script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script><script type="text/javascript">$(function(){  var x = 22; var y = 20;   $("a.smallimage").hover(function(e){  $("body").append('<p id="bigimage"><img src="'+ this.rel + '" alt="" /></p>');  $(this).find('img').stop().fadeTo('slow',0.5);   widthJudge(e);  $("#bigimage").fadeIn('fast'); },function(){  $(this).find('img').stop().fadeTo('slow',1);  $("#bigimage").remove(); });  $("a.smallimage").mousemove(function(e){  widthJudge(e); });  function widthJudge(e){  var marginRight = document.documentElement.clientWidth - e.pageX;   var imageWidth = $("#bigimage").width();  if(marginRight < imageWidth){   x = imageWidth + 22;   $("#bigimage").css({top:(e.pageY - y ) + 'px',left:(e.pageX - x ) + 'px'});   }  else{   x = 22;   $("#bigimage").css({top:(e.pageY - y ) + 'px',left:(e.pageX + x ) + 'px'});  };  }})</script></head><body><ul id="gallery"><li> <a href="#" class="smallimage" rel="mytest/code/726/images/001_big.jpg">  <img src="mytest/code/726/images/001_small.jpg" alt="" /> </a></li><li><a href="#" class="smallimage" rel="mytest/code/726/images/002_big.jpg"> <img src="mytest/code/726/images/002_small.jpg" alt="" /></a></li><li><a href="#" class="smallimage" rel="mytest/code/726/images/003_big.jpg"> <img src="mytest/code/726/images/003_small.jpg" alt="" /></a></li></ul></body></html>

代码实现了效果,当鼠标放在图片上的时候可以出现大图,当鼠标在小图中移动时,大图也会跟随者鼠标指针运动。
下面简单介绍一下实现此效果的过程:
一.实现原理:
当鼠标放在图片上的时候就会触发小图的hover事件,hover事件的处理函数可以为body添加p元素以控制大图的显示并且调用widthJudge()函数用以控制大图的坐标位置,当鼠标离开的时候会移除添加的p元素使大图消失。当鼠标在小图中移动的时候会触发小图的mousemove事件,此事件处理函数可以调用widthJudge()函数用以控制大图的坐标。
二.代码注释:
1.$(function(){},规定当文档结构完全加载完成时再去执行函数中的代码。
2.var x = 22和var y = 20用来规定鼠标指针距离大图的距离。
3.$("a.smallimage").hover(function(e){},为小图绑定hover事件处理函数。关于hover事件可以参阅 jQuery的hover事件。
4.$("body").append('<p id="bigimage"><img src="'+ this.rel + '" alt="" /></p>'),用于添加一个p元素,p中的图片即是要显示的大图。大图的src属性值是当前小图的rel属性值。
5.$(this).find('img').stop().fadeTo('slow',0.5),将小图设置为半透明。
6.$("#bigimage").fadeIn('fast')显示图片。
7.$(this).find('img').stop().fadeTo('slow',1)将小图恢复原样。
8.$("#bigimage").remove(),移除添加的p元素,也就是隐藏大图。
9.$("a.smallimage").mousemove(function(e){},为小图绑定mousemove事件处理函数以此调用widthJudge()函数。关于mousemove函数可以参阅jQuery的mousemove事件。
10.function widthJudge(e){},此事件用于控制图片的位置,e是事件对象。
11.var marginRight = document.documentElement.clientWidth - e.pageX,用来计算鼠标指针右半部可见区域的尺寸。
12.var imageWidth = $("#bigimage").width(),用来获得大图的宽度。
13.if(marginRight < imageWidth)用来判断鼠标指针右半部可见区域的尺寸是否小于大图的宽度,如果小于的话则将图片在鼠标指针的左侧显示,否则在鼠标指针的右侧显示。这基本就是一个数学逻辑问题。

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=7989

更多内容可以参阅:http://www.softwhy.com/jquery/