先展示效果图：当用户将鼠标移动到图片上面时，会自动显示其他信息，可作为商品放大镜等其他需求
实现：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>bootstrap弹出层实例</title>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<!-- 官方链接https://v3.bootcss.com/javascript/#popovers 弹出层 -->
<!--
参数：data-html
true 弹出内容为html，false 弹出内容为text
data-container
body不用管
data-placement
top | bottom | left | right | auto
对应的弹出层的位置，例如top就在下面代码img的上方
data-toggle
等同于id
data-trigger
主要是click | hover
分别对应点击 | 移动到目标位置自动响应
data-content
弹出层的内容（配合data-html使用，如果单纯是text文本，默认false，若想识别html代码则为true）
-->
<!--
使用方法：先引入jq，bootstrap.js
然后在js中写上执行方法
例如：
<script>
$(function () {
$('[data-toggle="popover"]').popover();
})
</script>
-->
<a href='#'
style="background-color: transparent;margin: 0;padding: 0;border: 1px solid transparent;outline: none; "
data-html="true"
data-container="body"
data-toggle="popover"
data-placement="bottom"
data-trigger="hover"
data-content='
<img src="./image/2.jpg" />
'>
<img src="./image/1.jpg" alt="" style="margin:auto;">
</a>
<script>
//關注我們插件
$(function () {
$('[data-toggle="popover"]').popover();
})
</script>
</body>
</html>
网友评论