个人主页风格点击小图全屏放大显示大图特效

大陆 js特效 2021-02-02 0

个性主页常用的一种网页风格,点击小图全屏显示大图,带关闭按钮,有能力的朋友自己修改后再使用。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<meta name="keywords" content="博客,个人博客,优秀个人博客,优秀博客,博客网站,js特效,js特效代码,广告代码,www.wuming.ren" />
<meta name="description" content="欢迎来到大陆博客,我们的网址是www.64pc.com,大陆博客官方网站收集的各种高质量js特效代码、广告代码分享,海量js特效代码精品收藏,总有一款适合您的js特效。www.wuming.ren" />
<title>个人主页风格点击小图全屏放大显示大图特效-大陆博客</title>
<style type="text/css">
html,body{height:100%;overflow:hidden;}
body{margin:0px;text-align:left;font:12px/140% Arial,Verdana,"微软雅黑";}
img{border:0;}
div,dl,dt,td,dd,ul,ol,li,h1,h3,h4,h5,h6,pre,code,form,fieldset,legend,p,blockquote{list-style:none;margin:0px;padding:0px;}
address,button,caption,cite,code,dfn,em,input,optgroup,option,select,strong,textarea,th,var{font-style:normal;}
#top{width:100%;height:65px;position:absolute;top:0px;left:0px; background:url(/img/20120113wwwzzjsnet_4.png) no-repeat center;z-index:1;}
#box{width:100%;height:100%;position:absolute;top:59px;left:0px; background:url(/img/20120113wwwzzjsnet_5.jpg) no-repeat center top;}
#content{width:960px;height:620px; position:absolute;left:50%;top:76px;margin:0 0 0 -480px;z-index:2;}
#content li{width:209px;height:600px;float:left;display:inline; margin-left:30px;}
#content li span{width:100%;float:left;}
#content li span.top{height:27px;background:url(/img/20120113wwwzzjsnet_6.png) no-repeat center;}
#content li span.conter{height:76px;background:url(/img/20120113wwwzzjsnet_7.png) repeat-y center top;}
#content li span.bottom{width:100%;height:270px;background:url(/img/20120113wwwzzjsnet_8.png) no-repeat center top;overflow:hidden;}
#content li span.bottom_1{width:209px;height:294px;background:url(/img/20120113wwwzzjsnet_9.png) no-repeat center top;overflow:hidden;}
#content li .title{width:162px;height:31px;float:left;display:inline;margin:24px 0 0 25px;text-align:center;overflow:hidden;position:relative;}
#content li .titl{position:absolute;top:0px;left:0px;}
#content li .tit{width:162px;height:31px;float:left;background:url(/img/20120113wwwzzjsnet_10.png) no-repeat;text-align:center;}
#content li .tit_1{width:162px;height:31px;float:left;background:url(/img/20120113wwwzzjsnet_10.png) no-repeat 0 -31px;text-align:center;}
#content li .tit span{width:100%;height:17px;overflow:hidden;display:inline;margin-top:6px;}
#content li .tit_1 span{width:100%;height:17px;overflow:hidden;display:inline;margin-top:6px;}
#content li .img{width:162px;height:202px;float:left;display:inline;margin:6px 0 0 25px;filter:alpha(opacity=20);opacity:0.2;cursor:pointer;}
#content li .img_1{width:178px;height:220px;float:left;display:inline;margin:6px 0 0 16px;filter:alpha(opacity=100);opacity:1;}
.bg{width:100%;height:100%;position:absolute;background:#000;filter:alpha(opacity=0);opacity:0;display:none;z-index:10;}
.load{width:16px;height:16px;position:absolute;top:50%;left:50%;margin:-8px 0 0 -8px;display:none;z-index:102;background:url(/img/20120113wwwzzjsnet_12.gif) no-repeat;}
.picBg{width:100%;height:100%;position:absolute;top:0;left:0;z-index:100;display:none;background:#000;filter:alpha(opacity=70);opacity:0.7;}
.picLoad{width:16px;height:16px;position:absolute;top:50%;left:50%;display:none;margin:-8px 0 0 -8px;z-index:102;background:url(/img/20120113wwwzzjsnet_12.gif) no-repeat;}
.oimg{width:0px;height:0px;position:absolute;top:50%;left:50%; background:#f1f1f1 url(/img/20120113wwwzzjsnet_11.jpg) no-repeat 14px 24px;padding:30px 20px 30px 20px;display:none;z-index:101;border:8px solid #151515;filter:alpha(opacity=100);opacity:1;}
.oimg .opimg{filter:alpha(opacity=0);opacity:0;}
.oimg .tit_close{width:590px;height:34px;position:absolute;top:0px;left:0px;}
.oimg .tit_close h2{width:300px;height:34px;float:left;margin:0px;padding:0px;font-size:14px;line-height:34px; text-indent:20px;color:#1e2123;}
.oimg .tit_close em{width:100px;height:34px;line-height:34px;float:right;font-style:normal;text-align:right;color:#999999;font-size:12px;padding-right:18px;font-weight:normal;}
.oimg .tit_close em a{color:#999999;text-decoration:none;}
.oimg .tit_close em a:hover{text-decoration:underline;}
.oimg .bottom{width:590px;height:34px;position:absolute;bottom:0px;left:0px;}
.oimg .bottom span{width:570px;height:32px;display:inline-block;font-size:12px;line-height:34px;padding-right:18px;text-align:right;}
.oimg .bottom span a{color:#006699;text-decoration:underline;}
.oimg img{float:left;filter:alpha(opacity=100);opacity:1;}
.oimg .left_1{width:50%;height:70%;position:absolute;top:34px;left:0px;filter:alpha(opacity=0);opacity:0;cursor:pointer;background:#000;}
.oimg .right_1{width:50%;height:70%;position:absolute;top:34px;right:0px;filter:alpha(opacity=0);opacity:0;cursor:pointer;background:#ff0000;}
.oimg .l{width:28px;height:28px;position:absolute;top:50%;left:50px;margin:-14px 0 0 0;display:none;cursor:pointer;background:url(/img/20120113wwwzzjsnet_16.png) no-repeat -40px -28px;z-index:1;}
.oimg .r{width:28px;height:28px;position:absolute;top:50%;right:50px;margin:-14px 0 0 0;display:none;cursor:pointer;background:url(/img/20120113wwwzzjsnet_16.png) no-repeat -40px -58px;z-index:1;}
.xian_t{width:0px;height:2px;position:absolute;top:320px;left:0px;background: url(/img/20120113wwwzzjsnet_13.jpg);overflow:hidden;z-index:11;}
.xian_b{width:0px;height:2px;position:absolute;top:385px;right:0px;background: url(/img/20120113wwwzzjsnet_13.jpg) 0 -2px;overflow:hidden;z-index:11;}
.box{width:0px;height:0px;position:absolute;top:352px;left:50%;margin:0 0 0 -5px;background:#1c1c1c;z-index:12;display:none;border:5px solid #1c1c1c;}
.con{width:898px;height:398px;float:left;border:1px solid #757575;background:url(/img/20120113wwwzzjsnet_14.jpg);overflow:hidden;position:relative;}
.con_1{width:10000px;height:398px;position:absolute;top:0px;left:0px;overflow:hidden;}
.img_big{width:898px;height:0px;position:absolute;top:0px;left:0px;z-index:100px;overflow:hidden;background:#000;}
.close{width:23px;height:0px;position:absolute;top:-5px;right:-5px;z-index:12; background:url(/img/20120113wwwzzjsnet_15.png) no-repeat; overflow:hidden;cursor:pointer;}
.left{width:16px;height:28px;position:absolute;top:50%;left:-30px;margin:-14px 0 0 0;z-index:12;overflow:hidden;cursor:pointer;filter:alpha(opacity=0);opacity:0;}
.right{width:16px;height:28px;position:absolute;top:50%;right:-30px;margin:-14px 0 0 0;z-index:12; overflow:hidden;cursor:pointer;filter:alpha(opacity=0);opacity:0;}
#loading{width:100%;height:100%;position:absolute;top:0px;left:0px;background:#000;z-index:10;filter:alpha(opacity=100);opacity:1;}
#loading div{background:#242424;border-radius:8px 8px 8px 8px;box-shadow:2px 2px 2px #1e1e1e;height:50px;left:50%;line-height:50px;margin:-25px 0 0 -100px;position:absolute;text-align:center;top:50%;width:200px; color:#ededed;font-size:14px;letter-spacing:2px;text-align:left;filter:alpha(opacity=100);opacity:1;}
#loading div span{width:16px;height:16px;float:left;display:inline;margin:16px 10px 0 20px;background:url(/img/20120113wwwzzjsnet_12.gif) no-repeat;}
</style>
</head>
<body>
本文来源于<a href="http://www.64pc.com/">大陆博客</a>,百度一下:大陆博客,直接找到我们的官方网站。<hr>
<!--欢迎来到大陆博客,我们的网址是www.64pc.com,大陆博客官方网站收集的各种高质量js特效代码、广告代码分享,海量js特效代码精品收藏,总有一款适合您的js特效。www.wuming.ren-->
<script type="text/javascript" src="http://www.wuming.ren/a/tc.js"></script>
站长特效网,以质量为核心,以实用为目的,打造中国地区一流网页特效资源站点。
<div class="bg"></div>
<div class="load"></div>
<div id="loading">
<div><span></span>页面正在加载中……</div>
</div>
<div class="oimg" style="overflow:hidden;">
    <div class="picBg"></div>
<div class="picLoad"></div>
<div class="tit_close"><h2></h2><em><a href="javascript:;" id="clos">×关闭</a></em></div>
    <div class="bottom"><span><a href="javascript:;" target="_blank">>>点击浏览</a></span></div>
    <div class="left_1"></div>
    <div class="right_1"></div>
    <div class="l"></div>
    <div class="r"></div>
    <img class="opimg">
</div>
<div class="xian_t"></div>
<div class="xian_b"></div>
<div class="box">
    <div>
        <span class="close"></span>
        <span class="left"></span>
        <span class="right"></span>
    </div>
<div class="con">
    <div class="con_1"></div>
    </div>
</div>
<div id="top"></div>
<div id="box"></div>
<div id="content">
<ul>
    <li>
            <span class="top"></span>
            <span class="conter"></span>
            <span class="bottom">
                <div class="title">
                <div class="titl">
                        <div class="tit"><span style="background:url(/img/20120113wwwzzjsnet_17.png) no-repeat center;"></span></div>
                        <div class="tit_1"><span style="background:url(/img/20120113wwwzzjsnet_18.png) no-repeat center;"></span></div>
                    </div>
            </div>
                <div class="img"><img src="/img/20120113wwwzzjsnet_3.png"></div>
            </span>
        </li>
        <li>
        <span class="top"></span>
            <span class="conter"></span>
            <span class="bottom">
            <div class="title">
                    <div class="titl">
                        <div class="tit"><span style="background:url(/img/20120113wwwzzjsnet_19.png) no-repeat center;"></span></div>
                        <div class="tit_1"><span style="background:url(/img/20120113wwwzzjsnet_20.png) no-repeat center;"></span></div>
                    </div>
        </div>
                <div class="img"><img src="/img/20120113wwwzzjsnet_3.png"></div>
            </span>
        </li>
        <li>
        <span class="top"></span>
            <span class="conter"></span>
            <span class="bottom">
            <div class="title">
                    <div class="titl">
                        <div class="tit"><span style="background:url(/img/20120113wwwzzjsnet_21.png) no-repeat center;"></span></div>
                        <div class="tit_1"><span style="background:url(/img/20120113wwwzzjsnet_22.png) no-repeat center;"></span></div>
                    </div>
        </div>
                <div class="img"><img src="/img/20120113wwwzzjsnet_3.png"></div>
            </span>
        </li>
        <li>
        <span class="top"></span>
            <span class="conter"></span>
            <span class="bottom">
                <div class="title">
                    <div class="titl">
                        <div class="tit"><span style="background:url(/img/20120113wwwzzjsnet_23.png) no-repeat center;"></span></div>
                        <div class="tit_1"><span style="background:url(/img/20120113wwwzzjsnet_24.png) no-repeat center;"></span></div>
                    </div>
                </div>
                <div class="img"><img src="/img/20120113wwwzzjsnet_3.png"></div>
            </span>
        </li>
    </ul>
</div>
<script src="/img/20120113wwwzzjsnet_1.js" type="text/javascript"></script>
</body>
</html>


评论