Jquery _ jquery

Check the effect of a large image. You may have seen it when you browse the Web page. In fact, it is very easy to implement. The following is a good example. If you like it, you can refer to it. The Code is as follows:

/* View the big image */
Var screenheight = $ (window). height ();
Var screenwidth = $ (window). width ();
Var loadCSS = function (){
Var screenwidth = $ (window). width ();
Var screenheight = $ (window). height ();
$ ("P. lookBigPicture" detail .css ({"left": screenwidth * 0.2, "top": screenheight * 0.15 + $ (document). scrollTop (),
"Width": screenwidth * 0.6, "height": screenheight * 0.7 });
$ ("Img. bigImg" ).css ({"max-width" :( screenwidth * 0.6-30), "max-height": screenheight * 0.7-40 });
$ ("Img. bigImg"). load (function (){
$ ("Img. bigImg" placement .css ("top", (screenheight * 0.7-30-$ ("img. bigImg"). height () * 0.5 + 30 );
});
$ ("Img. bigImg" placement .css ("top", (screenheight * 0.7-30-$ ("img. bigImg"). height () * 0.5 + 30 );
$. Log ("$ (document). height ():" + $ (document). height ());
};
$ ("A # bigPic"). click (function (){
$. Log ("screenheight:" + screenheight + "screenwidth:" + screenwidth );
Str = $ ("img [img-size]"). attr ("src ");
$ ("Body"). append ("

"); // Gray bottom layer
$ ("Body"). append ("

View Source image x

");
$ ("P. gray" ).css ("height", $ (document). height ());
LoadCSS ();
$ ("Body" ).css ({overflow: "hidden"}); // disable the scroll bar
});
$ ("Body"). delegate ("p. gray, a. bigpicclose", "click", function (){
$ ("Body" ).css ({overflow: "visible"}); // restore the scroll bar
$ ("P. lookBigPicture"). remove ();
$ ("P. gray"). remove ();
});
// When the browser window size changes
$ (Window). resize (function (){
LoadCSS ();
});

The Code is as follows:

/***** Mask layer ****/
. Gray {
Background: #000;
Display: block;
Z-index: 1000;
Width: 100%;
Position: absolute;
Filter: alpha (opacity: 50 );
Opacity: 0.5;
Top: 0;
Left: 0;
Top: 0;
}

. LookBigPicture {
Border: #000 solid 1px;
Position: absolute;
Z-index: 2000;
Text-align: center;
Background: black;
}

. BigImg {
Margin-left: auto;
Margin-right: auto;
Position: relative;
}

. Bigpicclose {
Position: absolute;
Width: 36px;
Height: 36px;
Font-size: 0;
Z-index: 20001;
Top:-18px;
Right:-18px;
Background:
Url ("http://img.t.sinajs.cn/t5/style/images/layer/multipic_ico.png? (Id = 20131018174500 ")
0 0 no-repeat;
}

. Lookbigicn {
Display: inline-block;
Width: 12px;
Height: 12px;
Background:
Url ("http://img.t.sinajs.cn/t5/style/images/common/icon.png? (Id = 1383027536816 ")
-175px-25px no-repeat;
Vertical-align:-2px;
Margin-left: 20px;
}

. W_ico12 {
Display: inline-block;
Width: 12px;
Height: 12px;
Background:
Url ("http://img.t.sinajs.cn/t5/style/images/common/icon.png? (Id = 1383027536816 ")
-175px 0px no-repeat;
Vertical-align:-2px;
}

. ProtoPic {
Position: absolute;
Display: inline-block;
Height: 30px;
Top: 10px;
Right: 50px;
Overflow: hidden;
Cursor: pointer;
Color: # F8F8F8;
Text-shadow: 0 1px 0 rgba (0, 0, 0,. 5 );
}

The Code is as follows:

Collapse
View big chart