摘要：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0">&
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>产品列表</title>
<link rel="stylesheet" href="layui/css/layui.css">
<style>
.img1{height: 28px;float: right;border: 1px solid #f0f0f0;padding: 1px;}
</style>
</head>
<body>
<div style="height:40px;margin:10px;">
<span class="bg green" style="width:100px;height: 40px;background:#009688;text-align: center;line-height: 40px;float:left;margin-left:30px;color:#fff;font-size:16px;">商品列表</span>
<button class="layui-btn layui-btn-sm" style="float:right;" onclick="add()">添加</button>
<div style="height:40px;border-bottom:3px solid #009688;"></div>
<form class="layui-form">
<div class="layui-form-item">
<div class="layui-input-inline">
<input type="text" name="name" placeholder="请输入商品名称" class="layui-input">
</div>
<div class="layui-input-inline">
<button class="layui-btn layui-btn-primary" lay-submit><span class="layui-icon layui-icon-search"></span>搜索</button>
</div>
</div>
</form>
<table class="layui-table" id="demo" lay-filter="demo">
<thead>
<tr>
<th>ID</th>
<th>分类</th>
<th>名称</th>
<th>最低价格</th>
<th>成本</th>
<th>PV</th>
<th>状态</th>
<th>添加时间</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>iphone</td>
<td>apple iphone 8 plus 64GB<img src="images/f1.png" class="img1" onmouseover="show_img(this)" onmouseleave="hide_img()"></td>
<td>5000.00</td>
<td>3000.00</td>
<td>3</td>
<td>正常</td>
<td>2019-2-15 12:30:00</td>
<td><button class="layui-btn layui-btn-xs" lay-event="edit">编辑</button>
<button class="layui-btn layui-btn-danger layui-btn-xs" onclick="del()">删除</button></td>
</tr>
</tbody>
</table>
<div style="clear:both;"></div>
<div id="test1"></div>
</div>
<script src="layui/layui.js"></script>
<script>
layui.use(['layer','laypage'],function(){
layer = layui.layer;
laypage= layui.laypage;
$ = layui.jquery;
//执行一个laypage实例
laypage.render({
elem: 'test1' //注意，这里的 test1 是 ID，不用加 # 号
,count: 50 //数据总数，从服务端得到
});
});
function del(){
layer.confirm('真的删除行么', {
icon:2,
btn:['确定','取消']
}, function(index, layero){
layer.close(index)
//按钮【按钮一】的回调 ？？怎么写？？
}, function(index){
//按钮【按钮二】的回调
});
}
function add(){
layer.open({
type: 2,
title:'添加商品',
area:['480px','420px'],
content: 'shangpin.html'
});
}
//获取图片位置
function getMousePos(event) {
var e = event || window.event;
var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
var x = e.pageX || e.clientX + scrollX;
var y = e.pageY || e.clientY + scrollY;
return { 'x': x, 'y': y };
}
//显示大图
function show_img(obj){
var imgurl=$(obj).attr('src')
var res=getMousePos()
var html='<div style="background:#fff;width:200px;border:1px solid #ccc;border-radius:3px;padding:2px;\
position:absolute;left:'+res.x+'px;top:'+res.y+'px;z-index:2;" id="preview">\
<img style="width:100%;border-radius:3px;" src="'+imgurl+'"></div>'
$('body').append(html)
}
function hide_img(){
$('#preview').remove()
}
</script>
</body>
</html>
重点，获取鼠标位置，显示大图。
批改老师：韦小宝批改时间：2019-02-15 15:11:27
老师总结：嗯！写的很不错 有自己的想法 还是有点意思的 继续加油吧！！
