Question

请帮我重写jquery 1.9库的js代码。在我使用1.4之前。 icture。试图在一个页面中使用2个库，没有冲突。没有结果。

jQuery.noConflict()

var ddpowerzoomer={
    dsetting: {defaultpower:2, powerrange:[2,7], magnifiersize:[75, 75]},
    mousewheelevt: (/Firefox/i.test(navigator.userAgent))? "DOMMouseScroll" : "mousewheel", //FF doesn't recognize mousewheel as of FF3.x
    $magnifier: {outer:null, inner:null, image:null},
    activeimage: null,

    movemagnifier:function(e, moveBol, zoomdir){
        var activeimage=ddpowerzoomer.activeimage //get image mouse is currently over
        var activeimginfo=activeimage.info
        var coords=activeimginfo.coords //get offset coordinates of image relative to upper left corner of page
        var $magnifier=ddpowerzoomer.$magnifier
        var magdimensions=activeimginfo.magdimensions //get dimensions of magnifier
        var power=activeimginfo.power.current
        var powerrange=activeimginfo.power.range
        var x=e.pageX-coords.left //get x coords of mouse within image (where top corner of image is 0)
        var y=e.pageY-coords.top
        if (moveBol==true){
            if (e.pageX>=coords.left && e.pageX<=coords.right && e.pageY>=coords.top && e.pageY<=coords.bottom)  //if mouse is within currently within boundaries of active base image
                $magnifier.outer.css({left:e.pageX-magdimensions[0]/2, top:e.pageY-magdimensions[1]/2}) //move magnifier so it follows the cursor
            else{ //if mouse is outside base image
                ddpowerzoomer.activeimage=null
                $magnifier.outer.hide() //hide magnifier
            }
        }
        else if (zoomdir){ //if zoom in
            var od=activeimginfo.dimensions //get dimensions of image
            var newpower=(zoomdir=="in")? Math.min(power+1, powerrange[1]) : Math.max(power-1, powerrange[0]) //get new power from zooming in or out
            var nd=[od[0]*newpower, od[1]*newpower] //calculate dimensions of new enlarged image within magnifier
            $magnifier.image.css({width:nd[0], height:nd[1]})
            activeimginfo.power.current=newpower //set current power to new power after magnification
        }
        power=activeimginfo.power.current //get current power
        var newx=-x*power+magdimensions[0]/2 //calculate x coord to move enlarged image
        var newy=-y*power+magdimensions[1]/2
        $magnifier.inner.css({left:newx, top:newy}) //move image wrapper within magnifier so the correct image area is shown
    },

    setupimage:function($, imgref, options){
        var s=jQuery.extend({}, ddpowerzoomer.dsetting, options)
        var $imgref=$(imgref)
        imgref.info={ //create object to remember various info regarding image 
            power: {current:s.defaultpower, range:s.powerrange},
            magdimensions: s.magnifiersize,
            dimensions: [$imgref.width(), $imgref.height()],
            coords: null
        }
        $imgref.unbind('mouseenter').mouseenter(function(e){ //mouseenter event over base image
            var $magnifier=ddpowerzoomer.$magnifier
            $magnifier.outer.css({width:s.magnifiersize[0], height:s.magnifiersize[1]}) //set magnifier's size
            var offset=$imgref.offset() //get image offset from document
            var power=imgref.info.power.current
            $magnifier.inner.html('<img src="'+options.largeimagesrc+'"/>') //get base image's src and create new image inside magnifier based on it
            $magnifier.image=$magnifier.outer.find('img:first')
                .css({width:imgref.info.dimensions[0]*power, height:imgref.info.dimensions[1]*power}) //set size of enlarged image
            var coords={left:offset.left, top:offset.top, right:offset.left+imgref.info.dimensions[0], bottom:offset.top+imgref.info.dimensions[1]}
            imgref.info.coords=coords //remember left, right, and bottom right coordinates of image relative to doc
            $magnifier.outer.show()
            ddpowerzoomer.activeimage=imgref
        })
    },


    init:function($){
        var $magnifier=$('<div style="position:absolute;width:100px;height:100px;display:none;overflow:hidden;border:1px solid black;" />')
            .append('<div style="position:relative;left:0;top:0;" />')
            .appendTo(document.body) //create magnifier container and add to doc
        ddpowerzoomer.$magnifier={outer:$magnifier, inner:$magnifier.find('div:eq(0)'), image:null} //reference and remember various parts of magnifier
        $magnifier=ddpowerzoomer.$magnifier
        $(document).unbind('mousemove.trackmagnifier').bind('mousemove.trackmagnifier', function(e){ //bind mousemove event to doc
            if (ddpowerzoomer.activeimage){ //if mouse is currently over a magnifying image
                ddpowerzoomer.movemagnifier(e, true) //move magnifier
            }
        }) //end document.mousemove

        $magnifier.outer.bind(ddpowerzoomer.mousewheelevt, function(e){ //bind mousewheel event to magnifier
            if (ddpowerzoomer.activeimage){
                var delta=e.detail? e.detail*(-120) : e.wheelDelta //delta returns +120 when wheel is scrolled up, -120 when scrolled down
                if (delta<=-120){ //zoom out
                    ddpowerzoomer.movemagnifier(e, false, "out")
                }
                else{ //zoom in
                    ddpowerzoomer.movemagnifier(e, false, "in")
                }
                e.preventDefault()
            }
        })
    }
} //ddpowerzoomer

jQuery.fn.addpowerzoom=function(options){
    var $=jQuery
    return this.each(function(){ //return jQuery obj
        if (this.tagName!="IMG")
            return true //skip to next matched element
        if (typeof options=="undefined")
            options={}
        if (options.largeimage && options.largeimage.length>0){ //preload large image?
            options.preloadimg=new Image()
            options.preloadimg.src=options.largeimage
        }
        var $imgref=$(this)
        options.largeimagesrc=(options.preloadimg)? options.preloadimg.src : $imgref.attr('src')
        if (parseInt(this.style.width)>0 && parseInt(this.style.height)>0) //if image has explicit CSS width/height defined
            ddpowerzoomer.setupimage($, this, options)
        else if (this.complete){ //account for IE not firing image.onload
            ddpowerzoomer.setupimage($, this, options)
        }
        else{
            $imgref.bind('load', function(){
                ddpowerzoomer.setupimage($, this, options)
            })
        }
    })
}

jQuery(document).ready(function($){ //initialize power zoomer on DOM load
    ddpowerzoomer.init($)
})

尝试在一个页面中使用2个库，其中包含noConflict但没有结果。所有其他脚本使用1.9库

Answer 1

<script src="jquery.1.4.js"></script>
<script>
    var $14 = window.jQuery;
</script>

<script src="jquery.1.9.1.js"></script>
<script>
    var $ = window.jQuery;
</script>

<script>
    // Code with 1.4
    console.log( $14('body').html() );

    // Code with 1.9.1
    console.log( $('body').html() );
<script>

Answer 2

您可以使用 jQuery Migrate插件来指导您。这是：Downloading jQuery 只需将其包含在浏览器控制台中以查看警告，错误...... 包含未压缩的 jQuery Migrate插件。压缩后我在Liferay中遇到了问题。

Answer 3

如果你从旧版本升级到jQuery 1.9，你需要知道的最重要的事情是在1.9中删除了一大堆旧功能。

这些功能在之前的版本中已经被弃用，因此暂时不推荐使用它们，但它们被保留以帮助向后兼容。

如果您的代码仍在使用这些功能，则有三种选择：

降级回jQuery 1.8。
修改代码以使用正确的技术，而不是使用已弃用的功能。
下载jQuery开发者与jQuery 1.9同时发布的migration library。该库包含从主jQuery库中删除的所有旧代码，因此使其与使用不推荐使用的功能的代码再次兼容。

这可能是短期内为您提供最佳解决方案，让您恢复正常运行，但从长远来看，您应该考虑修复代码（即上面的第2点）。

如何重写jquery 1.9的代码

3 个答案: