jQuery实现漂亮实用的商品图片tips提示框效果(无图片箭头+阴影)

jQuery实现漂亮实用的商品图片tips提示框效果(无图片箭头+阴影)_jquery

php中文网

发布： 2016-05-16 15:05:12

原创

1857人浏览过

本文实例讲述了jquery实现漂亮实用的商品图片tips提示框效果。分享给大家供大家参考，具体如下：

运行效果截图如下：

具体代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<style type="text/css"> 
#tip  {position:absolute;display:none;}
#tip s  {position:absolute;top:40px;left:-21px;display:block;width:0px;height:0px;font-size:0px;line-height:0px;border-color:transparent #BBA transparent transparent;border-style:dashed solid dashed dashed;border-width:10px;}
#tip s i {position:absolute;top:-10px;left:-8px;display:block;width:0px;height:0px;font-size:0px;line-height:0px;border-color:transparent #fff transparent transparent;border-style:dashed solid dashed dashed;border-width:10px;}
#tip .t_box {position:relative;background-color:#CCC;filter:alpha(opacity=50);-moz-opacity:0.5;bottom:-3px;right:-3px;}
#tip .t_box div {position:relative;background-color:#FFF;border:1px solid #ACA899;padding:1px;top:-3px;left:-3px;}
.tip  {width:82px;height:82px;border:1px solid #DDD;}
</style>
<script type="text/javascript">
  $(function () {
    $('.tip').mouseover(function () {
      var $tip = $('<div id="tip"><div class="t_box"><div><s><i></i></s>@@##@@</div></div></div>');
      $('body').append($tip);
      $('#tip').show('fast');
    }).mouseout(function () {
      $('#tip').remove();
    }).mousemove(function (e) {
      $('#tip').css({ "top": (e.pageY - 60) + "px", "left": (e.pageX + 30) + "px" })
    })
  })
</script>
<p> </p>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/ai/1091">
                            <img src="https://img.php.cn/upload/ai_manual/000/000/000/175680091524298.png" alt="开拍">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/ai/1091">开拍</a>
                            <p>用AI制作口播视频</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="开拍">
                                <span>289</span>
                            </div>
                        </div>
                        <a href="/ai/1091" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="开拍">
                        </a>
                    </div>
                
<a href="#" >@@##@@</a>
<a href="#" >@@##@@</a>
<a href="#" >@@##@@</a>

登录后复制

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery切换特效与技巧总结》、《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》、《jquery选择器用法总结》及《jQuery常用插件及用法总结》

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