【jquery】鼠标滑动上向上缓慢弹出显示隐藏层_蓝戒的博客


【jquery】鼠标滑动上向上缓慢弹出显示隐藏层

鼠标滑动上向上缓慢弹出显示隐藏层

 

demo:

DWCS6软件的新特性
1.增加移动平台设置
2.增加移动平台设置
3.增加移动平台设置
4.增加移动平台设置

 

html代码如下:

<div id="box">
<img src="img/dwcs6_02.jpg" />
<dl>
<dt>DWCS6软件的新特性</dt>
<dd>1.增加移动平台设置</dd>
<dd>2.增加移动平台设置</dd>
<dd>3.增加移动平台设置</dd>
<dd>4.增加移动平台设置</dd>
</dl>
<p>CS6官方公布的亮点有网友戏言说,目前世界上“最好的化妆品”是一款叫做PhotoShop的产品,它可以帮你去除所有你不满意的地方。上周末,这款最好的化妆品推出了第十三代产品的试用装——PhotoShop CS6Beta,所有感兴趣的用户都可以免费下载试用。注意:安装CS6 Beta的时候请选。</p>
</div>

 

js代码如下:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>

<script type="text/javascript">

$(document).ready(function() {
$('#box').hover(function() {
$(this).children('p').slideDown(200);
}, function() {
$(this).children('p').slideUp(100);
});
});
</script>

 

css代码如下:

<style type="text/css">
@charset "utf-8";
dl,dt,dd,img,p{ margin:0; padding:0;}
#box{ width:500px; height:260px; margin:0 auto; border:1px solid #999; background:#ccc; position:relative;}
#box img{ float:left; margin-right:10px; display:inline;}
#box dl{ width:200px; margin-top:55px; float:left;}
#box dl dt{width:200px; height:30px; font:bold 16px/30px; float:left;}
#box dl dd{width:200px; height:24px; font:bold 14px/24px; float:left;}
#box p{width:460px; height:220px; position:absolute; left:0; bottom:0; opacity:0.6; background:#000; padding:20px; font:normal 14px/1.5 "宋体"; color:#fff; letter-spacing:2px; display:none; }
</style>

本文固定链接: http://www.webzsky.com/?p=173 | 蓝戒的博客

cywcd
该日志由 cywcd 于2013年10月14日发表在 Jquery 分类下, 你可以发表评论,并在保留原文地址及作者的情况下引用到你的网站或博客。
原创文章转载请注明: 【jquery】鼠标滑动上向上缓慢弹出显示隐藏层 | 蓝戒的博客
关键字:

【jquery】鼠标滑动上向上缓慢弹出显示隐藏层:等您坐沙发呢!

发表评论


快捷键:Ctrl+Enter
来自的朋友,欢迎您 点击这里 订阅我的博客 o(∩_∩)o~~~
×