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弹框显示选项
Sep 13 Javascript
javascript 显示全局变量与隐式全局变量的区别
Feb 09 Javascript
微信小程序动态的加载数据实例代码
Apr 14 Javascript
利用JavaScript在网页实现八数码启发式A*算法动画效果
Apr 16 Javascript
小程序二次贝塞尔曲线实现购物车商品曲线飞入效果
Jan 07 Javascript
说说Vuex的getters属性的具体用法
Apr 15 Javascript
微信小程序页面间传递数组对象方法解析
Nov 06 Javascript
vue实现下拉菜单树
Oct 22 Javascript
vue router返回到指定的路由的场景分析
Nov 10 Javascript
详解vue 组件注册
Nov 20 Vue.js
vue+flask实现视频合成功能(拖拽上传)
Mar 04 Vue.js
vue+elementui 实现新增和修改共用一个弹框的完整代码
Jun 08 Vue.js
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
php开发工具之vs2005图解
2008/01/12 PHP
解析thinkphp import 文件内容变量失效的问题
2013/06/20 PHP
Laravel 5框架学习之向视图传送数据(进阶篇)
2015/04/08 PHP
PHP函数shuffle()取数组若干个随机元素的方法分析
2016/04/02 PHP
今天你说520了吗?不仅有php表白书还有java表白神器
2016/05/20 PHP
php用户名的密码加密更安全的方法
2019/06/21 PHP
js 取时间差去掉周六周日实现代码
2012/12/25 Javascript
被遗忘的javascript的slice() 方法
2015/04/20 Javascript
IE10中flexigrid无法显示数据的解决方法
2015/07/26 Javascript
javascript函数命名的三种方式及区别介绍
2016/03/22 Javascript
javascript用正则表达式过滤空格的实现代码
2016/06/14 Javascript
js 获取站点应用名的简单实例
2016/08/18 Javascript
浅析Javascript的自动分号插入(ASI)机制
2016/09/29 Javascript
微信小程序-详解数据缓存
2016/11/24 Javascript
JS数组返回去重后数据的方法解析
2017/01/03 Javascript
浅谈JS验证表单文本域输入空格的问题
2017/02/14 Javascript
requireJS模块化实现返回顶部功能的方法详解
2017/10/16 Javascript
vue-cli开发时,关于ajax跨域的解决方法(推荐)
2018/02/03 Javascript
浅析Angular 实现一个repeat指令的方法
2019/07/21 Javascript
解决vue-cli@3.xx安装不成功的问题及搭建ts-vue项目
2020/02/09 Javascript
微信小程序picker组件两列关联使用方式
2020/10/27 Javascript
[02:36]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Magma 选手采访
2021/03/11 DOTA
python切换hosts文件代码示例
2013/12/31 Python
Python基于正则表达式实现文件内容替换的方法
2017/08/30 Python
Python网络编程 Python套接字编程
2017/09/13 Python
python try except 捕获所有异常的实例
2018/10/18 Python
在pandas中遍历DataFrame行的实现方法
2019/10/23 Python
Python3以GitHub为例来实现模拟登录和爬取的实例讲解
2020/07/30 Python
python的scipy.stats模块中正态分布常用函数总结
2021/02/19 Python
HTML5地理定位与第三方工具百度地图的应用
2016/11/17 HTML / CSS
L’AGENCE官网:加州女装品牌
2018/06/03 全球购物
师德师风演讲稿
2014/05/05 职场文书
低碳环保标语
2014/06/12 职场文书
教师学习群众路线心得体会
2014/11/04 职场文书
Python编写可视化界面的全过程(Python+PyCharm+PyQt)
2021/05/17 Python
一劳永逸彻底解决pip install慢的办法
2021/05/24 Python