本实例使用jquery操作div的CSS,实现了可隐藏重现的靠边悬浮层,预览效果网址:http://www.keleyi.com/keleyi/phtml/xuanfudiv/ 本实例使用到jquery添加移除类的两个方法,详细介绍请参考网址:http://www.keleyi.com/a/bjac/e9e40a974de5a902.htm 下面给出完整代码,保存到html文件可查看效果。 复制代码 代码如下: jquery实现的可隐藏重现的靠边悬浮层-脚本之家 <BR>body{ margin:0px;} <BR>.onkeleyicom{left:0px;} <BR>.offkeleyicom{left:-140px;} <BR>.showkeleyicom{visibility:visible;} <BR>.hidekeleyicom{visibility:hidden;} <BR>#xf_keleyi_com{width:166px;height:200px; background-color:transparent;position:fixed;top:200px;} <BR>#jt_keleyi_com{float:right;width:25px;height:25px;margin-top:80px;} <BR>#nr_keleyi_com{float:left;height:100%;width:136px;background-color:Silver;} <BR> 可以滚动鼠标使页面向下 www.keleyi.com 请把光标移到箭头上 hi 柯乐义 keleyi.com keleyi keleyi.com 柯乐义 柯乐义 jquery实现的可隐藏重现的靠边悬浮层 A jquery 原文 keleyi.com jQuery完整代码 这里是内容www.keleyi.com .NET Javascript jQuery C# 其他 <BR>$(document).ready( <BR>function () { <BR>$('#jt_keleyi_com').bind('mouseover', function () { <BR>$('#xf_keleyi_com').removeClass("offkeleyicom"); <BR>$('#xf_keleyi_com').addClass("onkeleyicom"); <BR>$('#jt_keleyi_com').addClass("hidekeleyicom"); <BR>$('#jt_keleyi_com').removeClass("showkeleyicom"); <BR>}) <BR>$('#nr_keleyi_com').bind('mouseleave', function () { <BR>$('#xf_keleyi_com').removeClass("onkeleyicom"); <BR>$('#xf_keleyi_com').addClass("offkeleyicom"); <BR>$('#jt_keleyi_com').removeClass("hidekeleyicom"); <BR>$('#jt_keleyi_com').addClass("showkeleyicom"); <BR>}) <BR>}) <BR>