jQuery实现鼠标点击弹出渐变层的方法
弹出层在实际应用中我们经常会碰到大量的弹出层效果,下面我来做一个基于jquery的简单的弹出层效果实例,各位朋友有兴趣可参考。
效果代码如下
在弹出层中下面是核心代码
<script type="text/javascript"> // 渐变弹出层 $(document).ready(function(){ var speed = 600;//动画速度 $("#race a").click(function(event){//绑定事件处理 event.stopPropagation(); var offset = $(event.target).offset();//取消事件冒泡 $("#racePop").css({ top:offset.top + $(event.target).height() + "px", left:offset.left });//设置弹出层位置 $("#racePop").show(speed);//动画显示 }); $(document).click(function(event) { $("#racePop").hide(speed) });//单击空白区域隐藏 $("#racePop").click(function(event) { $("#racePop").hide(speed) });//单击弹出层则自身隐藏 }); </script>
完整实例
<!-- 渐变弹出层 --> <div id="race"><a href="#">点击</a></div> <div id="racePop" class="raceShow">这里是弹出层效果</div> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript"> // 渐变弹出层 $(document).ready(function(){ var speed = 600;//动画速度 $("#race a").click(function(event){//绑定事件处理 event.stopPropagation(); var offset = $(event.target).offset();//取消事件冒泡 $("#racePop").css({ top:offset.top + $(event.target).height() + "px", left:offset.left });//设置弹出层位置 $("#racePop").show(speed);//动画显示 }); $(document).click(function(event) { $("#racePop").hide(speed) });//单击空白区域隐藏 $("#racePop").click(function(event) { $("#racePop").hide(speed) });//单击弹出层则自身隐藏 }); </script> <style> body{margin:0 auto;font:12px/1.5 tahoma,arial,5b8b4f53;color:#828282;background:#fff} body,h1,h2,h3,h4,h5,h6,p,ul,li,dl,dt,dd{padding:0;margin:0;} li{list-style:none;}img{border:none;}em{font-style:normal;} a{color:#555;text-decoration:none;outline:none;blr:this.onFocus=this.blur();} a:hover{color:#000;text-decoration:underline;} body{font-size:12px;font-family:Arial,Verdana, Helvetica, sans-serif;word-break:break-all;word-wrap:break-word;} .clear{height:0;overflow:hidden;clear:both;} /* 渐变弹出层 */ #race{display:block;width:200px;height:50px;line-height:50px;text-align:center;background:#CCC;border:#555 1px solid;margin:10px auto} .raceShow{background-color:#f1f1f1;border:solid 1px #ccc;position:absolute;display:none;width:300px;height:100px;padding:5px;font-size:12px;} </style>
相关推荐
-
jquery实现模拟百分比进度条渐变效果代码
本文实例讲述了jquery实现模拟百分比进度条渐变效果代码.分享给大家供大家参考,具体如下: 这里为了便于看到加载百分比,对代码进行了处理,实际使用时并不需要这样. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-mn-bfb-scroll-cha-style-demo/ 具体代码如下: <html> <head> <title>jquery模拟百分比进度条</title> <script
-
jQuery实现渐变下拉菜单的简单方法
本文实例讲述了jQuery实现渐变下拉菜单的简单方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <script type="text/javascript"> $(function(){ $("#nav li").hover(function(){if(!$(this).children("#nav li ul").is(":animated")){$(this).ch
-
jQuery实现渐变弹出层和弹出菜单的方法
本文实例讲述了jQuery实现渐变弹出层和弹出菜单的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!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/xh
-
jQuery实现的立体文字渐变效果
先截两个图看看: 效果很不错吧?会不会误以为这些字体是图片?这可不是图片,而是用JS实现的 在线演示 http://demo.jb51.net/js/gradient-test/demo.htm 下面来简单分享下实现过程及原理(网站中使用了jquery这个lib,我们这里就不再自己单独实现了,我们这里分享的也是jquery的实现方法): HTML代码: 复制代码 代码如下: <span class="rainbows">© 2009 Dragon Interactive.
-
jQuery图片渐变特效的简单实现
jQuery图片渐变特效的简单实现 (document).ready(function() {(document).ready(function() {("div.baba").mouseleave(function() { ("span.aaa").stop().animate({opacity: '1'},600); });("span.aaa").stop().animate({opacity: '1'},600); });("d
-
jQuery实现的文字hover颜色渐变效果实例
本文实例讲述了jQuery实现的文字hover颜色渐变效果.分享给大家供大家参考,具体如下: <html> <head> <script type="text/javascript" src="jquery-1.6.2.min.js"></script> <script type="text/javascript" src="jquery-ui-1.8.16.custom.min.j
-
基于jquery的direction图片渐变动画效果
还有一点就是包括滤镜的使用但是有一点必须要说明的是滤镜在firefox下不能识别看不到效果, 下面就开始我们的代码编写吧 html是比较简单的 代码 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <TITLE>myjquerydirection</TITLE> <META http-equiv
-
jQuery实现打开页面渐现效果示例
本文实例讲述了jQuery实现打开页面渐现效果的方法.分享给大家供大家参考,具体如下: 思路:把页面中所有的标签放到一个div中,然后再在最后添加一个空div标签fadeDiv,用fadeDiv遮挡body使fadeDiv渐现 <head> <title></title> <script src="jquery-1.7.2.min.js" type="text/javascript"></script> &
-
jquery实现两个图片渐变切换效果的方法
本文实例讲述了jquery实现两个图片渐变切换效果的方法.分享给大家供大家参考.具体如下: 这段代码演示了jquery如何实现两个图片渐变切换的效果,为id=kitten的div设置一个背景图片,通过jquery对div进行淡入淡出实现两个图片的渐变切换 html代码 <div id="kitten"> <img src="/images/kitten.jpg" alt="Kitten" /> </div> j
-
jQuery实现鼠标点击弹出渐变层的方法
弹出层在实际应用中我们经常会碰到大量的弹出层效果,下面我来做一个基于jquery的简单的弹出层效果实例,各位朋友有兴趣可参考. 效果代码如下 在弹出层中下面是核心代码 <script type="text/javascript"> // 渐变弹出层 $(document).ready(function(){ var speed = 600;//动画速度 $("#race a").click(function(event){//绑定事件处理 event.s
-
jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例
本文实例讲述了jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能.分享给大家供大家参考,具体如下: 弹出层:两种方式 一是打开网页就自动弹出层 二是点击弹出 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="htt
-
使用jquery实现鼠标滑过弹出更多相关信息层附源码下载
当要在有限的空间展示更多的信息时,我们经常会采取鼠标滑过弹出更多相关信息层,提高互动性.尤其可以应用在公司照片墙.招聘网站求职者信息展示等等场景. 本文结合实例和大家分享下使用jQuery实现滑过图片展示信息效果.当鼠标滑向照片时,会弹出对应的照片的详细介绍信息,请看演示效果: 效果展示 源码下载 HTML 首先我们准备页面素材,页面上由多组图片<li>密集组成,同时有图片对应的相关说明信息,用于展示详细信息效果. <div class="demo">
-
Jquery实现鼠标移上弹出提示框、移出消失思路及代码
思路: 1.首先要定位实现这种效果的元素 ,本次通过class 2.如果是动态显示不同的提示内容,需设置title 3.通过JQ给定位到元素加上 mouseover 和mouseout 事件 4.再完善下,弹出框跟随鼠标在目标元素上移动 5.再把 mouseover .mouseout 合并成 hover 复制代码 代码如下: //页面加载完成 $(function () { var x = 10; var y = 20; //设置提示框相对于偏移位置,防止遮挡鼠标 $(
-
js点击弹出div层实现可拖曳的弹窗效果
弹出层.弹窗效果+拖曳功能 *{ margin:0px; padding:0px;} body{ font-size:12px; font:Arial, Helvetica, sans-serif; margin:25PX 0PX; background:#eee;} .botton{ color:#F00; cursor:pointer;} .mybody{width:600px; margin:0 auto; height:1500px; border:1px solid #ccc; pad
-
jQuery在iframe中无法弹出对话框的解决方法
jQuery的弹出框使用很方便,但是如果在iframe中使用则弹不出对话框,而有时候我们还必须得使用iframe而不能用jQuery的load方式,这个时候就需要处理这个问题. 其实也非常简单,思路就是让iframe的父窗口弹出这个对话框.例如: parent.confirmDialog(); 这样就可以用了.不是什么有技术含量的问题,记下来,防止忘记.
-
jQuery点击按钮弹出遮罩层且内容居中特效
本文为大家分享了jQuery点击按钮弹出遮罩层且内容居中的特效,下面来看最终实现的效果: 由于是测试的程序,所以我未加关闭的按钮. 一.主体程序 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>弹出居中遮罩</title> <meta name="viewport" content="width=devi
-
jQuery实现的鼠标滑过弹出放大图片特效
本章节介绍一下一种比较常用的效果,那就是当鼠标滑过链接的时候,能够出现跟随鼠标指针移动的图层,在实际应用中,一般是对于链接的一些说明文字或者图片等等, 我们先来看个演示图 下面是代码实例: <link rel="stylesheet" href="../css/common.css" type="text/css" /> <script type="text/javascript" src="../
-
jQuery实现点击弹出背景变暗遮罩效果实例代码
本文是小编实现的一个简单的jquery点击弹出背景变暗遮罩效果,并且点击空白处隐藏弹出层的效果,效果非常棒,小编只给大家贴出了关键代码了,大家可以根据个人需要适当的添加内容. js代码如下: <script type="text/javascript"> $(document).ready(function(){ $(".tkyy").click(function(event){ event.stopPropagation(); //停止事件冒泡 $(&
-
jquery实现点击弹出带标题栏的弹出层(从右上角飞入)效果
本文实例讲述了jquery实现点击弹出带标题栏的弹出层(从右上角飞入)效果.分享给大家供大家参考.具体如下: 这是一款jquery实现的弹出层,点击文字后从网页右上角飞入,也可以说是滑入,此类弹出框带有关闭按钮,可自定义标题栏和弹出框内容,风格自己可定义,代码简洁,基于jquery实现,学习参考价值大,也可拿出即用. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-fade-in-title-info-stye-alert-code
随机推荐
- websocket+node.js实现实时聊天系统问题咨询
- Linux下启动Oracle服务和监听程序步骤
- 分享8款优秀的 jQuery 加载动画和进度条插件
- 秒用自动关机命令实现定时提醒你该睡觉了
- JavaWeb中的简单分页完整代码(推荐)
- Oracle数据库技术(38)
- JavaScript对象之深度克隆介绍
- js过滤特殊字符输入适合输入、粘贴、拖拽多种情况
- php 正确解码javascript中通过escape编码后的字符
- php面向对象全攻略 (三)特殊的引用“$this”的使用
- 正则表达式在线测试工具
- 探讨:用两个栈实现一个队列(我作为面试官的小结)
- MySQL 绿色版安装方法图文教程
- jQuery实现简单的日期输入格式化控件
- node.js中的fs.fsync方法使用说明
- linux中关于ftp查看不到文件列表的问题详解
- SQL Server误区30日谈 第18天 有关FileStream的存储,垃圾回收以及其它
- 老生常谈JavaScript数组的用法
- PHP 批量删除数据的方法分析
- 微信小程序实现图片懒加载的示例代码
其他
- vue怎么实现两个页面之间的参数传递
- java软件运行时间长卡顿什么原因
- Visio studio加载头文件
- 如何异步引入js文件
- 自幂数python程序
- order by 的字段是主键
- SQLsever获取部门最上级
- pytorch占内存太多
- unity 引导 shader
- bindingresult的作用
- tensorflow 重设参数
- centos查看网卡实时流量
- vue部署apache如何请求接口
- 如何用mq实现任务系统
- Axes3DSubplot参数详解
- feign 日期格式
- 微信小程序item跳转
- layui 修改上传文件格式提示
- python 3个dataframe合并
- pycharm中为啥会有两个site-packages