jquery implementation of the picture mouse sliding appears shielding layer similar effect

Last Update:2017-01-13 Source: Internet

Author: User

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

Example

The effect chart is as follows

The code is as follows

Copy Code

<!doctype html>
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title> picture mouse sliding appears shielding layer similar effect </title>
<style>
@charset "Utf-8";
/* CSS Document base.css * *
/* Copyright, PRESTON UI Library v1.3 * *
/*
PRESTON CSS Basic

*/

/*---CSS reset---* *

body,dl,dd,h1,h2,h3,h4,h5,h6,p,form,pre,textarea{margin:0}

ol,li,ul{margin:0;padding:0}

td,th,input{padding:0}

Input,select,textarea,button{vertical-align:middle;border:none;background: #FFF; font-size:100%}

br{line-height:0;font-size:0}

Li{list-style-type:none;list-style-position:outside}

img{vertical-align:top;border:0}

Ul,ol{list-style:none}

Pre{white-space:pre-wrap;word-wrap:break-word;font-family:courier new;color: #00F; Text-align:left}

Em,i{font-weight:normal;font-style:normal}

table{border-collapse:collapse;border-spacing:0}

Td,th{word-wrap:break-word;word-break:break-all;overflow:hidden}

. Tdn:hover{text-decoration:none}

. Fl{display:inline;float:left}

. Fr{display:inline;float:right}

. Fl1{float:left}

. Fr2{float:right}

. Db{display:block}

. Di{display:inline-block}

. Din{display:inline}

. Cl{clear:left}

. Cr{clear:right}

. Cb{clear:both}

. Fwb{font-weight:bolder}

. Fwn{font-weight:normal}

. Tdn{text-decoration:none}

. Tdu{text-decoration:underline}

. Tdl{text-decoration:line-through}

. Tac{text-align:center}

. Tal{text-align:left}

. Tar{text-align:right}

. Vm{vertical-align:middle}

. Vt{vertical-align:top}

. Vb{vertical-align:bottom}

. re{position:relative}

. ov{overflow:hidden;zoom:1}

. zo{zoom:1}

. Wsn{white-space:nowrap}

. Wwb{word-wrap:break-word;word-break:normal}

. cf{zoom:1/* no width and IE */}

. Cf:after{content: '. '; * FF opear Chrome */visibility:hidden;/* Clear content/clear:both;/* FF opear Chrome/display:block;/* FF opear CHR ome * * height:0/* FF opear Chrome/}

. eq{margin-bottom:-30000px;padding-bottom:30000px}

/*---

HTML {

Filter:gray;

}

---*/

Body{color: #707070; font:12px/1.6em Tahoma,helvetica,arial,sans-serif;font-size:12px;text-align:center}

A{color: #707070; text-decoration:none;outline:none/*ff*/}

A:hover{color: #70A80D; Text-decoration:none}

#box {width:950px;margin:0 auto;background-color: #FFF}

#box p.mt10{margin-top:50px}

/*---basic end---* *

* *---ñurlrepeat---* *

. bgbtn,.inputsearch,.titleleft,.titleright,.mainlist Li, #mainContent dd.maincontentlast,

. codebtn,.linkbottom,.link H2,.link Li,.link li A,.link dl, #picSlideNum Li, #picSlideNum li:hover,

#picSlideNum li.active{/*------* * background:url (... /images/basicbg.png) No-repeat}

#headerTop,. title{/*------/background:url (... /images/basicbg.png) Repeat-x}

/*---header---* *

#header {Width:950px;text-align:left}

#header span{font-size:12px}

#header. index{/*---headerҳ---*/margin-bottom:10px;background:url (... /images/header.gif) no-repeat Center Top}

#headerTop {width:950px;height:23px;background-position:0 0}

#headerTop ul{width:950px;margin:0 Auto}

#headerTop li{display:inline;float:right;line-height:23px;margin-right:10px}

#header h1{/*---logo---* * display:block;float:left;width:200px;height:30px;margin-top:30px;margin-left:20px; Background:url (.. /images/logo.gif) No-repeat left Top}

#header H1 a{display:block;width:200px;height:30px}

. dis{margin-top:45px}

* *---NAV---* *

#nav {display:inline;float:left;height:30px;margin-top:40px}

#nav li{display:inline;float:left;height:30px;margin-right:50px}

#nav Li A{display:block;float:left;height:20px;padding-top:3px;text-align:center}

#nav Li A:hover{display:block;text-decoration:none}

#curTab {/*---ʽ---* * display:block;height:20px;margin:0 auto;padding-top:3px;padding-left:5px;padding-right:5px; Background: #70A80D; text-decoration:none;border-bottom:solid 2px #70A80D; color: #FFF; Font-weight:bolder}

/*---search---* *

#search {display:inline;float:right;margin-top:30px;margin-right:20px}

#search li{display:inline;float:left;margin-right:5px}

. bgbtn{width:20px;height:20px;margin-top:5px;background-position:0 -100px}

. inputsearch{width:177px;line-height:16px;padding-top:4px;padding-bottom:4px;padding-left:8px; Background-position:-11px-60px;color: #BBB}

/*---title---*//*------* *

. title{width:950px;height:36px;background-position:0 -23px}

. titleleft{display:inline;float:left;width:5px;height:36px;background-position:0 -60px}

. titleright{display:inline;float:right;width:5px;height:36px;background-position:-5px-60px}

. Title Li{display:inline;float:left;width:120px;height:36px;line-height:36px;margin-left:10px;text-align:left}

. title Li Span{color: #000}

* *---footer---* *

#footer {width:950px;margin-top:10px;border-top:solid 1px #D5D5D5}

#wrap {display:inline;float:left;height:80px;margin-top:10px;margin-left:10px}

#wrap p{display:inline;float:left;margin-bottom:10px;margin-right:10px}

#wrap. Visit{clear:left}

#friendlinks {display:inline;float:right;height:20px;margin-top:10px}

#friendlinks li{display:inline;float:right;margin-right:10px}

#friendlinks li A{color: #CCC}

#friendlinks li A:hover{color: #70A80D}

#footlogo {display:inline;clear:right;float:right;width:182px;height:27px;margin-right:10px;margin-bottom:5px; Text-align:right}

#footlogo A{color: #CCC}

/*---display---* *

#display {Display:inline}

* *---ͼƭչʾ---* *

#picSlide {display:inline;float:left;clear:both;width:634px;height:256px;margin:20px 0 20px 20px;padding:2px;o Verflow:hidden;position:relative;border:solid 1px #DADADA}

#picSlide Ul#picslideshow{list-style:none;height:256px;width:3050px;position:absolute}

#picSlide Ul#picslideshow li{float:left;height:256px}

#picSlide ul#picslideshow Li Img{display:block}

#picSlideNum {position:absolute;bottom:0;left:0;width:640px;height:23px;padding-top:7px;padding-left:550px; Background:url (.. /images/numbg.png) No-repeat}

#picSlideNum li{float:left;background-position:-125px-100px;width:15px;height:15px;line-height:15px;color:# 3399FF;TEXT-ALIGN:CENTER;CURSOR:POINTER;MARGIN-RIGHT:5PX}

#picSlideNum Li:hover, #picSlideNum li.active{background-position:-110px-100px;color: #FFF}

/*--- ---*/

/*--- ---*/

. picslidelist{display:inline;float:right;width:260px;height:262px;margin-top:20px;margin-right:20px}

. Picslidelist dl{width:258px;height:78px;margin-top:10px;margin-bottom:10px}

. picslidelist Dt{font-weight:bolder;color: #70AB08; text-indent:10px}

. picslidelist Dd{color: #aaa;p adding-left:10px}

UL.SHOW{HEIGHT:140PX;MARGIN-TOP:30PX;MARGIN-LEFT:5PX}

Ul.show li{display:inline;float:left;margin-left:13px;margin-right:10px}

Ul.show li img{width:280px;height:128px;padding:3px;border:solid 1px #DADADA}

Ul.show li A:hover{display:block;background-color: #97C528}

/*---main---* *

#main {width:950px}

/*

#main img {/*------*

Background:url (.. /images/photo/imgbg.gif) No-repeat Center Center;

}

*/

Li.keepright{display:inline;float:left;width:300px;margin-left:505px;text-align:right}

* *---mainlistҳ ƽб---* *

. mainlist{display:inline;float:left;width:434px;margin-top:20px;border-right:solid 1px #EEE; Text-align:left}

. Mainlist li{height:24px;line-height:24px;margin-left:10px;background-position:-193px-116px;text-indent:15px}

. mainlist Li A:hover{font-weight:bold}

. Present{display:inline;float:right;width:510px;height:150px;margin-top:15px;background:url (. /images/logo01.gif) no-repeat 10px Top}

. Present Li{line-height:24px;margin-left:130px;margin-right:20px;text-align:justify;text-indent:2em}

. Present H2{font-size:12px;text-align:left;padding-left:140px;color: #70AB08}

. Present Table{line-height:22px;margin-left:120px;text-align:left}

. Present Table Img{display:none}

. Snap_icon{display:none}

* *---recommend---* *

. recommend{width:950px;margin-top:10px;margin-bottom:10px}

. recommend H2{font-size:12px;color: #333; text-align:left;text-indent:20px}

. Recommend p{width:910px;margin:0 Auto;margin-top:5px;line-height:1.8em;text-align:justify;color: #808080}

* *---maincontent---* *

#mainContent {Display:inline;float:left;width:740px;min-height:560px;height:auto!important;height:560px; margin-top:10px}

#mainContent dl{width:730px;height:105px;margin:10px Auto;line-height:1.6em;background:url (.. /images/linebg.gif) repeat-x Center Bottom}

#mainContent dt{margin-bottom:5px;text-indent:10px;text-align:left;color: #11940A; color: #70AB08}

#mainContent DT A{color: #70AB08}

#mainContent dd{width:720px;height:50px;margin:0 auto;text-align:justify;text-indent:2em;color: #ababab}

#mainContent dd.maincontentlast{/*------* * width:50px;height:20px;float:right;background-position:-193px-120px; TEXT-INDENT:15PX}

#pages {text-align:center;margin:0 auto;margin-top:20px}

#pages a{width:30px;height:20px;margin-left:10px;font-size:12px}

#mainContent h3{margin-top:20px;font-size:12px;color: #70AB08; text-align:left;text-indent:15px}

#mainContent h4{margin-top:5px;margin-bottom:5px;font-size:12px;font-weight:normal;color: #D1D1D1; text-align: LEFT;TEXT-INDENT:15PX}

#mainContent p{margin:10px 15px;text-align:left;line-height:1.6em}

#mainContent P A{color: #3399FF}

#mainContent P img{max-width:100% _width:expression (This.width > 700:true);

#mainContent P.img{width:740px;margin:0;background-color: #70AB08}

#mainContent p.img img{width:736px;text-align:left;border:solid 2px #F2F2F2}

#mainContent p.ptext{font-weight:bolder;margin-top:25px}

/*--- ---*/

#mainContent P.code{text-indent:0;text-align:left}

. textatea{width:600px;height:180px;margin:0 Auto;background-color: #FAFAFA; border:solid 1px #DADADA; font-size:12px ; color: #707070}

. Btn{margin-left:15px;margin-bottom:20px;text-align:left;color: #BBB}

* HTML. CODEBTN{PADDING-TOP:3PX}

. codebtn{display:inline-block;width:70px;height:20px;padding-top:0;background-position:-25px-100px;color:# 707070;font-size:12px;text-align:center}

* *---caseslist---* *

#casesList {width:950px}

. caseslistleft{display:inline;float:left;width:460px}

. caseslistright{display:inline;float:right;width:460px}

#casesList dl{display:inline;float:left;margin-top:30px;margin-left:10px;width:440px;border-bottom:solid 1px # Dadada}

#casesList Dt{width:214px;display:inline;float:left}

#casesList DT IMG{WIDTH:208PX;PADDING:3PX}

#casesList DT A{display:block}

#casesList DT A:hover{display:block;background-color: #97C528}

#casesList dd{width:210px;float:left;margin-left:10px;margin-top:5px;margin-bottom:10px;text-align:left;color:# 999}

#casesList dd A{color: #000}

#casesList dd A:hover{color: #70AB08}

#casesList dd Span{text-align:left;margin-left:10px;font-size:10px;font-family:arial;color: #D1D1D1}

. side{float:right;left:50%}

/*---Link---*/*------*

. link{width:193px;margin-top:20px}

linkbottom{/*---ײ---/width:193px;height:10px;background-position:-1px-454px/*------*/}

. LINK h2{/*------/width:193px;height:24px;padding-top:10px;background-position:-1px-192px;/*------* * text-align : Left;text-indent:10px;font-size:12px;color: #000}

. Link ul{width:193px;margin:0 Auto}

. Link Li{width:193px;height:24px;line-height:24px;background-position:-1px-195px;text-align:left;text-indent : 5px}

. Link Li a{display:block;height:24px;margin-left:5px;background-position:-193px-156px;text-indent:12px}

. LINK dl{/*------/width:193px;height:120px;/*------* * * background-position:-1px-195px}

. Link dt{width:170px;height:94px;margin:0 Auto}

. LINK dt img{width:161px;height:82px;padding:3px;border:solid 1px #DADADA}

. Link DT A{display:block}

. LINK dt a:hover{display:block;background-color: #97C528}

. Link dd{width:170px;margin:0 auto;text-align:left;text-indent:5px}

. Link A{color: #999}

. Link A:hover{color: #70AB08}

* Code_pre * *

. Code_pre{background: #EEEEEE; border:1px dashed #CCCCCC; margin:5px 15px;padding:10px}

. Cor_2{color:green}

. Cor_3{color: #ddd}

*html{background-image:url (About:blank); background-attachment:fixed}

Style[contenteditable]{display:block;padding:0.6em 0.8em;margin:5px 15px;background: #EEEEEE; border:1px dashed Cccccc;font-family:courier new;text-align:left;white-space:pre-wrap;word-wrap:break-word;font-size:12px;color:# 00F}

. Judge_ie{display:none;display:block9;*display:block}

. Judge{display:none9;*display:none}

</style>

<style type= "Text/css" >

* Poab * *

. poab_out{height:459px}

. Poab{position:absolute;overflow:hidden}

. Poab_blank{display:block;width:100%;height:100%;background: #000;p Osition:absolute;top:0;left:0;z-index:2;o Pacity:0.0;filter:alpha (opacity=0)}

. Ab01,.ab01 IMG{WIDTH:276PX;HEIGHT:459PX}

. ab02{left:281px}

. AB02,.AB02 IMG{WIDTH:453PX;HEIGHT:277PX}

. ab03{top:282px;left:281px}

. AB03,.AB03 IMG{WIDTH:224PX;HEIGHT:177PX}

. ab04{top:282px;left:510px}

. Ab04,.ab04 IMG{WIDTH:224PX;HEIGHT:177PX}

. ab05{left:739px}

. Ab05,.ab05 IMG{WIDTH:225PX;HEIGHT:179PX}

. ab06{top:184px;left:739px}

. Ab06,.ab06 img{width:225px;height:275px}

</style>

</head>

Example

The effect is as follows

The code is as follows

Copy Code

<!doctype html>

<html>

<head>

<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>

<title> picture mouse sliding appears shielding layer of similar effect-fei ke studio </title>

<link rel= "stylesheet" href= "/style/basic.css" type= "Text/css"/>

<style type= "Text/css" >

* Poab * *

. br_3{display:inline-block;border-style:dotted dotted dotted solid;border-color:transparent transparent transparent #fff; Border-width:12px;width:0;height:0;font-size:0;overflow:hidden}

. Poab{position:absolute;overflow:hidden}

. Ab01{width:385px;height:143px;background: #5AB0E7}

. ab02{top:148px;width:385px;height:154px}

. AB02 img{width:385px;height:154px}

. Ab03{top:307px;width:385px;height:171px;background: #FF7373}

. ab04{left:390px;width:231px;height:302px}

. Ab04 img{width:231px;height:302px}

. Ab05{top:307px;left:390px;width:231px;height:171px;background: #6DD2B6}

. Ab06{left:626px;width:167px;height:167px;background: #FF7373 url (.. /images/ad06.png) No-repeat}

. ab07{left:798px;width:166px;height:167px}

. Ab07 IMG{WIDTH:166PX;HEIGHT:167PX}

. Ab08{top:172px;left:626px;width:338px;height:130px;background: #6DD2B6 url (.. /images/ad08.png) No-repeat}

. Ab09{top:307px;left:626px;width:167px;height:171px;background: #5AB0E7 url (.. /images/ad09.png) No-repeat}

. Ab10{top:307px;left:798px;width:166px;height:171px;background: #FF7373 url (.. /images/ad10.png) No-repeat}

. Edu_top_bg{height:478px;background: #EEEEEE;p osition:absolute;width:100%;left:0;_left:50%;_margin-left:-482px; Z-index:-2}

. Tips_tags{background: #f9f9f9; border:solid 1px #C1E0C9; border-radius:4px}

. ico_num_1,.ico_num_2{display:inline-block;width:33px;height:33px;background-position:-141px-856px; Vertical-align:middle}

. ico_num_2{background-position:-182px-856px}

. btn_tips_tags{display:inline-block;width:132px;height:35px;background-position:0 -854px;vertical-align:middle}

. poab_blank{position:absolute;bottom:-120%;left:0;width:100%;height:100%}

. Poab_blank_shield{position:absolute;width:100%;height:100%;background: #000; opacity:0.6;-moz-opacity:0.6;- Khtml-opacity:0.6;filter:alpha (OPACITY=60)}

. poab_blank_title{position:relative;z-index:2;height:100%;text-align:center;font-size:14px}

. Poab_middle{display:inline-block;vertical-align:middle}

. Poab_middle_patch{display:inline-block;height:100%;vertical-align:middle}

</style>

</head>

<body>

<div class= "Poab_out" style= "HEIGHT:478PX;" >

<div class= "Poab ab01" >

<a href= "#" title= "class=" DB cor_5 fy tdn cp "><span class=" db pa20 Pb10 "> Flight studio </span><span class=" Lh4 fz20 mar3 di "> Mouse hover will be effective, hurry up </span>

<div class= "Poab_blank" >

<p class= "Poab_blank_shield" ></p>

<p class= "Poab_blank_title" >

<span class= "Poab_middle_patch" ></span>

<span class= "Cor_5 poab_middle" > I'm here for a new connection </span>

</p>

</div>

</a>

</div>

<div class= "Poab ab02" >

<a href= "#" title= "" class= "CP" ><img src= "images/img03.jpg" alt= "Descriptive text"/>

<div class= "Poab_blank" >

<p class= "Poab_blank_shield" ></p>

<p class= "Poab_blank_title" >

<span class= "Poab_middle_patch" ></span>

<span class= "Cor_5 poab_middle" > I'm here for a new connection </span>

</p>

</div>

</a>

</div>

<div class= "Poab ab03" >

<a href= "#" title= "class=" DB cor_5 fy tdn cp "><span class=" db pa20 Pb10 "> Flight studio </span><span class=" Lh4 fz20 mar3 di "> Mouse hover will be effective, hurry up </span>

<div class= "Poab_blank" >

<p class= "Poab_blank_shield" ></p>

<p class= "Poab_blank_title" >

<span class= "Poab_middle_patch" ></span>

<span class= "Cor_5 poab_middle" > I'm here for a new connection </span>

</p>

</div>

</a>

</div>

<div class= "Poab ab04" >

<a href= "#" title= "class=" DB cor_5 fy tdn cp "><img src=" images/img06.jpg "alt=" Descriptive text "/>

<div class= "Poab_blank" >

<p class= "Poab_blank_shield" ></p>

<p class= "Poab_blank_title" >

<span class= "Poab_middle_patch" ></span>

<span class= "Cor_5 poab_middle" > I'm here for a new connection </span>

</p>

</div>

</a>

</div>

<div class= "Poab ab05" >

<a href= "#" title= "class=" DB cor_5 fy tdn cp "><span class=" FZ30 db pa20 pb10 "> Fei ke studio </span><span cla ss= "Lh4 fz20 mar3 di" > Mouse hover will be effective, hurry up </span>

<div class= "Poab_blank" >

<p class= "Poab_blank_shield" ></p>

<p class= "Poab_blank_title" >

<span class= "Poab_middle_patch" ></span>

<span class= "Cor_5 poab_middle" > I'm here for a new connection </span>

</p>

</div>

</a>

</div>

<div class= "Poab ab06" >

<a href= "#" title= "class=" DB cor_5 fy TDN tac cp "><span class=" di mt20 Pa30 "> Flight Studio </span>

<div class= "Poab_blank" >

<p class= "Poab_blank_shield" ></p>

<p class= "Poab_blank_title" >

<span class= "Poab_middle_patch" ></span>

<span class= "Cor_5 poab_middle" > I'm here for a new connection </span>

</p>

</div>

</a>

</div>

<div class= "Poab ab07" >

<a href= "#" title= "" class= "CP" ><img src= "images/img09.jpg" alt= "Descriptive text"/>

<div class= "Poab_blank" >

<p class= "Poab_blank_shield" ></p>

<p class= "Poab_blank_title" >

<span class= "Poab_middle_patch" ></span>

<span class= "Cor_5 poab_middle" > I'm here for a new connection </span>

</p>

</div>

</a>

</div>

<div class= "Poab ab08" >

<a href= "#" title= "class=" DB cor_5 fy TDN tac cp "><span class=" fz42 di mt15 pa20 "> Flight Studio </span>

<div class= "Poab_blank" >

<p class= "Poab_blank_shield" ></p>

<p class= "Poab_blank_title" >

<span class= "Poab_middle_patch" ></span>

<span class= "Cor_5 poab_middle" > I'm here for a new connection </span>

</p>

</div>

</a>

</div>

<div class= "Poab ab09" >

<a href= "#" title= "class=" DB cor_5 fy TDN tac cp "><span class=" di mt20 Pa30 "> Flight Studio </span>

<div class= "Poab_blank" >

<p class= "Poab_blank_shield" ></p>

<p class= "Poab_blank_title" >

<span class= "Poab_middle_patch" ></span>

<span class= "Cor_5 poab_middle" > I'm here for a new connection </span>

</p>

</div>

</a>

</div>

<div class= "Poab ab10" >

<a href= "#" title= "class=" DB cor_5 fy TDN tac cp "><span class=" di mt20 Pa30 "> Flight Studio </span>

<div class= "Poab_blank" >

<p class= "Poab_blank_shield" ></p>

<p class= "Poab_blank_title" >

<span class= "Poab_middle_patch" ></span>

<span class= "Cor_5 poab_middle" > I'm here for a new connection </span>

</p>

</div>

</a>

</div>

</div>

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

jquery implementation of the picture mouse sliding appears shielding layer similar effect

Contact Us

What's Trending

Top 10 Tags

Top 10 Keywords

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support

jquery implementation of the picture mouse sliding appears shielding layer similar effect

Contact Us

What's Trending

Top 10 Tags

Top 10 Keywords

Trending Topic

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support