<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<style>
body {
margin: 0;
padding: 0;
overflow-y: auto;
}
#leftDiv{
width: 300px;
height: 500px;
border: 1px red solid;
border-right: none;
float: left;
}
#splitDiv{
float: left;
width: 1px;
height: 500px;
border-left: 1px blue solid;
}
#rightDiv{
margin: 0px;
height: 500px;
border: 1px solid gray;
}
</style>
<script src="jquery-1.7.1.js"></script>
<script>
$(function () {
$("#splitDiv").mouseover(function(e) {
$(this).css("cursor", "e-resize");
});
$("#splitDiv").mousedown(function(e) {
$(this).css("cursor", "e-resize");
$("body").mousemove(function (eve) {
var _x = eve.pageX;
$("#leftDiv").animate({
width: _x
}, 1);
})
});
$("body").mouseup(function(e) {
$(this).unbind("mousemove");
$(this).css("cursor", "default");
});
});
</script>
</head>
<body>
<div id="leftDiv">我是左</div>
<div id="splitDiv"></div>
<div id="rightDiv">我是右</div>
</body>
</html>
分享到：
相关推荐
`mousemove`是jQuery的事件绑定函数，用于监听鼠标移动事件；`css`则用于修改元素的样式，包括位置属性。 1. **创建HTML结构** 首先，我们需要在HTML中创建一个div，这个div就是我们的浮动层。例如： ```html ...
"jquery元素跟随鼠标移动"是一个常见的交互效果，常用于创建动态UI或者游戏中的对象追踪。在这个主题中，我们将深入探讨如何利用jQuery实现这一功能，以及涉及的相关CSS和HTML5知识点。 首先，我们需要理解HTML5的...
"jQuery鼠标悬停图片移动效果"是一个常见的交互式设计技术，它利用JavaScript库jQuery实现了一个独特的功能：当用户将鼠标指针悬停在图片上时，图片会在边界内自动左右滚动，同时在底部显示半透明的文字说明。...
cursor: "move", // 设置鼠标光标为移动手势 helper: "clone" // 在拖动时创建元素的副本 }); }); ``` 为了实现排序功能，我们需要监听`drop`事件，并处理元素的位置变化。同时，还要阻止默认的浏览器行为： ``...
【jQuery磁性透明图层跟随鼠标移动图片特效】是一种网页交互设计技术，它利用JavaScript库jQuery来实现一种动态效果：当用户在网页上移动鼠标时，一个透明的图层会像具有磁性一样紧随鼠标指针，为用户提供了一种独特...
本文将详细讲解如何利用jQuery实现鼠标划过文字时，文字左右移动的动态效果，这对于提升网页的用户体验和视觉吸引力具有重要作用。 首先，我们需要在HTML文档中设置好基础结构，创建一个包含待移动文字的元素。例如...
本篇文章将详细讲解如何利用jQuery实现鼠标移动时触发的开窗效果，这是一种常见的交互设计，可以提升用户体验。 首先，我们需要在HTML页面中引入jQuery库。这通常通过CDN（内容分发网络）链接或本地文件引用来完成...
4. **缩放功能**：实现div的缩放功能，可能需要监听`mousedown`和`mousemove`事件，并且需要计算鼠标点击的位置（作为缩放的中心点），以及每次鼠标移动时的缩放比例。这通常涉及到`scale` CSS变换，或者直接更改div...
本话题主要探讨如何利用 `div` 和 `css` 实现一个动态效果：当鼠标移动到特定`div`上时，能够改变样式并弹出一个相关信息的`div`层。 首先，我们需要创建两个`div`元素：一个作为主内容区域，另一个作为弹出层。在...
"jQuery相册封面横向跟随鼠标移动动态效果"是一种常见的交互设计，它利用jQuery库的特性，使相册封面在用户鼠标移动时能沿水平方向平滑地跟随，营造出一种动态、直观且有趣的浏览体验。下面将详细介绍这一技术实现的...
本教程将详细介绍如何利用jQuery实现“鼠标滑过图片提示图片文字信息”的功能，即当用户将鼠标悬停在图片上时，会弹出一个图文并茂的提示框，显示与图片相关的文字信息。 首先，我们需要引入jQuery库。在HTML文件的...
- `mousemove`：当鼠标移动时，根据起始位置和当前鼠标位置更新选择区域的大小和位置。 - `mouseup`：当用户释放鼠标左键时，结束选择，执行相应的处理逻辑。 4. **创建选择框**： 当`mousedown`事件触发时，...
"jquery实现缩略图边框跟随鼠标移动特效"就是一个很好的例子，它利用jQuery库为网页中的缩略图添加了交互性。jQuery是一个轻量级、功能强大的JavaScript库，简化了DOM操作、事件处理、动画制作以及Ajax交互。接下来...
鼠标移动时，计算新的宽度并更新 `DIV` 的宽度；鼠标松开时，结束调整。 ```javascript let dragging = false; let initialX; document.querySelectorAll('.draggable').forEach(column => { column....
这样当鼠标移动时可以连续调整DIV大小，在鼠标释放后解除这些事件，停止调整大小的动作。这是通过在document上添加和移除事件监听器来实现的。 需要注意的是，文档内容在描述过程中，由于扫描技术的原因，可能有...
综上所述，"鼠标移动到图片上旋转显示大图"的jQuery图片特效通过结合jQuery事件和CSS3的transform属性，实现了图片在鼠标悬停时的动态效果。通过理解这些基础知识，开发者可以轻松地在自己的项目中实现类似的效果，...
根据给定的文件信息，我们可以总结出以下关于jQuery在网页设计中的应用以及如何利用鼠标事件显示和隐藏部分内容的关键知识点： ### 1. jQuery基础概念与功能 jQuery是一种快速、简洁的JavaScript库，它极大地简化...
《jQuery UI Draggable：实现元素随鼠标移动的拖放功能》 在Web开发中，交互性和用户体验至关重要。jQuery UI库提供了一系列丰富的组件，使得开发者能够轻松实现复杂的用户界面功能，其中`Draggable`就是用于创建可...
本项目“jquery实现鼠标移动到图片上显示大图广告代码”提供了一种实现这一功能的方法，尤其适用于电商等需要突出商品细节的网站。下面我们将详细探讨这一技术的实现原理和步骤。 首先，jQuery 是一个广泛使用的 ...
// 鼠标移动时更新放大图片的位置 $this.parent().mousemove(function(e) { var offsetX = e.pageX - $this.offset().left; var offsetY = e.pageY - $this.offset().top; var ratioX = offsetX / $this.width...