Mouse-over triggered window-drawing JS effect

Last Update:2016-02-18 Source: Internet

Author: User

Tags dsn

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

<! DOCTYPE html>

<title> mouse over trigger window JS effect </title>

. 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;p osition:relative;float:left;overflow:hidden;cursor:pointer;}

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

/* Matte Background */

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

/* Brief Description */

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

/* Narrowest background layer */

. 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;}

/* Current LI style */

. 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;p osition: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>

<body>

<span class= "F20 fwb" > Novice driver </span><br/><span class= "F14" > Driver Friends under 2 years of age </span>

</p>

</div>

<p class= "Hblicc_title f18 FWB" > Novice on the road, full of fright, how to give themselves and the car better protection? </p>

<span class= "fl hbliccr_title f18 FWB" > Recommended:</span>

<span class= "fl hbliccr_con F14" > Comprehensive Business Insurance and additional insurance coverage, only buy right not to buy expensive, if it is a new car, online shopping than 4S shop cost-effective AH </span>

</p>

</a>

</p>

</div>

</li>

<span class= "F20 FWB" > Female drivers </span><br/><span class= "F14" > Women drivers who need to drive independently </span>

</p>

</div>

<p class= "Hblicc_title f18 FWB" > Road situation, in case of a traffic accident, the vehicle broke down, how should I deal with? </p>

<span class= "fl hbliccr_title f18 FWB" > Recommended:</span>

<span class= "fl hbliccr_con F14" > Suitable Business Insurance and additional insurance, more comprehensive protection, while there are free road rescue services, the road situation, one step solution. </span>

</p>

</a>

</p>

</div>

</li>

<span class= "F20 fwb" > Family </span><br/><span class= "F14" > Car owners who often travel with their families </span>

</p>

</div>

<p class= "Hblicc_title f18 FWB" > Leisure time, will take family self-driving travel, buy auto insurance, in addition to the protection of the car, but also value to protect the family </p>

<span class= "fl hbliccr_title f18 FWB" > Recommended:</span>

<span class= "fl hbliccr_con F14" > Perfect Business Insurance and additional insurance, plus accidental insurance combination purchase, car insurance, a move to take care of </span>

</p>

</a>

</p>

</div>

</li>

<span class= "F20 fwb" > Test a family </span><br/><span class= "F14" > Come and poke me. Test a Test </span>

</p>

</div>

<p class= "Hblicc_title f18 FWB" > Just a few steps to help you with the most suitable insurance package <br> online car insurance, it is so simple </p>

</a>

<a href= "http://www.4008000000.com/fuwuzhongxin/chexian/xqfx/index.shtml" id= "T-ljgm4" otitle= " Come on, poke me. Test a family-auto insurance how to buy "otype=" button "target=" _blank "> Quick poke Me test a test </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 () {

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

Mouse-over triggered window-drawing JS effect

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More