左侧提示 滑进滑出 平滑效果，各位童鞋如果遇到类似效果可以应用：

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>

<a target="_blank"><img src="../css.87504.cn/images/business/read01.gif" /></a>

</div>

<div>

<a target="_blank"><img src="../css.87504.cn/images/business/icon_close.gif" /></a>

<p >您可以订阅生意街商机话题，您会通过邮箱收到栏目最新内容。</p>

<p><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>

【JQUERY实现左侧TIPS滑进滑出效果示例】相关文章：

★ jQuery实现首页图片淡入淡出效果的方法

★ Javascript实现的SHA-256加密算法完整实例

★ jquery实现弹出层效果实例

★ Javascript实现div层渐隐效果的方法

★ JS实现模拟风力的雪花飘落效果

★ JavaScript实现广告的关闭与显示效果实例

★ JS实现带缓冲效果打开、关闭、移动一个层的方法

★ 载入进度条 效果

★ javascript实现链接单选效果

★ js实现鼠标移到链接文字弹出一个提示层的方法