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

9个月前 (03-02 19:35)阅读回复0
大陆
大陆
  • 管理员
  • 发消息
  • 注册排名1
  • 经验值5294
  • 级别管理员
  • 主题1058
  • 回复2
楼主

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

<!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特效,网页特效,www.wuming.ren">
<meta name="description" content="欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。">
<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/20240302_www_wuming_ren_19.png) no-repeat center;z-index:1;}
#box{width:100%;height:100%;position:absolute;top:59px;left:0px; background:url(/img/20240302_www_wuming_ren_20.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/20240302_www_wuming_ren_21.png) no-repeat center;}
#content li span.conter{height:76px;background:url(/img/20240302_www_wuming_ren_22.png) repeat-y center top;}
#content li span.bottom{width:100%;height:270px;background:url(/img/20240302_www_wuming_ren_23.png) no-repeat center top;overflow:hidden;}
#content li span.bottom_1{width:209px;height:294px;background:url(/img/20240302_www_wuming_ren_24.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/20240302_www_wuming_ren_25.png) no-repeat;text-align:center;}
#content li .tit_1{width:162px;height:31px;float:left;background:url(/img/20240302_www_wuming_ren_25.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/20240302_www_wuming_ren_26.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/20240302_www_wuming_ren_26.gif) no-repeat;}
.oimg{width:0px;height:0px;position:absolute;top:50%;left:50%; background:#f1f1f1 url(/img/20240302_www_wuming_ren_27.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/20240302_www_wuming_ren_31.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/20240302_www_wuming_ren_31.png) no-repeat -40px -58px;z-index:1;}
.xian_t{width:0px;height:2px;position:absolute;top:320px;left:0px;background: url(/img/20240302_www_wuming_ren_28.jpg);overflow:hidden;z-index:11;}
.xian_b{width:0px;height:2px;position:absolute;top:385px;right:0px;background: url(/img/20240302_www_wuming_ren_28.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/20240302_www_wuming_ren_29.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/20240302_www_wuming_ren_30.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/20240302_www_wuming_ren_26.gif) no-repeat;}
</style>
</head>
<body>
<a href="https://www.wuming.ren">武鸣人</a>，各种信息资源免费发布，分享励志语录经典短句，减肥健身常识，各种js特效代码。网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)<hr>
<!--欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。-->
<script type="text/javascript" src="https://www.wuming.ren/ad/tc.js"></script>
<script type="text/javascript" src="https://www.wuming.ren/ad/a.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/20240302_www_wuming_ren_32.png) no-repeat center;"></span></div>
                        <div class="tit_1"><span style="background:url(/img/20240302_www_wuming_ren_33.png) no-repeat center;"></span></div>
                    </div>
            </div>
                <div class="img"><img src="/img/20240302_www_wuming_ren_34.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/20240302_www_wuming_ren_35.png) no-repeat center;"></span></div>
                        <div class="tit_1"><span style="background:url(/img/20240302_www_wuming_ren_36.png) no-repeat center;"></span></div>
                    </div>
        </div>
                <div class="img"><img src="/img/20240302_www_wuming_ren_34.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/20240302_www_wuming_ren_37.png) no-repeat center;"></span></div>
                        <div class="tit_1"><span style="background:url(/img/20240302_www_wuming_ren_38.png) no-repeat center;"></span></div>
                    </div>
        </div>
                <div class="img"><img src="/img/20240302_www_wuming_ren_34.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/20240302_www_wuming_ren_39.png) no-repeat center;"></span></div>
                        <div class="tit_1"><span style="background:url(/img/20240302_www_wuming_ren_40.png) no-repeat center;"></span></div>
                    </div>
                </div>
                <div class="img"><img src="/img/20240302_www_wuming_ren_34.png"></div>
            </span>
        </li>
    </ul>
</div>
<script src="/img/20240302_www_wuming_ren_3.js" type="text/javascript"></script>
</body>
</html>


赞0
踩0
☆收藏0

本文来自武鸣人网站，转载请注明出处

本文地址：https://www.wuming.ren/a/130.html

放大全屏
回帖

个人主页风格点击小图全屏放大显示大图特效 期待您的回复！

取消
载入表情清单……
载入颜色清单……
插入网络图片

取消确定

图片上传中
编辑器信息
提示信息