二维码弹出叠加效果

最新推荐文章于 2023-11-21 11:24:34 发布

转载最新推荐文章于 2023-11-21 11:24:34 发布 · 300 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/u/2324376/blog/710720

2019独角兽企业重金招聘Python工程师标准>>>

主要是利用mouseover事件，进行元素和边界判定，从而自动弹出或隐藏二维码。

HTML结构如下：

<ul class="tuijian">
    <li>
      <img src="abc.jpg">
      <div class="ewm"><img src="qrcode.png"></div>
      <h3>abc图片描述</h3>
      <h4>更多的文字描述</h4>
    </li>
    <!-- 以下结构相同，省略 -->
</ul>

CSS定义如下：

.tuijian {
  margin-top: 20px;
  margin-left: -6px;
  padding: 0 20px;
  white-space: nowrap;
  overflow: hidden;
}

.tuijian>li {
  display: inline-block;
}

.tuijian>li+li {
  margin-left: 12px;
}

.tuijian>li>img {
  width: 236px;
  height: 236px;
}

.tuijian>li>h3 {
  margin-top: 16px;
  margin-bottom: 16px;
  width: 236px;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0;
  font-size: 18px;
  font-weight: normal;
}

.tuijian>li>h4 {
  margin-top: 0;
  margin-bottom: 0;
  padding: 0;
  font-size: 16px;
  font-weight: normal;
  color: #666;
}

.tuijian .ewm {
  display: none;
  position: absolute;
  margin-top: -236px;
  width: 236px;
  height: 236px;
  padding: 18px 17px;
  background-color: rgba(0, 0, 0, .4);
}

.tuijian .ewm>img {
  width: 200px;
  height: 200px;
}

架子已搭好，可以绑定鼠标事件了：

$('.tuijian').on('mouseover', function (e) {
    var tn = e.target.tagName;
    if (0 > ['UL', 'LI', 'IMG', 'DIV'].indexOf(tn)) return; // 尽可能减少判定次数
    var tc = e.target.className,
        pc = e.target.parentNode.className;
    if (tn === 'IMG') { // show
        $(e.target).siblings('.ewm').slideDown('fast');
    } else if (tc !== 'ewm' && pc !== 'ewm') { // hide
        $('.ewm').slideUp('fast');
    }
});

转载于:https://my.oschina.net/u/2324376/blog/710720