鼠標滑過觸發拉窗式JS效果

時間 2020-12-31

標籤 javascript css html java app ide 測試 this url 欄目 JavaScript 简体版

原文原文鏈接

<!DOCTYPE html>javascript

<html>css

<head>html

<title>鼠標滑過觸發拉窗式JS效果</title>ide

.f44{font-size:44px;}url

.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_p_w_picpaths/4008000000/v20/index/hbli_ico_bg.png) no-repeat;_background:url(http://pimg1.4008000000.com/app_p_w_picpaths/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_p_w_picpaths/4008000000/v20/index/hb_li_bg1.jpg) top right no-repeat;}

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

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

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

</style>

</head>

<body>

<span class="f20 fwb">新手司機</span><br /><span class="f14">駕齡在2年如下的車主朋友</span>

</p>

</div>

<p class="hblicc_title f18 fwb">新手上路，滿滿都是驚嚇，如何給本身和愛車更好的保障？</p>

<span class="fl hbliccr_con f14">全面商業險及附加險保障，只買對不買貴，若是是新車，網上買還比4S店划算啊</span>

</p>

</a>

</p>

</div>

</li>

<span class="f20 fwb">女性司機</span><br /><span class="f14">需獨立駕駛出行的女性司機</span>

</p>

</div>

<p class="hblicc_title f18 fwb">路上情況多，萬一發生了交通意外、車輛拋錨，我該如何處理？</p>

<span class="fl hbliccr_con f14">合適的商業險及附加險，更加全面的保障，同時還有免費道路救援服務，路上狀況，一步解決。</span>

</p>

</a>

</p>

</div>

</li>

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

</p>

</div>

<p class="hblicc_title f18 fwb">閒暇時，會帶上家人自駕出行，買車險，除了對車的保障，還看重對家裏人的保護</p>

<span class="fl hbliccr_con f14">完善的商業險及附加險保障，加上意外險的組合購買，保車保人，一招搞掂</span>

</p>

</a>

</p>

</div>

</li>

<span class="f20 fwb">測試一族</span><br /><span class="f14">快來戳我測一測</span>

</p>

</div>

<p class="hblicc_title f18 fwb">只需幾步，幫您搭配最合適的險種套餐<br>網上買車險，就是這麼簡單</p>

</a>

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

(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(){