购物网站常用的鼠标滑过商品显示提示层效果

购物网站常用的鼠标滑过商品显示提示层效果
 点击预览  点击下载

这个效果比较常用,在一些购物类分享类的网站较为常见,一般是当鼠标经过图片的时候,会出现一个提示的层,层中也许是店铺的名字,或者是店铺的简单介绍等。

首先,要实现这个效果,先要来构造页面,思路是一个div,里面包含一个images,包含一个span,span里面的文字就是我们的提示层文字。接着更进一步构思,这样的效果图片都是带连接的,如果我们用div也是可以加上连接的,但是对于优化来讲不太好,所以把div层换成a标签,控制a成为块状元素,里面包含2个内容,一个是图片,一个是提示层。页面结构构思如下:

  1. <a class="box mr39" href="http://www.baidu.com"
  2. <img src="images/shop4.jpg" width="155" height="90" /> 
  3. <span class="box_hover">这里是店铺的名字</span> 
  4. </a> 

页面构思完成之后,再来添加样式,默认情况下是不应该让提示层显示的,也就是说让我们看不见那个提示层的。最开始我的构思是控制层的显示和隐藏来实现,用show()和hide()实现的,后来我发现,show()和hide()做出来只是单纯的控制层的显示和隐藏,做不出来我需要的效果,让层慢慢从底部逐渐增大的这种效果,所以pass掉了。

接下来我想能不能用slideDown()、slideUp、 slideToggle()来实现,这个方法就是通过高度变化来显示和隐藏元素的。但是经过试验,我发现这个方法一般用于默认的时候已经有了一个显示的层的情况下,不太适用于我们现在的情况下,因为我们的默认情况下,span层是需要看不到的。

最后我想到了动画animate();可以用动画来控制span层距离父元素顶部的高度,来实现这一个效果。首先我们先让span位于image下面,为了不让span显示出来,所以设置它的父元素a标签,overflow:hidden;超过的部分隐藏掉,a的大小和图片的大小一样。这样span标签就不会被我们看见,我们利用绝对定位来实现效果,默认情况下,span刚好在图片下面,也就是说span距离父元素top的距离是图片的高度,当我们鼠标滑过的时候,改变span的top值,top值得大小等于span标签的高度大小,这样刚刚好把span显示出来。

下面是JQuery代码:

  1. $(document).ready(function(){ 
  2.         $(".box").mouseover(function(){ 
  3.                 $(this).find(".box_hover").animate({top:62,opacity:0.65},{queue:false,duration:180}); 
  4.         }); 
  5.         $(".box").mouseout(function(){ 
  6.                 $(this).find(".box_hover").animate({top:90,opacity:0.65},{queue:false,duration:180}); 
  7.         }); 
  8. }); 

一个效果或许有多种方式能够实现,但是我们要尽力去寻找最优的实现方法,不论是从页面结构的优化来说,还是从Jquery代码的简洁性可重复利用的角度来说。如果一种思路走不通,要及时寻找新的思路,不要死钻牛角尖。写出最优的方法有很大一部分取决于你的思想,你的思路,你的html结构的清晰度和简化度。

转载请注明:代码家园 » 购物网站常用的鼠标滑过商品显示提示层效果

评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)