JQ鼠标移入显示大图

说明:这次分享的显示大图功能,强大之处是经过小鱼改造可适用图片在各种位置,自动根据位置在左上,右上,左下,右下显示,默认为右下显示。
第二点的优势是简易的配置图片大小,图片相对鼠标的位置。
第三点是此方法经实践能够适用各种业务系统,无需修改源代码即可使用。

对应的HTML样式

<a target="_blank" href="url" href1="url.jpg" class="tooltip1" title=""><img src="url.jpg" title="sadga" width="50" height="50"></a>
//绑定显示大图
function bindBigImage() {
    $(".tooltip1").unbind();
    var x = 10;
    var y = 20;
    var size = 400;
    var minHeight = 0;      //动态变量,默认0
    var windowWidth = $(window).width();
    var windowHeight = $(window).height();
    $(".tooltip1").mouseover(function (e) {
        this.myTitle = this.title;
        this.title = "";
        var tooltip = "<div id='tooltip'><img src='" + $(this).attr('href') + "' alt='大图' width='" + size + "' style='max-width:400px;max-height:600px;' /></div>";
        $("body").append(tooltip);
        var aimHeiht = $("#tooltip").height();
        var imgWidth = windowWidth - e.pageX;
        var imgHeight = windowHeight - e.pageY;
        if (aimHeiht < size)
            minHeight = size;
        else
            minHeight = aimHeiht;
        //判断图片显示左边或右边
        if (imgWidth < size) {
            if (imgHeight < (aimHeiht + y)) {
                $("#tooltip")
                .css({
                    "top": (e.pageY - y - minHeight + imgHeight) + "px",
                    "right": (e.pageX - x - size) + "px",
                    "position": "absolute",
                    "z-index": 999
                }).show("fast");
            }
            else {
                $("#tooltip")
                .css({
                    "top": (e.pageY + y) + "px",
                    "right": (e.pageX - x - size) + "px",
                    "position": "absolute",
                    "z-index": 999
                }).show("fast");
            }
        }
        else {
            if (imgHeight < (aimHeiht + y)) {
                $("#tooltip")
                .css({
                    "top": (e.pageY - y - minHeight + imgHeight) + "px",
                    "left": (e.pageX + x) + "px",
                    "position": "absolute",
                    "z-index": 999
                }).show("fast");
            }
            else {
                $("#tooltip")
                .css({
                    "top": (e.pageY + y) + "px",
                    "left": (e.pageX + x) + "px",
                    "position": "absolute",
                    "z-index": 999
                }).show("fast");
            }
        }
    }).mouseout(function (e) {
        this.title = this.myTitle;
        $("#tooltip").remove();
    }).mousemove(function (e) {
        var aimHeiht = $("#tooltip").height();
        var imgWidth = windowWidth - e.pageX;
        var imgHeight = windowHeight - e.pageY;
        if (aimHeiht < size)
            minHeight = size;
        else
            minHeight = aimHeiht;
        if (imgWidth < size) {
            if (imgHeight < (aimHeiht + y)) {
                $("#tooltip").css({
                    "top": (e.pageY - y - minHeight + imgHeight) + "px",
                    "right": (e.pageX - x - size) + "px"
                });
            }
            else {
                $("#tooltip").css({
                    "top": (e.pageY + y) + "px",
                    "right": (e.pageX - x - size) + "px"
                });
            }
        }
        else {
            if (imgHeight < (aimHeiht + y)) {
                $("#tooltip").css({
                    "top": (e.pageY - y - minHeight + imgHeight) + "px",
                    "left": (e.pageX + x) + "px"
                });
            }
            else {
                $("#tooltip").css({
                    "top": (e.pageY + y) + "px",
                    "left": (e.pageX + x) + "px"
                });
            }
        }
    });
}
展开阅读全文

Python数据分析与挖掘

01-08
92讲视频课+16大项目实战+源码+¥800元课程礼包+讲师社群1V1答疑+社群闭门分享会=99元   为什么学习数据分析?       人工智能、大数据时代有什么技能是可以运用在各种行业的?数据分析就是。       从海量数据中获得别人看不见的信息,创业者可以通过数据分析来优化产品,营销人员可以通过数据分析改进营销策略,产品经理可以通过数据分析洞察用户习惯,金融从业者可以通过数据分析规避投资风险,程序员可以通过数据分析进一步挖掘出数据价值,它和编程一样,本质上也是一个工具,通过数据来对现实事物进行分析和识别的能力。不管你从事什么行业,掌握了数据分析能力,往往在其岗位上更有竞争力。    本课程共包含五大模块: 一、先导篇: 通过分析数据分析师的一天,让学员了解全面了解成为一个数据分析师的所有必修功法,对数据分析师不在迷惑。   二、基础篇: 围绕Python基础语法介绍、数据预处理、数据可视化以及数据分析与挖掘......这些核心技能模块展开,帮助你快速而全面的掌握和了解成为一个数据分析师的所有必修功法。   三、数据采集篇: 通过网络爬虫实战解决数据分析的必经之路:数据从何来的问题,讲解常见的爬虫套路并利用三大实战帮助学员扎实数据采集能力,避免没有数据可分析的尴尬。   四、分析工具篇: 讲解数据分析避不开的科学计算库Numpy、数据分析工具Pandas及常见可视化工具Matplotlib。   五、算法篇: 算法是数据分析的精华,课程精选10大算法,包括分类、聚类、预测3大类型,每个算法都从原理和案例两个角度学习,让你不仅能用起来,了解原理,还能知道为什么这么做。
©️2020 CSDN 皮肤主题: 深蓝海洋 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值