划过图片出现放大镜效果

来源：互联网发布：在线语音朗读软件编辑：程序博客网时间：2024/04/30 01:35
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>无标题文档</title><script src="jquery.min.js"></script><script>/*滑过图片出现放大镜效果*/$(function(){       $(" .prolist ul li").each(function(index){  var position = $(this).position();  var li_left = position.left;  var li_top = position.top;  var img_width = $(this).find("img").width();  var img_height = $(this).find("img").height();              var spanHtml = '<span style="position: absolute; top: '+li_top+'px; left: '+li_left+'px; width:'+img_width+'px; height: '+img_height+'px; cursor: pointer;" class="imageMask"></span>';  $(spanHtml).hover(function(){$(this).addClass("imageOver");    },function(){$(this).removeClass("imageOver"); }).appendTo( $(this).find("a") ); })})</script><style>/* imgHover */span.imageMask{background:white; filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity: 0;opacity: 0;}span.imageOver{background: url(images/zoom.gif) no-repeat 50% 50%;filter:alpha(opacity=60);-moz-opacity:0.6;-khtml-opacity: 0.6;opacity: 0.6;}</style></head><body><div class="prolist"><h3>新款上市</h3>            <div  class="prolist_content">                <ul>                    <li>                        <a href="detail.html"><img src="images/img_1.jpg" alt="" /></a><span>免烫高支棉衬衣1</span><span>                            $120.00</span>                    </li>                                  </ul>            </div></div>  </body></html>
效果图：