jQuery实现右下角可缩放大小的层完整实例
本文实例讲述了jQuery实现右下角可缩放大小的层。分享给大家供大家参考，具体如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>大小可缩放层测试</title>
<script type = "text/javascript" src="jquery-1.7.2.js"></script>
<style type = "text/css">
#fa{
border:1px solid blue;
overflow:auto;
width:400px;
height:400px;
}
#main{
margin:0;
padding:0;
width:300px;
height:280px;
border:1px solid red;
}
</style>
<script type = "text/javascript">
$(function(){
var div = getObj("main");
div.onmousemove = function(e){
var e = e || window.event;
var posx = e.clientX;
var posy = e.clientY;
var l = div.offsetLeft;
var t = div.offsetTop;
var h = div.clientHeight;
var w = div.clientWidth;
var ol = l+w-10;
var or = l+w+10;
var ot = t+h-10;
var ob = t+h+10;
this.style.cursor = "";
if(posx>ol && posx<or && posy >ot && posy<ob){
div.style.cursor = "nw-resize";
}
}
div.onmousedown = function(e){
var e = e || window.event;
var initX = e.clientX;
var initY = e.clientY;
var l = div.offsetLeft;
var t = div.offsetTop;
var h = div.clientHeight;
var w = div.clientWidth;
var ol = l+w-10;
var or = l+w+10;
var ot = t+h-10;
var ob = t+h+10;
if(initX>ol && initX<or && initY >ot && initY<ob){
document.onmousemove = function(evt){
var e = evt || window.event;
var currX = e.clientX;
var currY = e.clientY;
div.style.width = w + (currX - initX)+"px";
div.style.height = h+(currY-initY)+"px";
}
document.onmouseup = function(){
document.onmousemove = null;
document.onmouseup = null;
}
}
}
});
function getObj(id){
return document.getElementById(id);
}
</script>
</head>
<body>
<div id = "fa">
<div id = "main"></div>
</div>
</body>
</html>
函数封装后：
function resize(div){
div.mousemove(function(e){
var e = e || window.event;
var posx = e.clientX;
var posy = e.clientY;
var l = div.offset().left;
var t = div.offset().top;
var h = div.height();
var w = div.width();
var ol = l+w-10;
var or = l+w+10;
var ot = t+h-10;
var ob = t+h+10;
$(this).css("cursor","");
if(posx>ol && posx<or && posy >ot && posy<ob){
$(this).css("cursor","nw-resize");
}
});
div.mousedown(function(e){
var e = e || window.event;
var posx = e.clientX;
var posy = e.clientY;
var l = div.offset().left;
var t = div.offset().top;
var h = div.height();
var w = div.width();
var ol = l+w-10;
var or = l+w+10;
var ot = t+h-10;
var ob = t+h+10;
if(posx>=ol && posx<=or && posy >=ot && posy<=ob){
document.onmousemove = function(e){
var e = e || window.event;
var currX = e.clientX;
var currY = e.clientY;
div.width(w + (currX - posx));
div.height(h+(currY-posy));
}
$(document).mouseup(function(){
document.onmousemove = null;
});
}
});
}
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery表格(table)操作技巧汇总》、《jQuery常用插件及用法总结》、《jquery中Ajax用法总结》、《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
相关推荐
-
基于jQuery的网页右下角弹出广告(IE7,firefox)
演示代码: 测试 .divCss{ bottom:0; display:block; height:25px; overflow:hidden; padding:0; position:fixed; right:20px; } .contentCss{ background:#666; height:200px; width:200px; } .contentCssHeight{ } .titleCss{ width:200px; height:25px; line-height:25px; t
-
jquery右下角弹出提示框示例代码
复制代码 代码如下: <!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=&qu
-
jQuery实现的网页右下角tab样式在线客服效果代码
本文实例讲述了jQuery实现的网页右下角tab样式在线客服效果代码.分享给大家供大家参考,具体如下: 这是一款网页右下角tab样式的在线客服代码,若在火狐或chrome浏览器下,客服是带边框阴影的,IE8下好像没边框效果,整体不如在Chrome.火狐.Opera浏览器下.这款在线客服代码的底部使用了TAB选项卡的样式,鼠标点击可切换客服的内容,还是挺新颖的. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-right-buttom
-
jQuery实现的右下角广告窗体跟随效果示例
本文实例讲述了jQuery实现的右下角广告窗体跟随效果.分享给大家供大家参考.具体如下: <!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"> &l
-
基于jQuery的message插件实现右下角弹出消息框
1.$.messager.lays(width, height); 该方法主要用来定义弹出窗口的宽度和高度. 2.$.messager.anim(type,speed); 该方法主要定义窗口以什么样的方式和速度呈现. $.messager.anim("fade",1000); //以fadeIn的动画方式显示 $.messager.anim("show",1000); //以show的动画方式显示 3.$.messager.show(title,text,time)
-
jQuery 右下角滑动弹出可关闭重现层完整代码
效果图: 完整代码如下: jquery右下角滑动弹出可关闭重现层 博客园 计划 教程 *{ margin:0px; padding:0px;} #jihuaslide{ width:300px; height:200px; border:1px solid #000; position:fixed; bottom:2px; right:2px; display:none; background-color:White;} #jihuaslide a{ position:absolute; top
-
jquery实现浮动在网页右下角的彩票开奖公告窗口代码
本文实例讲述了jquery实现浮动在网页右下角的彩票开奖公告窗口.分享给大家供大家参考.具体如下: 这是一个浮动在网页右下角的彩票开奖公告窗口,完全可当作一个右下角广告的代码来使用,而且效果中加入了简洁的动画功能,浮动窗口是从下往上滑出的,避免单调:另外本浮动窗口带有"关闭"功能,用户可以关闭它. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-right-buttom-alert-dlg-codes/ 具体代码如下: &
-
Jquery右下角抖动、浮动 实例代码(兼容ie6、FF)
复制代码 代码如下: setTimeout("document.getElementById('qq_dd').style.display='block'; ",5000);// JavaScript Document$(function(){ if($.browser.msie&&$.browser.version=="6.0"&&$("html")[0].scrollHeight>$("h
-
JQUERY实现网页右下角固定位置展开关闭特效的方法
本文实例讲述了JQUERY实现网页右下角固定位置展开关闭特效的方法.分享给大家供大家参考.具体如下: html代码: <div class="tagbox"> <div class="tag"> <span>热门标签...</span> <ul> <li><a href='/tag/js展开收起_1.html' target="_blank">js展开收起<
-
jquery右下角自动弹出可关闭的广告层
右下角弹出层后,会在一定时间后自动隐藏. html代码: <!DOCTYPE HTML> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>jquery右下角自动弹出关闭层</title><base target="_blank"/> <scrip