鼠标滑过触发拉窗式JS效果

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="http://www.jb51.net/" />

<title>鼠标滑过触发拉窗式JS效果</title>

<link rel="stylesheet" href="http://pcss1.4008000000.com/app_css/4008000000/v20/base.css" />

<link rel="stylesheet" href="http://pcss1.4008000000.com/app_css/4008000000/v20/public.css"/>

<style type="text/css">

.f44{font-size:44px;}

.how_buy{width:1210px;margin:auto;font-family:‘Microsoft Yahei‘;height:247px;overflow:hidden;}

.how_buy ul{position:relative;left:5px;}

.how_buy a{color:#fff;}

.how_buy li{width:297px;border-right:4px solid #fff;position:relative;float:left;overflow:hidden;cursor:pointer;}

.hb_link:hover{text-decoration:none;color:#fff;}

/*遮罩背景*/

.hbli_mask{height:80px;width:100%;position:absolute;bottom:20px;left:0;z-index:2;background:#000;filter:Alpha(opacity=30);opacity:0.3;}

/*简述*/

.hbli_resume{height:70px;width:100%;position:absolute;bottom:20px;left:0;z-index:3;line-height:1.8;padding-top:10px;padding-left:15px;color:#fff;}

/*最窄时背景层*/

.hbli_ico{height:246px;text-align:center;padding-top:1px;width:193px;}

.hbli_ico1{background:#c3a27e;}

.hbli_ico2{background:#f1b849;}

.hbli_ico3{background:#ff6633;}

.hbli_ico4{background:#878373;}

.hbli_ico img{margin-top:35px;}

.hbli_ico3 img{margin-top:25px;}

.hbli_tip{position:absolute;z-index:0;left:468px;top:0;width:12px;height:247px;display:none;background:url(http://pimg1.4008000000.com/app_images/4008000000/v20/index/hbli_ico_bg.png) no-repeat;_background:url(http://pimg1.4008000000.com/app_images/4008000000/v20/index/hbli_ico_bg.gif) no-repeat;}

.hb_li1 .hbli_tip{background-position:right top;}

.hb_li2 .hbli_tip{background-position:right -250px;}

.hb_li3 .hbli_tip{background-position:right -500px;}

.hb_li4 .hbli_tip{background-position:right -750px;}

/*当前li样式*/

.hbli_cur_con{position:absolute;width:420px;left:32px;top:15px;z-index:3;color:#fff;}

.hbli_box_link,.hbli_box_link:hover {display:inline-block;*display:inline;*zoom:1;text-decoration:none;}

.hblicc_title {min-height:80px;_height:80px;}

.hblicc_recommend{height:38px;}

.hbliccr_title{line-height:30px;width:95px;color:#fff;}

.hbliccr_con{display:inline-block;*display:inline;*zoom:1;width:310px;line-height:19px;}

.hblicc_buy{margin-top:25px;position:relative;}

.hblicc_buy a,.hblicc_buy a:hover{display:inline-block;*display:inline;*zoom:1;width:144px;color:#f63;text-align:center;line-height:45px;background:#fff;position:absolute;top:8px;right:0;font-size:18px;}

.hb_li1{background:url(http://pimg1.4008000000.com/app_images/4008000000/v20/index/hb_li_bg1.jpg) top right no-repeat;}

.hb_li2{background:url(http://pimg1.4008000000.com/app_images/4008000000/v20/index/hb_li_bg2.jpg) top right no-repeat;}

.hb_li3{background:url(http://pimg1.4008000000.com/app_images/4008000000/v20/index/hb_li_bg3.jpg) top right no-repeat;}

.hb_li4{background:url(http://pimg1.4008000000.com/app_images/4008000000/v20/index/hb_li_bg4.jpg) top right no-repeat;}

</style>

<script type="text/javascript" src="http://pscript1.4008000000.com/app_js/paui/1.0.1/build/pa.ui.min.js"></script>

</head>

<body>

<div class="how_buy">

<ul class="c">

<li class="hb_li1">

<p class="hbli_mask"></p>

<p class="hbli_resume">

<span class="f20 fwb">新手司机</span><br /><span class="f14">驾龄在2年以下的车主朋友</span>

</p>

<div class="hbli_ico hbli_ico1">

<img src="http://pimg1.4008000000.com/app_images/4008000000/v20/index/hbli_ico1.gif" alt="新手司机" />

</div>

<div class="hbli_tip"></div>

<div class="hbli_cur_con dsn">

<a href="http://www.4008000000.com/zaixiangoumai/chexian/xinshou.shtml" otitle="新手司机-车险如何购买" otype="button" target="_blank" class="hbli_box_link">

<p class="hblicc_title f18 fwb">新手上路，满满都是惊吓，如何给自己和爱车更好的保障？</p>

<p class="hblicc_recommend c">

<span class="fl hbliccr_title f18 fwb">重磅推荐：</span>

<span class="fl hbliccr_con f14">全面商业险及附加险保障，只买对不买贵，如果是新车，网上买还比4S店划算啊</span>

</p>

</a>

<p class="hblicc_buy">

<a href="http://www.4008000000.com/zaixiangoumai/chexian/xinshou.shtml" id="T-ljgm1" otitle="去看看-新手司机-车险如何购买" otype="button" target="_blank">去看看</a>

</p>

</div>

</li>

<li class="hb_li2">

<p class="hbli_mask"></p>

<p class="hbli_resume">

<span class="f20 fwb">女性司机</span><br /><span class="f14">需独立驾驶出行的女性司机</span>

</p>

<div class="hbli_ico hbli_ico2">

<img src="http://pimg1.4008000000.com/app_images/4008000000/v20/index/hbli_ico2.gif" alt="女性司机" />

</div>

<div class="hbli_tip"></div>

<div class="hbli_cur_con dsn">

<a href="http://www.4008000000.com/zaixiangoumai/chexian/nvxing.shtml" otitle="女性司机-车险如何购买" otype="button" target="_blank" class="hbli_box_link">

<p class="hblicc_title f18 fwb">路上状况多，万一发生了交通意外、车辆抛锚，我该如何处理？</p>

<p class="hblicc_recommend c">

<span class="fl hbliccr_title f18 fwb">重磅推荐：</span>

<span class="fl hbliccr_con f14">合适的商业险及附加险，更加全面的保障，同时还有免费道路救援服务，路上情况，一步解决。</span>

</p>

</a>

<p class="hblicc_buy">

<a href="http://www.4008000000.com/zaixiangoumai/chexian/nvxing.shtml" id="T-ljgm2" otitle="去看看-女性司机-车险如何购买" otype="button" target="_blank">去看看</a>

</p>

</div>

</li>

<li class="hb_li3">

<p class="hbli_mask"></p>

<p class="hbli_resume">

<span class="f20 fwb">家庭一族</span><br /><span class="f14">经常带家人出行的车主朋友</span>

</p>

<div class="hbli_ico hbli_ico3">

<img src="http://pimg1.4008000000.com/app_images/4008000000/v20/index/hbli_ico3.gif" alt="家庭一族" />

</div>

<div class="hbli_tip"></div>

<div class="hbli_cur_con dsn">

<a href="http://www.4008000000.com/zaixiangoumai/chexian/jiating.shtml" otitle="家庭一族-车险如何购买" otype="button" target="_blank" class="hbli_box_link">

<p class="hblicc_title f18 fwb">闲暇时，会带上家人自驾出行，买车险，除了对车的保障，还看重对家里人的保护</p>

<p class="hblicc_recommend c">

<span class="fl hbliccr_title f18 fwb">重磅推荐：</span>

<span class="fl hbliccr_con f14">完善的商业险及附加险保障，加上意外险的组合购买，保车保人，一招搞掂</span>

</p>

</a>

<p class="hblicc_buy">

<a href="http://www.4008000000.com/zaixiangoumai/chexian/jiating.shtml" id="T-ljgm3" otitle="去看看-家庭一族-车险如何购买" otype="button" target="_blank">去看看</a>

</p>

</div>

</li>

<li class="hb_li4">

<p class="hbli_mask"></p>

<p class="hbli_resume">

<span class="f20 fwb">测试一族</span><br /><span class="f14">快来戳我测一测</span>

</p>

<div class="hbli_ico hbli_ico4">

<img src="http://pimg1.4008000000.com/app_images/4008000000/v20/index/hbli_ico4.gif" alt="测试一族" />

</div>

<div class="hbli_tip"></div>

<div class="hbli_cur_con dsn">

<a href="http://www.4008000000.com/fuwuzhongxin/chexian/xqfx/index.shtml" otitle="快来戳我测一测-车险如何购买" otype="button" target="_blank" class="hbli_box_link">

<p class="hblicc_title f18 fwb">只需几步，帮您搭配最合适的险种套餐<br>网上买车险，就是这么简单</p>

<p class="hblicc_recommend c"></p>

</a>

<p class="hblicc_buy">

<a href="http://www.4008000000.com/fuwuzhongxin/chexian/xqfx/index.shtml" id="T-ljgm4" otitle="快来戳我测一测-测试一族-车险如何购买" otype="button" target="_blank">快来戳我测一测</a>

</p>

</div>

</li>

</ul>

</div>

<script>

(function(){

var t=600,

t2=200;

$(‘.how_buy li‘).hover(function(){

var _this=$(this);

$(this).stop().animate({‘width‘:610},t)

.find(‘.hbli_ico‘).stop().animate({‘width‘:468},t+10,function(){

_this.find(‘.hbli_tip‘).show();

})

.find(‘img‘).hide()

.end().siblings(‘.hbli_cur_con‘).fadeIn(t2)

.siblings(‘.hbli_resume‘).fadeOut(t2);

$(this).siblings(‘li‘).stop().animate({‘width‘:193},t)

.find(‘.hbli_ico‘).stop().animate({‘width‘:193},t+10)

.find(‘img‘).show()

.end().siblings(‘.hbli_tip‘).hide()

.end().siblings(‘.hbli_cur_con‘).fadeOut(t2)

.siblings(‘.hbli_resume‘).fadeIn(t2);

});

$(‘.how_buy‘).hover(function(){},function(){

$(‘.how_buy li‘).stop().animate({‘width‘:297},t)

.find(‘.hbli_ico‘).stop().animate({‘width‘:193},t+10)

.find(‘img‘).show()

.end().siblings(‘.hbli_tip‘).hide()

.siblings(‘.hbli_cur_con‘).fadeOut(t2)

.siblings(‘.hbli_resume‘).fadeIn(t2);

});

})();

</script>

</body>

</html>

时间： 2024-10-14 04:40:10

鼠标滑过触发拉窗式JS效果的相关文章

鼠标滑过下拉菜单抖动的问题 slideup/slidedown() 抖动问题

<script type="text/javascript"> $('li').children('dl').css({'margin': '0','display' :'none'}) $('li').mouseover(function(){ $(this).children('dl').slideDown(); }); $('li').mouseout(function(){ $(this).children('dl').slideUp(); });</scri

简单实用的鼠标滑过图片遮罩层动画jQuery插件

nsHover是一款简单实用的鼠标滑过图片遮罩层动画jQuery插件.该插件可以在图片或块级元素上制作鼠标滑过时的遮罩层动画效果,它可以设置遮罩层的前景色和背景色,可以制作圆形图片等,非常实用. 在线预览   源码下载 使用方法 使用该鼠标滑过插件需要引入jQuery和ns.hover.min.js文件. 1 2 <script src="js/jquery.min.js"></script> <script src="js/ns.hover.m

鼠标滑过显示图片大图效果

mnesia在频繁操作数据的过程可能会报错:** WARNING ** Mnesia is overloaded: {dump_log, write_threshold},可以看出,mnesia应该是过载了.这个警告在mnesia dump操作会发生这个问题,表类型为disc_only_copies .disc_copies都可能会发生. 如何重现这个问题,例子的场景是多个进程同时在不断地mnesia:dirty_write/2 mnesia过载分析 1.抛出警告是在mnesia 增加dump

jQuery鼠标滑过横向时间轴效果

jQuery鼠标滑过横向时间轴效果---效果图: jQuery鼠标滑过横向时间轴效果---全部代码: <!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" type="text/css" href="css/style.css"> </head> <body> <

酷炫的鼠标滑过添加遮罩层效果

今天,没错又是今天,今天做的事情还真是多呢~还修了洗衣机,貌似除了写代码不行,样样都行了呢~ 好了,言归正传.今天在浏览一个网页时,鼠标滑过它的图片,出现了一种我感觉很酷炫的效果.像这样: 自己感受下~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style&

[Axure RP] – 鼠标滑入按钮时自动下拉表单的设计示例

转:http://blog.qdac.cc/?p=2197 Axure RP 是个好东东呀,大大方便了程序员与客户之间的前期调研时的交流.不过有一些控制并没有鼠标移入和移出的操作,比如 HTML 按钮,为了模拟鼠标移入或移出时动态显示下拉列表啥的效果,我们使用了动态面板来做处理.当然了,条条大路通罗马,这条大路也许不是最佳的,仅供参考. 1.拖一个动态面板到编辑区: 2.双击添加一个状态,我们命名为“正常”,以代表鼠标没有滑过时的状态: 3.双击“正常”状态,进入正常状态编辑页面: 4.在动态面

基于CSS3鼠标滑过放大突出效果

还记得之前分享过一款CSS3图片悬停放大特效,效果非常不错.今天我们要再来分享一款类似的CSS鼠标滑过放大突出效果,只不过之前那个是图片,这次是色块,其实掌握了其CSS原理,任何网页元素都可以实现这种突出放大的CSS3动画特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="container"> <ul class="evenflow sample_1"> <li class="e

css3技巧——产品列表之鼠标滑过效果translateY(三)

这次我们使用transform的translateY值来做一个鼠标经过图片上拉,出现文字解释效果: 查看效果 <div class="main"> <div class="view view-tenth"> <figure> <div class="thumb"><img src="http://tupian.enterdesk.com/2014/lxy/2014/04/11/2/5

css3和js实现鼠标滑过图片微移动 平滑过渡

<!doctype html> <html> <head> <meta charset="utf-8"> <title>index</title> <script src="jquery-1.11.1.min.js"></script> <body> <div class="item"> <a href="&qu