JSFiddle - React, Tailwind, and code Playground
HTML
<img id='foo' src='http://placekitten.com/2000/1000' width='500' height='250'>
JavaScript
// Wheelzoom 1.1
// (c) 2012 jacklmoore.com | license: www.opensource.org/licenses/mit-license.php
!function($){
var transparentPNG = "dao
var wheel;
if ( document.onmousewheel !== undefined ) { // Webkit/Opera/IE
wheel = 'onmousewheel';
}
else if ( document.onwheel !== undefined) { // FireFox 17+
wheel = 'onwheel';
}
$.fn.wheelzoom = function(options){
var settings = $.extend({}, defaults, options);
if (!this[0] || !wheel || !('backgroundSize' in this[0].style)) { // IE8-
return this;
}
return this.each(function(){
var img = this;
var $img = $(img);
function loaded() {
var width = $img.width();
var height = $img.height();
var bgWidth = width;
var bgHeight = height;
var bgPosX = 0;
var bgPosY = 0;
var offsetBorderX = parseInt($img.css('border-left-width'),10);
var offsetBorderY = parseInt($img.css('border-top-width'),10);
var offsetPaddingX = parseInt($img.css('padding-left'),10);
var offsetPaddingY = parseInt($img.css('padding-top'),10);
$img.css({
background: "url("+img.src+") 0 0 no-repeat",
backgroundSize: width+'px '+height+'px',
backgroundPosition: offsetPaddingX+'px '+offsetPaddingY+'px'
});
function updateBgStyle() {
if (bgPosX > 0) {
bgPosX = 0;
} else if (bgPosX < width - bgWidth) {
bgPosX = width - bgWidth;
}
if (bgPosY > 0) {
bgPosY = 0;
} else if (bgPosY < height - bgHeight) {
bgPosY = height - bgHeight;
}
...