<!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 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...
标题中的“Jquery实现鼠标移动放大图片功能实例”是指使用jQuery库来实现在网页中，当用户鼠标移动到图片上时，图片会自动放大的功能。这种效果常见于电子商务网站的商品展示，能提供更好的视觉体验，使用户可以更...