jquery实现的可隐藏重现的靠边悬浮层实例代码


Posted in Javascript onMay 27, 2013

本实例使用jquery操作div的CSS,实现了可隐藏重现的靠边悬浮层,预览效果网址:http://www.keleyi.com/keleyi/phtml/xuanfudiv/
本实例使用到jquery添加移除类的两个方法,详细介绍请参考网址:http://www.keleyi.com/a/bjac/e9e40a974de5a902.htm

下面给出完整代码,保存到html文件可查看效果。

<!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> 
<title>jquery实现的可隐藏重现的靠边悬浮层-三水点靠木</title> 
<script type="text/javascript" src="http://www.keleyi.com/keleyi/pmedia/jquery-1.9.1.min.js"></script> 
<style type="text/css"> 
body{ margin:0px;} 
.onkeleyicom{left:0px;} 
.offkeleyicom{left:-140px;} 
.showkeleyicom{visibility:visible;} 
.hidekeleyicom{visibility:hidden;} 
#xf_keleyi_com{width:166px;height:200px; background-color:transparent;position:fixed;top:200px;} 
#jt_keleyi_com{float:right;width:25px;height:25px;margin-top:80px;} 
#nr_keleyi_com{float:left;height:100%;width:136px;background-color:Silver;} 
</style> 
</head> 
<body> 
<div style="background-color:#959822; width:100%;height:150px;">可以滚动鼠标使页面向下</div> 
<div style="background-color:Green; width:100%;height:150px;">www.keleyi.com</div> 
<div style="background-color:Red; width:100%;height:150px;">请把光标移到箭头上</div> 
<div style="background-color:Yellow; width:100%;height:150px;">hi</div> 
<div style="background-color:Silver; width:100%;height:150px;">柯乐义</div> 
<div style="background-color:Aqua; width:100%;height:150px;">keleyi.com</div> 
<div style="background-color:Fuchsia; width:100%;height:150px;">keleyi</div> 
<div style="background-color:Green; width:100%;height:150px;">keleyi.com</div> 
<div style="background-color:Blue; width:100%;height:150px;">柯乐义</div> 
<div style="background-color:Olive; width:100%;height:150px;">柯乐义 jquery实现的可隐藏重现的靠边悬浮层</div> 
<div style="background-color:Green; width:100%;height:150px;">A</div> 
<div style="background-color:Purple; width:100%;height:150px;">jquery</div> 
<div style="background-color:Green; width:100%;height:150px;"><a href="http://www.keleyi.com/a/bjac/cdbc89174171ebb8.htm" target="_blank">原文</a></div> 
<div style="background-color:Lime; width:100%;height:150px;">keleyi.com</div> 
<div style="background-color:Orange; width:100%;height:150px;"><a href="http://www.keleyi.com/menu/jquery/" target="_blank">jQuery</a>完整代码</div> 
<div class="offkeleyicom" id="xf_keleyi_com"> 
<div id="nr_keleyi_com">这里是内容<br />www.keleyi.com 
<ul> 
<li><a href="http://www.keleyi.com/menu/net/" target="_blank">.NET</a> 
</li> 
<li><a href="http://www.keleyi.com/menu/javascript/" target="_blank">Javascript</a> 
</li> 
<li><a href="http://www.keleyi.com/menu/jquery/" target="_blank">jQuery</a> 
</li> 
<li><a href="http://www.keleyi.com/menu/csharp/" target="_blank">C#</a> 
</li> 
<li><a href="http://www.keleyi.com/menu/other/" target="_blank">其他</a> 
</li> 
</ul> 
<br /> 
</div> 
<div id="jt_keleyi_com"><img src="http://www.keleyi.com/keleyi/pmedia/rightarrow.jpg" alt="显示" /></div> 
</div> 
<script type="text/javascript"> 
$(document).ready( 
function () { 
$('#jt_keleyi_com').bind('mouseover', function () { 
$('#xf_keleyi_com').removeClass("offkeleyicom"); 
$('#xf_keleyi_com').addClass("onkeleyicom"); 
$('#jt_keleyi_com').addClass("hidekeleyicom"); 
$('#jt_keleyi_com').removeClass("showkeleyicom"); 
}) 
$('#nr_keleyi_com').bind('mouseleave', function () { 
$('#xf_keleyi_com').removeClass("onkeleyicom"); 
$('#xf_keleyi_com').addClass("offkeleyicom"); 
$('#jt_keleyi_com').removeClass("hidekeleyicom"); 
$('#jt_keleyi_com').addClass("showkeleyicom"); 
}) 
}) 
</script> 
</body> 
</html>
Javascript 相关文章推荐
一个很酷的拖动层的js类,兼容IE及Firefox
Jun 23 Javascript
javascript面向对象编程代码
Dec 19 Javascript
JS中prototype关键字的功能介绍及使用示例
Jul 21 Javascript
js jquery分别实现动态的文件上传操作按钮的添加和删除
Jan 13 Javascript
JavaScript中数据结构与算法(四):串(BF)
Jun 19 Javascript
再谈JavaScript线程
Jul 10 Javascript
JS封装通过className获取元素的函数示例
Dec 20 Javascript
Bootstrap的modal拖动效果
Dec 25 Javascript
解决IE7中使用jQuery动态操作name问题
Aug 28 jQuery
Vue2.0 给Tab标签页和页面切换过渡添加样式的方法
Mar 13 Javascript
node.js爬取中关村的在线电瓶车信息
Nov 13 Javascript
原生JS实现的跳一跳小游戏完整实例
Jan 27 Javascript
jQuery解决下拉框select设宽度时IE 6/7/8下option超出显示不全
May 27 #Javascript
div当滚动到页面顶部的时候固定在顶部实例代码
May 27 #Javascript
使用jquery实现div的tab切换实例代码
May 27 #Javascript
一个简单的瀑布流效果(主体形式自写)
May 27 #Javascript
jquery实现的一个导航滚动效果具体代码
May 27 #Javascript
JS/FLASH实现复制代码到剪贴板(兼容所有浏览器)
May 27 #Javascript
jQuery数据缓存功能的实现思路及简单模拟
May 27 #Javascript
You might like
无线电波是什么?它是怎样传输的?
2021/03/01 无线电
PHP实现根据设备类型自动跳转相应页面的方法
2014/07/24 PHP
CI框架中通过hook的方式实现简单的权限控制
2015/01/07 PHP
PHP的关于变量和日期处理的一些面试题目整理
2015/08/10 PHP
变量在 PHP7 内部的实现(二)
2015/12/21 PHP
PHP实现的Redis多库选择功能单例类
2017/07/27 PHP
laravel学习笔记之模型事件的几种用法示例
2017/08/15 PHP
详解PHP变量传值赋值和引用赋值变量销毁
2019/03/23 PHP
简洁短小的 JavaScript IE 浏览器判定代码
2010/03/21 Javascript
jqplot通过ajax动态画折线图的方法及思路
2013/12/08 Javascript
js判断浏览器是否支持html5
2014/08/17 Javascript
js中hash和ico的关联分析
2015/02/05 Javascript
jQuery实现动画效果circle实例
2015/08/06 Javascript
javascript:void(0)是什么意思及href=#与href=javascriptvoid(0)的区别
2015/11/13 Javascript
JS实现登录页面记住密码和enter键登录方法推荐
2016/05/10 Javascript
JS基于面向对象实现的多个倒计时器功能示例
2017/02/28 Javascript
ES6新特性之Object的变化分析
2017/03/31 Javascript
JavaScript基于replace+正则实现ES6的字符串模版功能
2017/04/25 Javascript
js实现单张图片平移切换效果
2017/10/11 Javascript
NodeJS爬虫实例之糗事百科
2017/12/14 NodeJs
js登录滑动验证的实现(不滑动无法登陆)
2018/01/03 Javascript
python实现带错误处理功能的远程文件读取方法
2015/04/29 Python
python库lxml在linux和WIN系统下的安装
2018/06/24 Python
python 判断三个数字中的最大值实例代码
2019/07/24 Python
Python 、Pycharm、Anaconda三者的区别与联系、安装过程及注意事项
2019/10/11 Python
执行Django数据迁移时报 1091错误及解决方法
2019/10/14 Python
在Windows上安装和配置 Jupyter Lab 作为桌面级应用程序教程
2020/04/22 Python
Django数据统计功能count()的使用
2020/11/30 Python
python安装及变量名介绍详解
2020/12/12 Python
css3实现背景颜色渐变让图片不再是唯一的实现方式
2012/12/18 HTML / CSS
匡威比利时官网:Converse Belgium
2017/04/13 全球购物
德国高端单身人士交友网站:ElitePartner
2018/12/02 全球购物
会计求职信
2014/05/29 职场文书
家具商场的活动方案
2014/08/16 职场文书
CSS3鼠标悬浮过渡缩放效果
2021/04/17 HTML / CSS
MySQL系列之六 用户与授权
2021/07/02 MySQL