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 相关文章推荐
javascript实现原生ajax的几种方法介绍
Sep 21 Javascript
JScript中的条件注释详解
Apr 24 Javascript
基于JS判断iframe是否加载成功的方法(多种浏览器)
May 13 Javascript
利用JS实现页面删除并重新排序功能
Dec 09 Javascript
package.json文件配置详解
Jun 15 Javascript
webpack打包并将文件加载到指定的位置方法
Feb 22 Javascript
解决vue打包css文件中背景图片的路径问题
Sep 03 Javascript
了解javascript中的Dom操作
May 27 Javascript
如何提升vue.js中大型数据的性能
Jun 21 Javascript
vue实现表格过滤功能
Sep 27 Javascript
jquery 回调操作实例分析【回调成功与回调失败的情况】
Sep 27 jQuery
在Vue中使用Echarts实例图的方法实例
Oct 10 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核心代码分析require和include的区别
2011/01/02 PHP
CI(CodeIgniter)框架配置
2014/06/10 PHP
PHP连接MSSQL2008/2005数据库(SQLSRV)配置实例
2014/10/22 PHP
PHP Cookei记录用户历史浏览信息的代码
2016/02/03 PHP
PHP中抽象类、接口的区别与选择分析
2016/03/29 PHP
PHP的微信支付接口使用方法讲解
2019/03/08 PHP
JS实现打开本地文件或文件夹
2021/03/09 Javascript
JavaScript中this关键字使用方法详解
2007/03/08 Javascript
用prototype实现的简单小巧的多级联动菜单
2007/03/24 Javascript
JavaScript入门教程(5) js Screen屏幕对象
2009/01/31 Javascript
js判断变量是否未定义的代码
2020/03/28 Javascript
CSS(js)限制页面显示的文本字符长度
2012/12/27 Javascript
js控制页面控件隐藏显示的两种方法介绍
2013/10/09 Javascript
JS实现很实用的对联广告代码(可自适应高度)
2015/09/18 Javascript
jquery 实现回车登录详解及实例代码
2016/10/23 Javascript
jQuery加载及解析XML文件的方法实例分析
2017/01/22 Javascript
React Native 环境搭建的教程
2017/08/19 Javascript
Angular项目从新建、打包到nginx部署全过程记录
2017/12/09 Javascript
Vue 项目代理设置的优化
2018/04/17 Javascript
vue3.0 CLI - 2.3 - 组件 home.vue 中学习指令和绑定
2018/09/14 Javascript
梳理一下vue中的生命周期
2020/12/30 Vue.js
[01:13:18]Secret vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.23
2019/09/05 DOTA
python网络爬虫学习笔记(1)
2018/04/09 Python
python中for用来遍历range函数的方法
2018/06/08 Python
win7下python3.6安装配置方法图文教程
2018/07/31 Python
python随机模块random使用方法详解
2020/02/14 Python
python实现图像拼接
2020/03/05 Python
Python爬取股票信息,并可视化数据的示例
2020/09/26 Python
CSS实现圆形放大镜狙击镜效果 只有圆圈里的放大
2012/12/10 HTML / CSS
养成教育经验材料
2014/05/26 职场文书
工资收入证明
2014/10/07 职场文书
2019年浪漫婚礼证婚词
2019/06/27 职场文书
如何写一份具有法律效力的借款协议书?
2019/07/02 职场文书
django学习之ajax post传参的2种格式实例
2021/05/14 Python
如何设计高效合理的MySQL查询语句
2021/05/26 MySQL
WebRTC记录音视频流(web技术分享)
2022/02/24 Javascript