鼠标移到小图,放大镜实现

产品放大镜实现

鼠标移到到小图上,图片放大,效果展示如下

引入js支持源文件

<script type="text/javascript" src="/easyui/plugin/jeasyui.extensions.base.tooltip.js"></script>

代码实现,前台jsp页面代码

在DataGrid数据表格中注册事件:onLoadSuccess:loadSuccess
<table id="employeeDataGrid" class="easyui-datagrid" style="width:400px;height:250px"
       data-options="url:'/employee/page',fit:true,fitColumns:true,singleSelect:false,
        pagination:true,toolbar:'#gridToolBar',onRowContextMenu:showMenu
 		,onLoadSuccess:loadSuccess">
 		....

在你自己对应的js页面或者js代码区编写代码

//图片放大器
function loadSuccess(data) {
    var rows = data.rows;
    for(var i=0;i<rows.length;i++){
        var result = rows[i];
        $.easyui.tooltip.init($("img[src='"+result.headImage+"']"), {
            position: "left",
            content: "<div style=\"width:500px;height:400px;\"><img src='"+result.headImage+"'  /></div>"
        });
    }
}

小结
这样,我们将鼠标移到到小图范围中,就能够展示大图了,放大镜的功能就是这样子简单,
首先,导入依赖的js文件,然后在数据表格DataGrid属性中添onLoadSuccess:loadSuccess事件方法,最后在js代码区编写代码.就能实现该放大镜功能了!