/** * Draggable Background plugin for jQuery * * v1.1.0 * * Copyright (c) 2012 Kenneth Chung * * Licensed under the MIT license: * http://www.opensource.org/licenses/mit-license.php */! function($) { var $window = $(window) // Helper function to guarantee a value between low and hi unless bool is false var limit = function(low, hi, value, bool) { if (arguments.length === 3 || bool) { if (value < low) return low if (value > hi) return hi } return value } // Adds clientX and clientY properties to the jQuery's event object from touch var modifyEventForTouch = function(e) { e.clientX = e.originalEvent.touches[0].clientX e.clientY = e.originalEvent.touches[0].clientY } $.fn.backgroundDraggable = function(options) { var options = $.extend({}, $.fn.backgroundDraggable.defaults, options) return this.each(function() { var $this = $(this), $bg = $this.css('background-image'), src = $bg.match(/^url\(['"]?(.*?)['"]?\)$/i) // If no background-image css property or no src just return if (!$bg || !src) return // Get the image's width and height if bound var img = { width: 0, height: 0 } if (options.bound) { var i = new Image i.onload = function() { img.width = i.width img.height = i.height } i.src = src[1] } $this.on('mousedown.dbg touchstart.dbg', function(e) { e.preventDefault() if (e.originalEvent.touches) { modifyEventForTouch(e) } else if (e.which !== 1) { return } var x0 = e.clientX, y0 = e.clientY, pos = $this.css('background-position').match(/(-?\d+).*?\s(-?\d+)/) || [], xPos = parseInt(pos[1]) || 0, yPos = parseInt(pos[2]) || 0 $window.on('mousemove.dbg touchmove.dbg', function(e) { e.preventDefault() if (e.originalEvent.touches) { modifyEventForTouch(e) } var x = e.clientX, y = e.clientY xPos = options.axis === 'y' ? xPos : limit($this.innerWidth() - img.width, 0, xPos + x - x0, options.bound) yPos = options.axis === 'x' ? yPos : limit($this.innerHeight() - img.height, 0, yPos + y - y0, options.bound) x0 = x y0 = y $this.css('background-position', xPos + 'px ' + yPos + 'px') }) }) $window.on('mouseup.dbg touchend.dbg', function() { $window.off('mousemove.dbg touchmove.dbg') }) }) } $.fn.backgroundDraggable.defaults = { bound: true, axis: undefined } }(jQuery); $(function() { $('div').backgroundDraggable() })
div { width: 300px; height: 240px; background:url("http://placekitten.com/700/700"); border: 2px solid #aaa; font-size:14px; color:#fff; }
<div>ネコの起源は、ネズミを捕獲させる目的で飼われ始めた(狭義の)ヤマネコ(Felis silvestris)の家畜化であり、分類学上はヤマネコの1亜種とされる[1]。人によくなつくため、多くが愛玩用のペットとして飼育されており、本項ではこれについて解説する。 一方、広義の「ネコ」は、ネコ類(ネコ科動物)の一部、あるいはその全ての獣を指す包括的名称を指す。しばしば、家畜種の「イエネコ」に加えて広義のヤマネコ類を含む。特に学術用語としては、英語の「cat」と同様、トラやライオンなどといった大型種を含む全てのネコ科動物を指すことがある。 学名(ラテン語名)「Felis silvestris catus(仮名転写:フェーリス・シルウェストリス・カトゥス)」の語義は「ネコ、野生の、ネコ」である。これは、ヤマネコ「Felis silvestris」(野生のネコの意)の中の「ネコという一群」との命名意図がある。 日本では、鳴き声の語呂合わせから2月22日が猫の日とされる</div>