1. 程式人生 > >頁面圖片點選後的顯示效果

頁面圖片點選後的顯示效果

{    field: "filepath1",     title: "整改前圖片",     sortable: false,     width: 135,     align: 'center',     headalign: 'center',     formatter: function formatterdate(val, row) {
        var s = "";         if (val) {             var pathArr = val.split(",");             for (var i = 0; i < pathArr.length; i++) {
                if (pathArr[i]) {                     var k = zh(pathArr[i]);                     s = s + '<img width="20px" height="20px" src="' + k + '" onclick="sybig(this)" />';
                }             }         }         return s;     } }

<script type="text/javascript">

//獲取到圖片路徑 function zh(o) {     var s = o.substring(o.lastIndexOf("."));     var d = o.substring(0, o.lastIndexOf("_"));     var k = d + "_min" + s;     return k; } //點選內容事件(放大在當前頁面的一個放大鏡效果) function sybig(obj) {     var o = obj.src;     var s = o.substring(o.lastIndexOf("."));     var d = o.substring(0, o.lastIndexOf("_"));     var k = d + "_sy" + s;     layer.open({         zIndex: 1,         type: 1,         area: ['300px', '300px'],         title: false,         closeBtn: 0,         skin: 'layui-layer-nobg',         //沒有背景色         shadeClose: true,         content: '<img width="300px"   height="300px" src="' + k + '" onclick="ytbig(this)"/>',     }); }
//點選放大後圖片的效果(跳轉到另一個頁面大圖顯示)     function ytbig(obj) {         var o = obj.src;         var s = o.substring(o.lastIndexOf("."));         var d = o.substring(0, o.lastIndexOf("_"));         var k = d + "_yt" + s;         window.open(k);     }

</script>