zoukankan      html  css  js  c++  java
  • js之图片放大

    /*
    *
    * JQUERY 之简易放大镜插件
    * Author:翅膀的初衷 4585839
    * Date:2011-11-16
    *
    demo:
    <input type="text" value="c-img.jpg" id="source" />
    <script>
    var div = '<div id="ShowBigPictureBox" style=" position:absolute; top:20px; left:250px; display:none; background-repeat:no-repeat; background-color:#fff; 500px;"></div>';
    $("body").append(div);
    $("#source").JNMagnifier({
    renderTo:"#ShowBigPictureBox"
    });
    </script>
    */
    (function ($) {
    $.fn.JNMagnifier = function (targetContainer) {

    if (targetContainer && targetContainer.renderTo) {
    if (typeof (targetContainer.renderTo) == "string") {
    targetContainer.renderTo = $(targetContainer.renderTo);
    }
    } else {
    return;
    }
    var _img_org_ = this;

    var __w = 0;
    var __h = 0;

    var __left = this.offset().left;
    var __top = this.offset().top;

    if (this.offsetParent()) {
    __left += this.offsetParent().offset().left;
    __top += this.offsetParent().offset().top;
    }

    var _move_x = 0;
    var _move_y = 0;

    var _val_w = (targetContainer.renderTo.width() / 2);
    var _val_h = (targetContainer.renderTo.height() / 2);

    _img_org_.mouseover(function () {


    targetContainer.renderTo.html('<img src="' + _img_org_.val() + '" style="position:absolute; max-100%" id="JNMagnifierrenderToImg" />');
    targetContainer.renderTo.show();
    var timer = setInterval(function () {
    __w = $("#JNMagnifierrenderToImg").width() / _img_org_.width();
    __h = $("#JNMagnifierrenderToImg").height() / _img_org_.height();
    if (__w > 0) {
    clearInterval(timer);
    }
    }, 100);
    });

    _img_org_.mouseout(function () {
    targetContainer.renderTo.hide();
    });

    _img_org_.mousemove(function (e) {
    _move_x = 0 - Math.round((document.documentElement.scrollLeft + e.clientX - __left) * __w - _val_w);
    _move_y = 0 - Math.round((document.documentElement.scrollTop + e.clientY - __top) * __h - _val_h);
    //$("#JNMagnifierrenderToImg").css({"left":_move_x + "px ","top":_move_y + "px"});
    });
    }
    })(jQuery);

  • 相关阅读:
    window计时器函数
    日期函数
    字符的方法
    五大主流浏览器与四大内核
    向一个排好序的数组中插入一个数组。
    冒泡与排序
    数组去重方法1,2,3
    有执行语句:console.log(fn2(2)[3]),补充函数,使执行结果为"hello"
    面试题:一个函数的调用 fn(2)(3)(4) 得到的结果位24; 这个函数是柯里化函数运用了闭包原理
    python中append()与extend()方法的区别
  • 原文地址:https://www.cnblogs.com/liandy0906/p/7352475.html
Copyright © 2011-2022 走看看