基于jq放大镜的原型扩展

传入参数图片源地址及放大倍数

//创建节点
$.fn.scale = function(json) {//json.src json.scale
    $(this).html("");
    var width = $(this).width();
    var height = $(this).height();
    //创建图片
    var img = $("<img>");
    $(this).append(img);
    img.css({
            "width": width,
            "height": height
        }).attr("src", json.src)
        //创建图片滤镜
    var div = $("<div>");
    $(this).append(div);
    div.addClass("imgZoom").css({
        "width": width / json.scale,
        "height": height / json.scale,
        "backgroundColor": "rgba(0,0,0,0.2)",
        "position": "absolute"
    }).hide();
    //创建大图显示区域;
    //创建图片滤镜
    var div = $("<div>");
    $(this).append(div);
    div.addClass("imgBigWrap").css({
        "width": width,
        "height": height,
        "position": "absolute",
        "overflow": "hidden",
        "top": 0,
        "left": width
    }).hide();

    //创建大图
    var img = $("<img>");
    div.append(img);
    img.addClass("imgBig").css({
        "width": width * json.scale,
        "height": height * json.scale,
        "position": "absolute",
    }).attr("src", json.src)

    $(this).mousemove(function(e) { //绑定事件
        //创建移动事件
        var evt = window.event || e;
        $(".imgZoom").show();
        $(".imgBigWrap").show();
        var x = evt.clientX - $(this).offset().left - $(".imgZoom").width() / 2;
        var y = evt.clientY - $(this).offset().top - $(".imgZoom").height() / 2;
        $(".imgZoom").css({
            "left": Math.max(Math.min(x, width - $(".imgZoom").width()), 0),
            "top": Math.max(Math.min(y, height - $(".imgZoom").height()), 0)
        });
        $(".imgBig").css({
            "left": -$(".imgZoom").position().left * json.scale,
            "top": -$(".imgZoom").position().top * json.scale
        })
    })
    $(this).mouseout(function() {
        $(".imgZoom").hide();
        $(".imgBigWrap").hide();
    })
}
时间: 2024-11-03 01:34:59

基于jq放大镜的原型扩展的相关文章

基于内置类的原型扩展方法

<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>基于内置类的原型扩展方法</title></head><body><script type="text/javascript"> var ary = [12, 23, 34, 12, 23, 34, 12, 23, 34, 12, 23, 34,

基于log4net的日志组件扩展分装,实现自动记录交互日志 XYH.Log4Net.Extend

背景: 随着公司的项目不断的完善,功能越来越复杂,服务也越来越多(微服务),公司迫切需要对整个系统的每一个程序的运行情况进行监控,并且能够实现对自动记录不同服务间的程序调用的交互日志,以及通一个服务或者项目中某一次执行情况的跟踪监控 根据log4net的现有功能满足不了实际需求,所以需要以log4net为基础进行分装完善,现在分装出了一个基础的版本,如有不妥之处,多多指点功能简介: 该组件是在log4net的基础上,进行了一定的扩展封装实现的自动记录交互日志功能 该组件的封装的目的是解决一下几个

基于jq流畅度非常好的图片左右切换焦点图

今天给大家分享一款基于jq流畅度非常好的图片左右切换焦点图.这是一款基于jQuery实现的支持鼠标拖动切换jQuery特效下载.效果图如下: 在线预览   源码下载 实现的代码. html代码: <svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="filters hidden"> <defs> <filter id="blur"

如何基于Python构建一个可扩展的运维自动化平台

嘉宾简介 刘天斯 从事互联网运维工作已13年,目前就职于腾讯-互动娱乐部,负责游戏大数据的运营,曾就职于天涯社区,担任首席架构师/系统管理员. 热衷开源技术的研究,包括系统架构.运维开发.负载均衡.缓存技术.数据库.NOSQL.分布式存储.消息中间件.大数据及云计算.Mesos.Docker.DevOps等领域.擅长大规模集群的运维工作,尤其在自动化运维方面有着非常丰富的经验.同时热衷于互联网前沿技术的研究,活跃在国内社区.业界技术大会,充当一名开源技术的传播与分享者. 导言 受 Reboot

javascript学习笔记10(基于组合与动态原型创建对象)

基于组合与动态原型创建对象 方法一:在外部设置prototype <script type="text/javascript">/** * 为了解决原型所带来的问题,此处需要通过组合构造函数和原型来实现对象的创建 * 将属性在构造函数中定义,将方法在原型中定义 * 这种有效集合了两者的优点,是目前最为常用的一种方式 */    function Person(name,age,friends){        //属性在构造函数中定义        this.name =

Firefox 浏览器的DOM原型扩展

我不想挑起IE与Firefox之间的争论,我只想说说Firefox浏览器有而IE里没有的一个功能,对DOM里的对象原型的扩展. 在DOM里的window.document.element.event等这些对象在Firefox(或者说Mozilla核心的浏览器)里都有与之对应的原型:Window.HTMLDocument.HTMLElement.Event等,对于这些原型扩展之后,那些window.document等对象就“自动”拥有某些成员属性或者成员方法了.举个简单的例子,比如在IE里都有一个

?Postgres-XL:基于PostgreSQL的开源可扩展数据库集群

?Postgres-XL:基于PostgreSQL的开源可扩展数据库集群 最近这一年业界去"IOE"越叫越响,很多传统企业也把去"IOE"计划摆上了桌面.我老是想不明白这些非互联网企业(比如:银行)做这种事的动力何在? 高大上的"自主可控"."振兴民族科技"等空洞口号先不去管,真正的动力在哪里? "安全"."成本"."互联网架构".......等等.等等, 唯一看起来

基于jQ+CSS3页面滚动内容元素动画特效

今天给大家分享一款基于jQ+CSS3页面滚动内容元素动画特效.这是一款基于jQuery+CSS3实现的页面滚动代码.该实例适用于适用浏览器:360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗. 不支持IE8及以下浏览器. 在线预览   源码下载 实现的代码. html代码: <div class="htmleaf-container"> <div class="container"> <h2 class

基于JQ的自定义弹窗组件

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>基于JQ的自定义弹窗组件</title> <link rel="stylesheet" href="css/reset.css"> <link rel="stylesheet" h