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 相关文章推荐
css图片自适应大小
Nov 28 Javascript
javascript hashtable实现代码
Oct 13 Javascript
深入理解JavaScript系列(15) 函数(Functions)
Apr 12 Javascript
用JavaScript实现动画效果的方法
Jul 20 Javascript
js获取checkbox复选框选中的选项实例
Aug 24 Javascript
jQuery实现列表的全选功能
Mar 18 Javascript
浅谈javascript中replace()方法
Nov 10 Javascript
JAVASCRIPT代码编写俄罗斯方块网页版
Nov 26 Javascript
JS之相等操作符详解
Sep 13 Javascript
Vue.js实现一个漂亮、灵活、可复用的提示组件示例
Mar 17 Javascript
js实现mp3录音通过websocket实时传送+简易波形图效果
Jun 12 Javascript
js实现三角形粒子运动
Sep 22 Javascript
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
根德YB400的电路分析
2021/03/02 无线电
PHP和javascript常用正则表达式及用法实例
2014/07/01 PHP
php判断邮箱地址是否存在的方法
2016/02/13 PHP
PHP使用pdo实现事务处理操作示例
2018/09/05 PHP
WebGame《逆转裁判》完整版 代码下载(1月24日更新)
2007/01/29 Javascript
createElement动态创建HTML对象脚本代码
2008/11/24 Javascript
[Web]防止用户复制页面内容和另存页面的方法
2009/02/06 Javascript
jquery.simple.tree插件 更简单,兼容性更好的无限树插件
2010/09/03 Javascript
基于JQUERY的两个ListBox子项互相调整的实现代码
2011/05/07 Javascript
javascript date格式化示例
2013/09/25 Javascript
一个例子轻松学会Vue.js
2017/01/02 Javascript
NodeJS实现微信公众号关注后自动回复功能
2017/05/31 NodeJs
在vue中通过axios异步使用echarts的方法
2018/01/13 Javascript
微信小程序自定义菜单切换栏tabbar组件代码实例
2019/12/30 Javascript
vue+springboot+element+vue-resource实现文件上传教程
2020/10/21 Javascript
python判断windows系统是32位还是64位的方法
2015/05/11 Python
13个最常用的Python深度学习库介绍
2017/10/28 Python
Python视频爬虫实现下载头条视频功能示例
2018/05/07 Python
python 读取txt,json和hdf5文件的实例
2018/06/05 Python
对Python定时任务的启动和停止方法详解
2019/02/19 Python
python opencv鼠标事件实现画框圈定目标获取坐标信息
2020/04/18 Python
PYTHON EVAL的用法及注意事项解析
2019/09/06 Python
python3操作注册表的方法(Url protocol)
2020/02/05 Python
python yield和Generator函数用法详解
2020/02/10 Python
Python *args和**kwargs用法实例解析
2020/03/02 Python
Python学习之路之pycharm的第一个项目搭建过程
2020/06/18 Python
html5 css3 动态气泡按钮实例演示
2012/12/02 HTML / CSS
什么叫应用程序域?什么是受管制的代码?什么是强类型系统?什么是装箱和拆箱?
2016/08/13 面试题
投资合作协议书
2014/04/17 职场文书
初中班主任评语大全
2014/04/24 职场文书
领导班子自我剖析材料
2014/08/16 职场文书
党员弘扬焦裕禄精神思想汇报
2014/09/10 职场文书
合伙经营协议书范本
2014/09/13 职场文书
给医院的感谢信
2015/01/21 职场文书
TV动画《八十龟酱观察日记》第四季宣传PV公布
2022/04/06 日漫
MySQL主从切换的超详细步骤
2022/06/28 MySQL