二维码弹出叠加效果

原创
2016/07/12 18:43
阅读数 254

主要是利用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');
    }
});
展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部