jQuery实现浮动层

最新推荐文章于 2017-02-28 11:58:43 发布
最新推荐文章于 2017-02-28 11:58:43 发布
阅读量927 收藏
点赞数
分类专栏： javascript 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/blogluoqi/article/details/17854371
版权 
<script type="text/javascript">
	$(document).ready(function() {
		$(".aa").hover(function() {
			$(this).mousemove(function(e) {
				$("#bb").html(e.pageY);
				var x = e.pageX;
				var y = e.pageY;
				$("#cc").html($(this).html());
				$("#cc").offset({
					top : y,
					left : x
				});
			})
		});
	})
</script>
<body>
	<div class="aa"
		style="width: 200px; height: 10px; background-color: #fff; border: 1px solid red;">
		第一个div的内容</div>
	<div class="aa"
		style="width: 200px; height: 10px; background-color: #fff; border: 1px solid red;">
		第二个div的内容</div>
	<div id="cc">hello</div>
	</form>
</body>


茶凉了就别再续了
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery实现层级显示
qq_32504001的博客
04-15 1437
数据特点：为JSON数据处理，多层级，存在父子级关系。 方法特点:递归取值 实现功能：初始展现第一级数据，点击后若有下级机构展示下级机构，点击返回可返回到上级机构 思路： 1.该功能主要分为两部分，一是进入下级机构，二是返回上级机构 2.进入下级机构 2.1 首先加载第一级，并绑定一个点击事件 2.2 当父级为第一级时，获取父级ID，循环数据，获取该级数据的children信息，清空...
jQuery实现遮罩层功能
丑小鸭变黑天鹅的博客
03-31 3551
jQuery实现遮罩层功能 我们做项目的时候，有一种效果会经常使用到，就是遮罩层，当我们点击某个按钮时，希望动态弹出一个输入块，并且想要他的背景是透明的，而要输入的块不透明，效果如下 那么这个效果怎么实现呢，阿飞给你一一道来。 思路： 我们需要一个最外层div去做透明背景，然后需要一个div去做输入块。总的来说就是这两层div。 起初我们都设置其为display:none，然后通过js代码实现，当点击的时候让其显示 大概思路就是这样，接下来直接上代码 html代码 <div class="mask"
jQuery万能浮动框插件jquery-powerFloat
10-11
jQuery万能浮动框插件，鼠标滑过触发浮动图片、文字等，挺好用的！
JQuery浮动层
zhuyu19911016520
09-19 859
1、把层的样式写好         .divFloat         {             float:right;             height: 200px;             width: 100px;             border: 1px solid blue;             top:20px;             marg
jQuery powerFloat万能浮动层下拉层插件
gdjlc的专栏
01-29 1309
插件来源：http://www.zhangxinxu.com/wordpress/?p=1328 浮动层功能很强大，用它加ajax实现了鼠标移进数据列表中的数据项时显示每项的详细内容。
jquery实现浮动层效果
weixin_30700977的博客
06-05 62
层可以随着页面滚动而滚动，说明肯定是脱离了标准流的，CSS样式表 position:absolute;因为是上下移动，所以就是要改变层的CSS样式中的top属性定位），在jquery中有一个scrollTop属性，用于获取页面滚动的高度。所以在每次页面滚动的时候，将浮动层的高度设置为 （初始值）+ scrollTop即可。但是scrollTop在ie和其他浏览器中的获...
jQuery浮动层 jQuery实现div跟着鼠标走
08-03
用jQuery实现div跟着鼠标走 鼠标移动时，层也跟着鼠标的移动而移动
jQuery实现浮动层随浏览器滚动条滚动的方法
10-23
主要介绍了jQuery实现浮动层随浏览器滚动条滚动的方法,涉及jQuery操作页面元素滚动的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
jquery实现浮动的侧栏实例
10-24
主要介绍了jquery实现浮动的侧栏,实例分析了基于jQuery的stickySidebar插件实现浮动层的相关技巧,需要的朋友可以参考下
jQuery实现的兼容性浮动层示例
10-21
本示例将详细介绍如何使用jQuery实现一个兼容性良好的浮动层，并涉及到了jQuery对页面元素的操作和属性的动态设置。 首先，我们需要理解浮动层的基本CSS样式。在示例中，我们定义了一个ID为`test`的`div`元素，设置...
jQuery精美浮动层效果
06-24
jQuery精美浮动层效果
Jquery任意位置浮动固定层【插件】
03-21
NULL 博文链接：https://0756.iteye.com/blog/963055
jquery floatmenu 浮动变化的个性菜单
05-12
内容索引:脚本资源,jQuery,浮动菜单　　jquery floatmenu 浮动变化的个性菜单，其中还包括了所用到的菜单背景文件的PSD源文件，便于大家修改。这个菜单当你反鼠标移上的时候，它会向上翘起来，当把鼠标移开的时候，它会自动恢复原位。
jquery.实现div悬浮
10-30
div悬浮实例
jQuery实现可拖动的浮动层(版本2)
weixin_34120274的博客
12-19 80
以下是使用jQuery实现可拖动的浮动层的完整代码，复制保存到html文件就可以体验效果。也可以访问以下网址体验效果：http://www.keleyi.com/keleyi/phtml/dragdiv.htm光标移动到层上，按住鼠标就可以拖动层。 &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://...
小白jquery简易实现浮动div技术
zi_wu_xian的专栏
01-28 1858
小白jquery简易实现浮动div技术 以前看过别人做的代码，太麻烦太繁琐了，故弄玄虚的封装，目的就是不让别人知道怎么做的，好像很高深似的。屁～ floattest.html  就这么几行代码 ........ 无标题文档  $(document).ready(function()   {      $("#flt").hover(function(){
jQuery 实现拖动浮动层
limengmeng9006的专栏
11-15 741
项目的很多地方都会用到弹出层。比如有一个List页面，一行一行的显示了很多的信息。大多时候，每一行都不能显示完与该条记录相关的所有信息，这时候当用户想看具体的信息时，如果有一个弹出层去显示一些详细的信息可以带来很好的用户体验，省的用户在多个页面之间来回切换，看着麻烦。 至于弹出层如何动态的获取与指定记录相关的信息，在webform里可以用jQuery + ashx技术实现，在MVC中就更简单了。
JQuery页面滚动浮动层智能定位
netuser1937的博客
02-06 1330
JQuery页面滚动浮动层智能定位
jquery简单的弹出层浮动层代码
fanwenyuan_fwy的专栏
02-28 950
 这篇文章是关于jquery简单的弹出层浮动层的内容，以下就是该内容的详细介绍。 jquery 智能弹出层，位置可以自适应，当层靠右边显示时自动往左移。初次运行时请按F5刷新，载入远程jQuery后才能看到效果，点击鼠标左键，弹出层将出现，在最右边点击时层自动往左移。 jquery弹出层浮动层代码 *{ margin:0; padding:0} body{ margin:0;
jquery实现按键浮动
最新发布
12-13
以下是使用jQuery实现按键浮动的示例代码： ```html <!DOCTYPE html> <html> <head> <title>按键浮动示例</title> <style type="text/css"> .container { position: relative; width: 500px; height: 300px; margin: 0 auto; overflow: hidden; } .slider { position: absolute; top: 0; left: 0; width: 2000px; height: 300px; } .slider img { float: left; width: 500px; height: 300px; } .btn { position: absolute; top: 50%; margin-top: -20px; width: 40px; height: 40px; background-color: rgba(0, 0, 0, 0.5); color: #fff; text-align: center; line-height: 40px; font-size: 20px; cursor: pointer; z-index: 999; } .btn-prev { left: 0; } .btn-next { right: 0; } </style> </head> <body> <div class="container"> <div class="slider"> <img src="img/1.jpg" alt=""> <img src="img/2.jpg" alt=""> <img src="img/3.jpg" alt=""> <img src="img/4.jpg" alt=""> <img src="img/5.jpg" alt=""> </div> <div class="btn btn-prev"><</div> <div class="btn btn-next">></div> </div> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script type="text/javascript"> $(function() { var slider = $('.slider'); var sliderWidth = slider.width(); var sliderImg = slider.find('img'); var sliderImgLen = sliderImg.length; var sliderTotalWidth = sliderWidth * sliderImgLen; var currentIndex = 0; var timer = null; slider.css('width', sliderTotalWidth); $('.btn-prev').click(function() { currentIndex--; if (currentIndex < 0) { currentIndex = sliderImgLen - 1; slider.css('left', -sliderWidth * (sliderImgLen - 1)); } slider.stop().animate({ left: -sliderWidth * currentIndex }, 500); }); $('.btn-next').click(function() { currentIndex++; if (currentIndex > sliderImgLen - 1) { currentIndex = 0; slider.css('left', 0); } slider.stop().animate({ left: -sliderWidth * currentIndex }, 500); }); function autoPlay() { timer = setInterval(function() { $('.btn-next').trigger('click'); }, 2000); } autoPlay(); $('.container').hover(function() { clearInterval(timer); }, function() { autoPlay(); }); }); </script> </body> </html> ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值