• 欢迎访问小辉博客,有访必回!广告为已更换为百度联盟,希望随手点下,虽然博客是兴趣所在,但也想有一个良性循环!请大家谅解!

简单鼠标滑过图片半透明提示效果

前端 小辉 803次浏览 已收录 2个评论 扫描二维码

简单的鼠标滑过图片半透明提示效果

 

上代码

HTML代码

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>RunJS</title>
    <script id="jquery_183" type="text/javascript" class="library" src="/js/sandbox/jquery/jquery-1.8.3.min.js"></script>
    </head>
    <body>
        <ul style="overflow:hidden;">
        <li>
                <img src="http://cdn.anyuecm.cn/qiniu/622/image/a41bfe1a6b7164d0c188de34ecd7ab82.jpg?watermark/1/image/aHR0cDovL2Nkbi5hbnl1ZWNtLmNuL3dwLWNvbnRlbnQvdXBsb2Fkcy8yMDE2LzEyLzIwMTYxMjI4MDUzNTMwMjUucG5n/dissolve/100/gravity/SouthEast/dx/10/dy/10">
                 <div class="text">
                      产品展示
                  </div>
                <div class="main">
                </div>
        </li>
        <li>
                <img src="http://cdn.anyuecm.cn/qiniu/622/image/99fd45e295fbd593af3b007b2a6d5872.jpg?watermark/1/image/aHR0cDovL2Nkbi5hbnl1ZWNtLmNuL3dwLWNvbnRlbnQvdXBsb2Fkcy8yMDE2LzEyLzIwMTYxMjI4MDUzNTMwMjUucG5n/dissolve/100/gravity/SouthEast/dx/10/dy/10">
                 <div class="text">
                      产品展示
                  </div>
                <div class="main">
                </div>
        </li>
        <li>
                <img src="http://cdn.anyuecm.cn/qiniu/622/image/64312e9392af3429ee4bda3c38f1d400.jpg?watermark/1/image/aHR0cDovL2Nkbi5hbnl1ZWNtLmNuL3dwLWNvbnRlbnQvdXBsb2Fkcy8yMDE2LzEyLzIwMTYxMjI4MDUzNTMwMjUucG5n/dissolve/100/gravity/SouthEast/dx/10/dy/10">
                 <div class="text">
                      产品展示
                  </div>
                <div class="main">
                </div>
        </li>
        <li>
                <img src="http://cdn.anyuecm.cn/qiniu/622/image/685320dc7bf65528c1cc3bf590b9bb2f.jpg?watermark/1/image/aHR0cDovL2Nkbi5hbnl1ZWNtLmNuL3dwLWNvbnRlbnQvdXBsb2Fkcy8yMDE2LzEyLzIwMTYxMjI4MDUzNTMwMjUucG5n/dissolve/100/gravity/SouthEast/dx/10/dy/10">
                 <div class="text">
                      产品展示
                  </div>
                <div class="main">
                </div>
        </li>
        <li>
                <img src="http://cdn.anyuecm.cn/qiniu/622/image/3bebad31ca88fd9efb02c935cd1bcf86.jpg?watermark/1/image/aHR0cDovL2Nkbi5hbnl1ZWNtLmNuL3dwLWNvbnRlbnQvdXBsb2Fkcy8yMDE2LzEyLzIwMTYxMjI4MDUzNTMwMjUucG5n/dissolve/100/gravity/SouthEast/dx/10/dy/10">
                 <div class="text">
                      产品展示
                  </div>
                <div class="main">
                </div>
        </li>
       <li>
            <img src="http://cdn.anyuecm.cn/qiniu/622/image/8933c8d538339cde5e27e2200d95387f.jpg?watermark/1/image/aHR0cDovL2Nkbi5hbnl1ZWNtLmNuL3dwLWNvbnRlbnQvdXBsb2Fkcy8yMDE2LzEyLzIwMTYxMjI4MDUzNTMwMjUucG5n/dissolve/100/gravity/SouthEast/dx/10/dy/10">
             <div class="text">
                  产品展示
              </div>
            <div class="main">
            </div>
       </li>
    </ul>
     
    </body>
</html>

JavaScript

$(function(){
        $("ul li").each(function(index, element) {
            $(this).hover(function(){
                 $(this).find(".main").addClass("opacity_layer");
                 $(this).find(".text").show().animate({"left":"0px"},300);
            },function(){
                $(this).find(".main").removeClass("opacity_layer"); 
                $(this).find(".text").css("left","-318px").hide();
            })  
        });
         
    });

css

*{margin:0;padding:0;}
ul{width:984px;}
li{float:left;width:318px; margin-right:10px;height:343px; position:relative;}
img{width:318px;height:343px;}
.main{width:100%;height:100%;position:absolute; top:0 ;left:0; z-index:0;}
.text{ width:318px;height:56px; line-height:56px; text-align:center;position:absolute; top:45% ;left:-318px;  z-index:9; background-color:#000;color:#fff; font:'微软雅黑'; display:none;}
.opacity_layer{background-color:#000; opacity:0.5; }

查看效果


小辉博客 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权 , 转载请注明简单鼠标滑过图片半透明提示效果

喜欢 (0)
[cnbzzh@qq.com]
分享 (0)
小辉
关于作者:
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(2)个小伙伴在吐槽
  1. 在博主网站上能收到不少干货呢。。。
    武侠故事2017-01-17 15:52 Reply Windows 7 | Chrome 45.0.2454.101
    • 小辉
      感谢对本博的支持
      小辉2017-01-17 15:55 Reply Windows 10 | Chrome 53.0.2785.104