`

JQuery 随鼠标滚动条滚动的div

jQueryCSSJavaScriptXHTMLHTML 
阅读更多 
<!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=gb2312" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery.js"></script>
<script>
	function hideD(){ 
		var winNode = $("#float-move-div"); 
		winNode.fadeOut("slow");
	}
</script>
<script>
$(document).ready(function(){
  $(document.body).append('<div id="float-move-div" onClick="hideD()">这是一个跟随鼠标移动的层(点击关闭它)</div>');
  $('#float-move-div').css({
  width:300,
  height:300,
  border:'1px solid red',
  background:'#cc3300',
  position: 'absolute',
  top:200,
  left:200
  });
  $(window).scroll(function(){
  $('#float-move-div').css({
  top:$(this).scrollTop()+$(this).height()-500
  });
});
});
</script>
</body>
</html>

 

  • aa.rar (687 Bytes)
  • 下载次数: 233
分享到：
| js 随鼠标滚动条滚动的div
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    Div滚动条随鼠标滚动Jquery版（转）

    Div滚动条随鼠标滚动Jquery版（转）Div滚动条随鼠标滚动Jquery版（转）

    利用div+jquery自定义滚动条

    "利用div+jquery自定义滚动条"这个主题就是关于如何通过HTML的div元素和jQuery库来实现这一目标的。下面我们将深入探讨这个知识点。 首先，`div`是HTML中的一个常用块级元素，它用于组织页面内容。在这里，`div`...

    Div滚动条随鼠标滚动js版（由网友JQuery版改写而成）

    该方案最初基于jQuery实现，经过修改后适用于纯JavaScript环境，解决了在IE8浏览器下由于`onSelectStart="return false"`或者`onfocus()`事件处理导致的`div`内滚动条无法滚动的问题。 首先，让我们深入理解这个...

    jQuery支持鼠标滚动的时间轴

    通过以上知识点的学习和实践，我们可以创建出一个互动性强、用户体验优良的jQuery鼠标滚动时间轴。这个特性对于新闻网站、历史回顾或项目进度展示等场景特别有用，能够吸引用户更深入地探索内容。在实际开发中，还...

    鼠标滚动div内容

    在网页设计中，"鼠标滚动div内容"是一种常见的交互效果，它允许用户通过鼠标滚轮在特定的div区域内浏览上下内容。这种效果通常利用JavaScript（JS）实现，以增强用户体验，尤其是在内容丰富的页面中。接下来，我们将...

    jQuery+mousescroll.js自定义美化div滚动条插件

    "jQuery+mousescroll.js自定义美化div滚动条插件"就是这样一个工具，它旨在将传统的浏览器滚动条转变为更加符合现代审美且交互友好的元素。这款插件允许开发者轻松地自定义滚动条样式，使其与网站的设计风格保持一致...

    jQuery鼠标滚轮滚动条代码.zip

    本资源“jQuery鼠标滚轮滚动条代码.zip”显然包含了一段用于处理页面滚动条与鼠标滚轮交互的代码。这个功能在现代网页设计中至关重要，因为它允许用户通过鼠标滚轮轻松浏览长页面内容。 首先，我们需要理解CSS...

    jquery自定义滚动条插件

    **jQuery自定义滚动条插件**是一种用于增强网页滚动体验的工具，尤其在现代Web设计中，为了提供更美观和个性化的界面，自定义滚动条变得越来越重要。本插件适用于IE8及以上的浏览器，允许开发者对滚动条的外观和行为...

    jquery监听鼠标滚轮事件+js监听滚轮事件

    在网页开发中，用户与页面交互的一个重要方式是使用鼠标滚轮进行滚动操作。为了捕捉这一行为并根据需要做出响应，开发者通常会使用JavaScript或jQuery来监听滚轮事件。本篇将详细介绍如何使用jQuery和原生JavaScript...

    jQuery自定义美化滚动条

    这款jQuery自定义滚动条的功能和原始的差不多，遗憾的是，这款自定义滚动条不支持鼠标滚动。 接下来我们来分析一下实现这款自定滚动条的方法以及源代码，代码主要由HTML、CSS以及jQuery组成，先来看看HTML代码。 ...

    57、Jquery鼠标滚动事件动画

    本知识点将深入探讨如何利用jQuery实现鼠标滚动事件的动画效果。首先，我们来理解什么是鼠标滚动事件。 鼠标滚动事件是用户操作浏览器时触发的一种事件，通常发生在用户滚动页面时。在jQuery中，我们可以使用`$...

    jquery监听DIV的事件

    除了基本的点击事件，jQuery还支持许多其他类型的事件，比如`mouseover`（鼠标悬停）、`mouseout`（鼠标离开）、`keydown`（键盘按键按下）、`keyup`（键盘按键释放）等。对于监听DIV的变化，我们可以关注以下几种...

    jQuery鼠标滚动页面数字动画特效.zip

    《jQuery鼠标滚动页面数字动画特效详解》 在网页设计中，动态效果往往能吸引用户的注意力，提高用户体验。本文将深入探讨“jQuery鼠标滚动页面数字动画特效”，这是一种利用jQuery和countup.js库创建的互动效果，当...

    jQuery鼠标滚动全屏切换预览特效

    《jQuery鼠标滚动全屏切换预览特效》 在网页设计中，吸引用户的注意力并提供流畅的用户体验至关重要。jQuery作为一种强大的JavaScript库，为开发者提供了丰富的工具和功能，使得创建动态、交互性极强的网页效果变得...

    div不随滚动条的滚动而动 可以兼容到IE6

    总的来说，实现"div不随滚动条的滚动而动"的关键在于使用JavaScript（在这里可能是jQuery）来模拟`fixed`定位，尤其是在不支持此属性的老版浏览器中。通过深入理解`position`属性、滚动事件监听和JavaScript的动态...

    jquery.mCustomScrollbar自定义滚动条插件

    1. **样式定制**：通过CSS，你可以自由地调整滚动条的大小、颜色、形状以及鼠标悬浮时的状态，使其与网站的设计风格相融合。 2. **动画效果**：插件支持平滑滚动，使页面滚动更自然流畅，增加用户体验。 3. **实时...

    jQuery实现列表自动滚动循环滚动展示新闻

    3. jQuery实现滚动功能：首先在jQuery的$(function() {})内定义局部变量$this来引用新闻滚动容器的jQuery对象。然后通过$.hover()方法为容器添加鼠标悬停事件，当鼠标悬停时调用 clearInterval() 来清除滚动定时器，...

    jquery滚动条美化插件

    **jQuery滚动条美化插件详解** 在网页设计中，滚动条虽然通常是被忽视的一部分，但它的外观和用户体验息息相关。一个精致的滚动条可以提升整个页面的质感，使用户在浏览时更加舒适。"jQuery滚动条美化插件"就是这样...

    JQUERY多方向滚动

    pauseOnHover: true // 鼠标悬停时暂停滚动 }); }); ``` 5. **自定义滚动效果**：`jquery.marquee.js`提供了丰富的选项来自定义滚动行为，如设置速度、延迟、是否允许反向滚动等，可以根据实际需求进行配置。 **...

Magicbox
Global site tag (gtag.js) - Google Analytics