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 相关文章推荐
我遇到的参数传递中 双引号单引号嵌套问题
Feb 11 Javascript
网页前端优化之滚动延时加载图片示例
Jul 13 Javascript
纯js实现遮罩层效果原理分析
May 27 Javascript
JQuery中Text方法用法实例分析
May 18 Javascript
JavaScript中的return语句简单介绍
Dec 07 Javascript
jQuery Mobile动态刷新页面样式的实现方法
May 28 Javascript
footer定位页面底部(代码分享)
Mar 07 Javascript
xmlplus组件设计系列之文本框(TextBox)(3)
May 03 Javascript
vue项目使用axios发送请求让ajax请求头部携带cookie的方法
Sep 26 Javascript
快速了解Node中的Stream流是什么
Feb 13 Javascript
微信小程序封装的HTTP请求示例【附升级版】
May 11 Javascript
React如何实现浏览器打印部分内容详析
May 19 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
PHP计算2点经纬度之间的距离代码
2013/08/12 PHP
Ubuntu下安装PHP的mongodb扩展操作命令
2015/07/04 PHP
PHP读书笔记整理_结构语句详解
2016/07/01 PHP
PHP实现的迪科斯彻(Dijkstra)最短路径算法实例
2017/09/16 PHP
Javascript 构造函数 实例分析
2008/11/26 Javascript
模拟select的代码
2011/10/19 Javascript
onmouseover和onmouseout的一些问题思考
2013/08/14 Javascript
javascript将异步校验表单改写为同步表单
2015/01/27 Javascript
jQuery拖动布局其结果保存到数据库
2015/10/09 Javascript
基于jQuery实现响应式圆形图片轮播特效
2015/11/25 Javascript
解决微信浏览器Javascript无法使用window.location.reload()刷新页面
2016/06/21 Javascript
详解nodejs中的process进程
2017/03/19 NodeJs
使用ionic播放轮询广告的实现方法(必看)
2017/04/24 Javascript
基于vue实现移动端圆形旋钮插件效果
2018/11/28 Javascript
axios+Vue实现上传文件显示进度功能
2019/04/14 Javascript
js实现烟花特效
2020/03/02 Javascript
微信小程序学习总结(二)样式、属性、模板操作分析
2020/06/04 Javascript
javascript利用canvas实现鼠标拖拽功能
2020/07/23 Javascript
Python批量更改文件名的实现方法
2017/10/29 Python
python3+PyQt5重新实现QT事件处理程序
2018/04/19 Python
django实现更改数据库某个字段以及字段段内数据
2020/03/31 Python
深入浅析pycharm中 Make available to all projects的含义
2020/09/15 Python
HTML5样式控制示例代码
2013/11/27 HTML / CSS
芝加哥牛排公司:Chicago Steak Company
2018/10/31 全球购物
Windows和Linux动态库应用异同
2016/07/28 面试题
消防安全检查制度
2014/02/04 职场文书
六一节目主持词
2014/04/01 职场文书
小学二年级评语
2014/04/21 职场文书
图书馆志愿者活动总结
2014/06/27 职场文书
2015年师德师风承诺书
2015/01/22 职场文书
创业计划书之酒厂
2019/10/14 职场文书
Netty结合Protobuf进行编解码的方法
2021/06/26 Java/Android
Java实现多文件上传功能
2021/06/30 Java/Android
python常见的占位符总结及用法
2021/07/02 Python
MySQL8.0的WITH查询详情
2021/08/30 MySQL
Vue Element plus使用方法梳理
2022/12/24 Vue.js