<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="static/layui/css/layui.css">
<script type="text/javascript" src="static/layui/layui.js"></script>
<style type="text/css">
.header span{background: #009688;margin-left: 30px;padding: 10px;color:#ffffff;}
.header button{float: right;margin-top: -5px;}
.thumb{height: 28px;float: right;border: 1px solid #f0f0f0;padding: 1px;}
</style>
</head>
<body style="padding: 10px;">
<div class="header">
<span>商品列表</span>
<button class="layui-btn layui-btn-sm" onclick="add()">添加</button>
</div>
<div class="layui-form-item">
<div class="layui-input-inline">
<input type="text" name="title" required lay-verify="required" placeholder="请输入商品名称" class="layui-input">
</div>
<button class="layui-btn layui-btn-primary"><i class="layui-icon"></i> 搜索</button>
</div>
<table class="layui-table">
<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>14</td>
<td>iphone</td>
<td>Apple iPhone 8 Plus 64GB 红色特别版 移动联通电信4G手机<img class="thumb" src="../uploads/20180524\13b7cee33f10bcdaeeb273f31e2600f5.jpg"
onmouseover="show_img(this)" onmouseleave="hide_img()"> </td><!-- -->
<td>5000.00</td>
<td>3000.00</td>
<td>3</td>
<td>正常</td>
<td>2018-05-24 14:31:04</td>
<td>
<button class="layui-btn layui-btn-xs" onclick="add()">编辑</button>
<button class="layui-btn layui-btn-danger layui-btn-xs" onclick="del()">删除</button>
</td>
</tr>
<tr>
<td>14</td>
<td>iphone</td>
<td>Apple iPhone 8 Plus 64GB 红色特别版 移动联通电信4G手机<img src="../uploads/20180524\13b7cee33f10bcdaeeb273f31e2600f5.jpg " class="thumb"
onmouseover="show_img(this)" onmouseleave="hide_img()"> </td><!-- -->
<td>5000.00</td>
<td>3000.00</td>
<td>3</td>
<td>正常</td>
<td>2018-05-24 14:31:04</td>
<td>
<button class="layui-btn layui-btn-xs" onclick="add()">编辑</button>
<button class="layui-btn layui-btn-danger layui-btn-xs" onclick="del()">删除</button>
</td>
</tr>
<tr>
<td>14</td>
<td>iphone</td>
<td>Apple iPhone 8 Plus 64GB 红色特别版 移动联通电信4G手机<img src="../uploads/20180524\13b7cee33f10bcdaeeb273f31e2600f5.jpg " class="thumb"
onmouseover="show_img(this)" onmouseleave="hide_img()"> </td><!-- -->
<td>5000.00</td>
<td>3000.00</td>
<td>3</td>
<td>正常</td>
<td>2018-05-24 14:31:04</td>
<td>
<button class="layui-btn layui-btn-xs" onclick="add()">编辑</button>
<button class="layui-btn layui-btn-danger layui-btn-xs" onclick="del()">删除</button>
</td>
</tr>
</tbody>
</table>
<div id="test1"></div>
<script type="text/javascript">
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){
//按钮【按钮一】的回调
}, function(index){
//按钮【按钮二】的回调
});
}
// 添加
//预览图片
//1、首先获取到浏览器窗口的位置（相对于文档）
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:solid 1px #ccc;border-radius: 6px;padding: 2px;position: absolute;left:'+res.x+'px;top:'+res.y+'px;z-index:4" id="preview">\
<img style="width: 100%;border-radius: 6px;" src="'+imgurl+'">\
</div> '
$('body').append(html)
}
function hide_img(){
$('#preview').remove() //$('#preview') 获取到当前id
}
</script>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="static/plugins/layui/css/layui.css">
<script type="text/javascript" src="static/plugins/layui/layui.js"></script>
</head>
<body>
<button type="button" class="layui-btn" id="test1">
<i class="layui-icon"></i>上传图片
</button>
<script>
layui.use('upload', function(){
var upload = layui.upload;
//执行实例
var uploadInst = upload.render({
elem: '#test1' //绑定元素
,url: '/upload/' //上传接口
,done: function(res){
//上传完毕回调
}
,error: function(){
//请求异常回调
}
});
});
</script>
</body>
</html>
