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 相关文章推荐
使用Java实现简单的server/client回显功能的方法介绍
May 03 Javascript
非常漂亮的JS+CSS图片幻灯切换特效
Nov 20 Javascript
javascript常用函数归纳整理
Oct 31 Javascript
js实现单击图片放大图片的方法
Feb 17 Javascript
jQuery实现简单的点赞效果
May 29 Javascript
jQuery给div,Span, a ,button, radio 赋值与取值
Jun 24 Javascript
JavaScript实现时间倒计时跳转(推荐)
Jun 28 Javascript
JS实现六边形3D拖拽翻转效果的方法
Sep 11 Javascript
利用Javascript裁剪图片并存储的简单实现
Mar 13 Javascript
js遍历获取表格内数据的方法(必看)
Apr 06 Javascript
详解vue.js+UEditor集成 [前后端分离项目]
Jul 07 Javascript
JS获取并处理php数组的方法实例分析
Sep 04 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 URL参数获取方式的四种例子
2014/02/28 PHP
php使用wordwrap格式化文本段落的方法
2015/03/17 PHP
PHP+sqlite数据库操作示例(创建/打开/插入/检索)
2016/05/26 PHP
Smarty模板常见的简单应用分析
2016/11/15 PHP
微信中一些常用的js方法汇总
2015/03/12 Javascript
在HTML中插入JavaScript代码的示例
2015/06/03 Javascript
JS选中checkbox后获取table内一行TD所有数据的方法
2015/07/01 Javascript
以WordPress为例讲解jQuery美化页面Title的方法
2016/05/23 Javascript
JS克隆,属性,数组,对象,函数实例分析
2016/11/26 Javascript
jQuery 添加样式属性的优先级别方法(推荐)
2017/06/08 jQuery
vue中关闭eslint的方法分析
2018/08/04 Javascript
vue.js单文件组件中非父子组件的传值实例
2018/09/13 Javascript
webpack 开发和生产并行设置的方法
2018/11/08 Javascript
js中实例与对象的区别讲解
2019/01/21 Javascript
怎么使用javascript深度拷贝一个数组
2019/06/06 Javascript
微信小程序之数据绑定原理解析
2019/08/14 Javascript
[03:32]2014DOTA2西雅图邀请赛 CIS外卡赛赛前black专访
2014/07/09 DOTA
[14:50]2018DOTA2亚洲邀请赛开幕式
2018/04/03 DOTA
Python写的Discuz7.2版faq.php注入漏洞工具
2014/08/06 Python
Python使用minidom读写xml的方法
2015/06/03 Python
Python简单实现控制电脑的方法
2018/01/22 Python
在django admin详情表单显示中添加自定义控件的实现
2020/03/11 Python
对django 2.x版本中models.ForeignKey()外键说明介绍
2020/03/30 Python
python编写softmax函数、交叉熵函数实例
2020/06/11 Python
css3 伪类选择器快速复习小结
2019/09/10 HTML / CSS
Html5实现iPhone开机界面示例代码
2013/06/30 HTML / CSS
法拉利英国精品店:Ferraris Boutique UK
2019/07/20 全球购物
美国领先的宠物用品和宠物食品零售商:Petco
2020/10/28 全球购物
运动会开幕式主持词
2014/03/28 职场文书
世博会口号
2014/06/20 职场文书
市贸粮局召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
2015年秘书个人工作总结
2015/04/25 职场文书
2015年学校保卫部工作总结
2015/05/11 职场文书
职位证明模板
2015/06/23 职场文书
基于Redis的List实现特价商品列表功能
2021/08/30 Redis
Python写情书? 10行代码展示如何把情书写在她的照片里
2022/04/21 Python