介绍 Java的特点有哪些 <李> & lt; ! DOCTYPE html>
& lt; html lang=癳n"祝辞
& lt; head>
,& lt; meta charset=癠TF-8"比;
,& lt; title> Title
,& lt; style>
身体,才能,html {
,,,宽度:100%;
,,,身高:100%;
,,,保证金:0;
,,}
# container {才能
,,,宽度:200 px;
,,,身高:200 px;
,,,填充:15 px;
,,,边界:# 00 cdcd 2 px 固体;
,,,box-sizing: border-box;
,,}
.item {才能
,,,光标:违约;
,,,宽度:100%;
,,,身高:100%;
,,,背景:# 757575;
,,}
,& lt;/style>
& lt;/head>
& lt; body id=癰ody"祝辞
& lt; div id=癱ontainer"祝辞
,& lt; div 类=癷tem"祝辞& lt;/div>
& lt;/div>
& lt; script>
,//需要调整尺寸的div
,let c =, . getelementbyid(& # 39;容器# 39;)
,//身体监听移动事件
,. getelementbyid(& # 39;身体# 39;).addEventListener (& # 39; mousemove& # 39;,,移动)
,//鼠标按下事件
,c.addEventListener (& # 39; mousedown& # 39;,,)
,//鼠标松开事件
,. getelementbyid(& # 39;身体# 39;).addEventListener (& # 39; mouseup # 39;,,)
,//是否开启尺寸修改
,let resizeable =false
,//鼠标按下时的坐标,并在修改尺寸时保存上一个鼠标的位置
,let clientX clientY
,//div可修改的最小宽高
,let minW =, 8日,minH =8
,//鼠标按下时的位置,使用n, s, w e表示
,let direc =, & # 39; & # 39;
,//鼠标松开时结束尺寸修改
,function (), {
resizeable 才能=false
,}
,//鼠标按下时开启尺寸修改
下来,function (e), {
let 才能;d =, getDirection (e)//才能,当位置为四个边和四个角时才开启尺寸修改
if 才能;(d !==, & # 39; & # 39;), {
,,resizeable =,真的
,,direc =d
,,clientX =e.clientX
,,clientY =e.clientY
,,}
,}
,//鼠标移动事件
,function 移动(e), {
let 才能;d =, getDirection (e)
let 才能;游标
if 才能;(d ===, & # 39; & # 39;), cursor =, & # 39;默认# 39;;
else 才能;cursor =, d +, & # 39; -resize& # 39;;//,才能修改鼠标显示效果
c.style.cursor 才能=,光标;//才能,当开启尺寸修改时,鼠标移动会修改div尺寸
if 才能;(resizeable), {
,,//,鼠标按下的位置在右边,修改宽度
,,if (direc.indexOf (& # 39; e # 39;), !==, 1), {
,,,c.style.width =, Math.max (minW, c.offsetWidth +, (e.clientX 作用;clientX)), +, & # 39; px # 39;
,,,clientX =e.clientX
,,}
,,//,鼠标按下的位置在上部,修改高度
,,if (direc.indexOf (& # 39; n # 39;), !==, 1), {
,,,c.style.height =, Math.max(明,c.offsetHeight +, (clientY 作用;e.clientY)), +, & # 39; px # 39;
,,,clientY =e.clientY
,,}
,,//,鼠标按下的位置在底部,修改高度
,,if (direc.indexOf (& # 39; & # 39;), !==, 1), {
,,,c.style.height =, Math.max(明,c.offsetHeight +, (e.clientY 作用;clientY)), +, & # 39; px # 39;
,,,clientY =e.clientY
,,}
,,//,鼠标按下的位置在左边,修改宽度
,,if (direc.indexOf (& # 39; w # 39;), !==, 1), {
,,,c.style.width =, Math.max (minW, c.offsetWidth +, (clientX 作用;e.clientX)), +, & # 39; px # 39;
,,,clientX =e.clientX
,,}
,,}
,}
,//获取鼠标所在div的位置
,function getDirection (ev), {
let 才能,xP, yP,,抵消,,dir;
时间=dir 才能;& # 39;& # 39;;
时间=xP 才能;ev.offsetX;
时间=yP 才能;ev.offsetY;
时间=offset 才能;10;
null
null
null
null
null
null
null
null
null
null
本篇文章为大家展示了利用JavaScript怎么实现一个拖拽鼠标调整div大小的功能,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。
Java的特点有哪些 1. java语言作为静态面向对象编程语言的代表,实现了面向对象理论,允许程序员以优雅的思维方式进行复杂的编程。 2. java具有简单性,面向对象,分布式、安全性,平台独立与可移植性,动态性等特点。 3.使用Java可以编写桌面应用程序,网络应用程序,分布式系统和嵌入式系统应用程序等。
<>强实现思路:
根据鼠标位置改变鼠标样式
<李>当鼠标在div的边缘和四个角时显示不同的样式,通过游标修改
<李>当鼠标在div的边缘和四个角按下时记录具体坐标点位置,并开始根据鼠标的移动修改div的尺寸
<李>鼠标松开时结束尺寸修改
<强>代码实现:
