JQUERY实现左侧TIPS滑进滑出效果示例


Posted in Javascript onJune 27, 2013

左侧提示 滑进滑出 平滑效果,各位童鞋如果遇到类似效果可以应用:
JQUERY实现左侧TIPS滑进滑出效果示例 
JQUERY代码:

//左侧浮动 
$(".reading").hover( function(){ 
$(this).animate({left:"50"}); 
$(".read").animate({left:"0"},600); 
}); 
$(".read_close").click( function(){ 
$(".read").animate({left:"-287"},600); 
$(".reading").animate({left:"0"},800); 
});

HTML:
<!--左侧浮动--> 
<div class="reading"> 
<a target="_blank"><img src="../css.87504.cn/images/business/read01.gif" /></a> 
</div> 
<div class="read"> 
<a target="_blank" class="read_close"><img src="../css.87504.cn/images/business/icon_close.gif" /></a> 
<p >您可以订阅生意街商机话题,您会通过邮箱收到栏目最新内容。</p> 
<p class="read_btn"><a href="#" target="_blank" ><img src="../css.87504.cn/images/business/read02.gif" /></a></p> 
</div>

CSS:
.reading{position:fixed;left:0px;bottom:30px;cursor:pointer;width:25px;height:75px; 
_position:absolute;//兼容IE6 
_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,30)||0)));<PRE class=css name="code">//兼容IE6,距离底部30</PRE>}.read{ border:1px solid #d0d0d0;width:285px;height:100px; -moz-box-shadow:0px 1px 2px #ccc; -webkit-box-shadow:0px 1px 2px #ccc; box-shadow:0px 1px 2px #ccc;//阴影效果,CSS3background:#fff;position:fixed;left:-287px;bottom:30px;z-index:10;_position:absolute;_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,30)||0)));}.read 
p{font-size:14px;line-height:22px;padding:15px 0 0 16px;width:240px;}.read p.read_btn{text-align:right;padding-top:5px}.read_close{float:right;padding:2px;cursor:pointer;}<P></P> 
<PRE></PRE> 
<BR> 
<BR> 
<P></P> 
<P><BR> 
</P>
Javascript 相关文章推荐
取得传值的函数
Oct 27 Javascript
javascript里的条件判断
Feb 27 Javascript
jQuery EasyUI API 中文文档 - DataGrid数据表格
Nov 17 Javascript
JavaScript导出Excel实例详解
Nov 25 Javascript
js与jQuery实现checkbox复选框全选/全不选的方法
Jan 05 Javascript
JS两个数组比较,删除重复值的巧妙方法(推荐)
Jun 03 Javascript
Vue自定义指令介绍(2)
Dec 08 Javascript
Bootstrap列表组学习使用
Feb 09 Javascript
JavaScript函数定义方法实例详解
Mar 05 Javascript
ajaxfileupload.js实现上传文件功能
Apr 19 Javascript
微信小程序淘宝首页双排图片布局排版代码(推荐)
Oct 29 Javascript
vue实现验证用户名是否可用
Jan 20 Vue.js
A标签触发onclick事件而不跳转的多种解决方法
Jun 27 #Javascript
artdialog的图片/标题以及关闭按钮不显示的解决方法
Jun 27 #Javascript
JQuery实现表格中相同单元格合并示例代码
Jun 26 #Javascript
基于js disabled=&quot;false&quot;不起作用的解决办法
Jun 26 #Javascript
jQuery实现类似淘宝购物车全选状态示例
Jun 26 #Javascript
如何让页面加载完成后执行js
Jun 26 #Javascript
文件编码导致jquery失效的解决方法
Jun 26 #Javascript
You might like
使用 MySQL Date/Time 类型
2008/03/26 PHP
Snoopy类使用小例子
2008/04/15 PHP
thinkPHP3.x常量整理(预定义常量/路径常量/系统常量)
2016/05/20 PHP
PHP 极验验证码实例讲解
2016/09/29 PHP
Windows平台实现PHP连接SQL Server2008的方法
2017/07/26 PHP
启用OPCache提高PHP程序性能的方法
2019/03/21 PHP
JavaScript取得鼠标绝对位置程序代码介绍
2012/09/16 Javascript
js获取网页高度(详细整理)
2012/12/28 Javascript
简单实用的反馈表单无刷新提交带验证
2013/11/15 Javascript
document.forms用法示例介绍
2014/06/26 Javascript
JavaScript实现穷举排列(permutation)算法谜题解答
2014/12/29 Javascript
javascript原型继承工作原理和实例详解
2016/04/07 Javascript
React实现双向绑定示例代码
2016/09/19 Javascript
JavaScript 拖拽实例代码
2016/09/21 Javascript
JavaScript 继承详解(五)
2016/10/11 Javascript
浅谈jQuery的bind和unbind事件(绑定和解绑事件)
2017/03/02 Javascript
Vue快速实现通用表单验证的方法
2020/02/24 Javascript
Vue脚手架编写试卷页面功能
2020/03/17 Javascript
[42:52]IG vs VGJ.T 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
python判断windows隐藏文件的方法
2014/03/21 Python
python实现的文件夹清理程序分享
2014/11/22 Python
详解Python网络爬虫功能的基本写法
2016/01/28 Python
python3实现抓取网页资源的 N 种方法
2017/05/02 Python
Python3分析处理声音数据的例子
2019/08/27 Python
Python高级property属性用法实例分析
2019/11/19 Python
Pytorch实现LSTM和GRU示例
2020/01/14 Python
Python异常原理及异常捕捉实现过程解析
2020/03/25 Python
关于Python 解决Python3.9 pandas.read_excel(‘xxx.xlsx‘)报错的问题
2020/11/28 Python
使用python操作lmdb对数据读取的实例
2020/12/11 Python
皇马官方商城:Real Madrid Store
2016/09/02 全球购物
GEOX鞋美国官方网站:意大利会呼吸的鞋
2017/07/12 全球购物
IRO美国官网:法国服装品牌
2018/03/06 全球购物
美国玩具公司:U.S.Toy
2018/05/19 全球购物
会计与出纳自荐书范文
2014/03/16 职场文书
办公室班子四风问题对照检查材料
2014/10/04 职场文书
MySQL系列之三 基础篇
2021/07/02 MySQL