jquery 플러그인 jquery.dragscale.js는 요소의 크기를 드래그하고 변경하는 방법을 구현합니다(데모 소스 코드 다운로드 포함)_jquery
- WBOY원래의
- 2016-05-16 15:13:382140검색
이 문서의 예에서는 jquery 플러그인 jquery.dragscale.js가 드래그를 구현하여 요소의 크기를 변경하는 방법을 설명합니다. 참고하실 수 있도록 모든 사람과 공유하세요. 자세한 내용은 다음과 같습니다.
이 플러그인은 작성자의 js 능력을 향상시키고 플러그인을 사용할 때 일부 js 초보자에게 약간의 편의성을 제공하는 것이 목적입니다.
이 플러그인은 요소의 크기를 변경하기 위해 현재 널리 사용되는 드래그 앤 드롭 효과를 실현하도록 설계되었습니다. 실제 필요에 따라 드래그된 요소의 최소 너비와 높이, 최대 너비와 높이를 설정할 수 있습니다. 전체적인 코드는 다음과 같습니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
*{margin:0;padding:0;}
.box{position:absolute;left:100px;top:100px;border:1px solid #eee;width:150px;height:150px;padding:10px;cursor:move;}
.drag{position:absolute;bottom:3px;right:3px;display:block;width:7px;height:7px;background:url(scale.png) no-repeat}
</style>
<script type="text/javascript" src="jquery-1.7.1.js"></script>
<script type="text/javascript" src="jquery.resizable.js"></script>
</head>
<body>
<div class="box">拖拽我吧！<span class="drag"></span></div>
<script>
$(function(){
$(".drag").resizable({
minW : 150,
minH : 150,
maxW : 500,
maxH : 500,
});
})
</script>
</body>
</html>
플러그인 jquery.dragscale.js 코드:
/*
*resizable 0.1
*Dependenc jquery-1.7.1.js
*/
;(function(a){
a.fn.resizable = function(options){
var defaults = { //默认参数
minW : 150,
minH : 150,
maxW : 500,
maxH : 500,
}
var opts = a.extend(defaults, options);
this.each(function(){
var obj = a(this);
obj.mousedown(function(e){
var e = e || event; //区分IE和其他浏览器事件对象
var x = e.pageX - obj.position().left; //获取鼠标距离匹配元素的父元素左侧的距离
var y = e.pageY - obj.position().top; //获取鼠标距离匹配元素的父元素顶端的距离
$(document).mousemove(function(e){
var e = e || event;
var _x = e.pageX - x; //动态获取匹配元素距离其父元素左侧的宽度
var _y = e.pageY - y;
_x = _x < opts.minW ? opts.minW : _x; //保证匹配元素的最小宽度为150px
_x = _x > opts.maxW ? opts.maxW : _x; //保证匹配元素的最大宽度为500px
_y = _y < opts.minH ? opts.minH : _y;
_y = _y > opts.maxH ? opts.maxH : _y;
obj.parent().css({width:_x,height:_y});
}).mouseup(function(){
$(this).unbind("mousemove"); //当鼠标抬起 删除移动事件 匹配元素宽高变化停止
});
});
})
}
})(jQuery);
전체 예제 코드를 보려면 여기를 클릭하세요이 사이트에서 다운로드하세요.
더 많은 jQuery 관련 콘텐츠에 관심이 있는 독자는 이 사이트에서 "JQuery 드래그 효과 및 기술 요약", "jQuery 확장 기술 요약"과 같은 특별 주제를 확인할 수 있습니다. , "JQuery 일반 클래식 특수 효과 요약", "jQuery 애니메이션 및 특수 효과 사용 요약", "jquery 선택기 사용 요약" 및 "jQuery 공통 플러그인 및 사용법 요약》
이 기사가 jQuery 프로그래밍에 종사하는 모든 사람에게 도움이 되기를 바랍니다.
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.