JQuery 随鼠标滚动条滚动的div

最新推荐文章于 2020-10-29 18:03:43 发布

iteye_137

最新推荐文章于 2020-10-29 18:03:43 发布

阅读量252

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签： jQuery CSS JavaScript XHTML HTML ViewUI

本文链接：https://blog.youkuaiyun.com/iteye_137/article/details/81819103

JavaScript 专栏收录该内容

27 篇文章

订阅专栏

本文介绍了一种使用HTML和JavaScript实现的鼠标跟随层效果。通过简单的代码，可以让一个指定的HTML元素随着鼠标的移动而移动，并且当滚动页面时，该元素会保持在屏幕上的固定位置附近。此外，还提供了一个点击关闭此浮动层的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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>