• 新记

    • 这种网页效果是怎么实现的？

    http://rarehq.com/在这个网站里首页的那个焦点图利用鼠标和下拉条向下和向上的时候焦点图会动这个是怎么实现了？想了好几天都没有想出什么办法来实现。最好能有代码贴出来。这个比较急

    举报该文章
    相关建议   2014-07-14
    这个效果只是使用了一个遮罩层而已，设置一个层铺满全屏，z-index属性设置高于页面层（除了需要弹出的层外），把样式改成半透明，设置display属性为none(隐藏)；当点击登录链接按钮时，半透明层和弹出层的属性display切换为block就可以了。给个页面给你的看看：用的是jquery写的，你看看的时候下个jquery的框架插件下来，链接到这里去就可以看了<script src="js/jquery-1.4.2.js"></script>
    ************************************下面页面代码*****************************************************
    <!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=utf-8" />
    <title>记录</title>
    <style type="text/css">

    /* ---------------------------------------------------------------------------------------
    Default styles
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

    body,img,ul{ margin:0; padding:0; background:#EAEAEA;}

    /* ---------------------------------------------------------------------------------------
    container box
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
    .container{ width:1200px; height:1200px; background:url(images/3D_bg.jpg) repeat-x; margin:0 auto;}

    /* ---------------------------------------------------------------------------------------
    top box
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

    .top{ width:850px; height:202px; padding-top:1px; background:#fff; margin:0 auto; text-indent:80;}

    /* top shang and xia styles-----------------------------------*/

    .top .shang{width:846px; height:148px; background:url(images/3D_top_bg.jpg) repeat-x; border:1px solid #EAEAEA; margin:0 auto;}
    .top .shang p{ margin-top:60px; margin-left:70px;}
    .top .shang p .em1{ font-size:35px; color:#2F3D40; font-style:normal; }
    .top .shang p .em2{ font-size:35px; color:#D0043B; font-style:normal; margin-left:4px;}
    .top .shang p .em3{ font-size:18px; color:#CBDFE5; font-style:normal; margin-left:6px;}
    .top .xia{ width:846px; height:48px; background:url(images/3d_nav_bg.jpg) repeat-x; border:1px solid #EAEAEA; margin:1px auto; font-size:18px; line-height:48px; font-weight:normal; font-family:"宋体","黑体";}

    .active1,.active2,.active3,.active4,.active5,.active6{width:128px; height:52px; text-indent:99px; position:relative; background:url(images/btn_3d.jpg) no-repeat; top:-9px;}

    .top .active1{ left:0px;}
    .top .active2{ left:99px;}
    .top .active3{ left:199px;}
    .top .active4{ left:299px;}
    .top .active5{ left:399px;}
    .top .active6{ left:499px;}

    .top .xia span.word{ float:left; height:48px; text-indent:100; top:-53px; position:relative;cursor:pointer; width:100px; display:inline-block; text-align:center; }
    .top .xia span#home{ margin-left:14px;}
    /* ---------------------------------------------------------------------------------------
    content box
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
    .content{ width:850px; height:999px; margin:0 auto; background:#fff;}
    /* ---------------------------------------------------------------------------------------
    control box
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
    .control{ padding-top:10px;width:846px; border:1px solid #EAEAEA; margin:0 auto; height:985px; background:url(images/3D_con_bg.jpg) repeat-x;position:absolute;}
    /* ul-----------------------------------*/
    ul{ list-style:decimal; background:none; margin-left:45px; line-height:25px;}
    #list_counter{ margin-left:400px; margin-top:20px;}
    .qp_counter {margin: 10px;}
    pre {margin: 20px 0 10px 0; background:#ccc !important;padding:10px;}
    a.qp_disabled { color:#888;}
    </style>
    <link href="styles/global.css" type="text/css" rel="stylesheet"/>
    <link href="styles/thickbox.css" type="text/css" rel="stylesheet"/>
    <script src="js/jquery-1.4.2.js"></script>
    <script type="text/javascript" charset="utf-8">
    $(function(){
    $("#AddNews").click(function(){
    $("#ShowBox").show();
    $("#zhezhao").show();
    });
    $("#Cancel").click(function(){
    $("#ShowBox").hide();
    $("#zhezhao").hide();
    });
    $("#btn_clear").click(function(){
    $("#con_txt").text("");
    });
    var bheight=$(".container").height();
    var bwidth=$("body").width();
    $("#btn_sub").click(function(){
    $("#ShowBox").hide();
    $("#zhezhao").hide();
    var conVal=$("#con_txt").val();
    $("#list:eq(0)").prepend("<li>"+conVal+"</li>");
    });
    $("#zhezhao").css("opacity","0.6").css("filter","alpha(opacity=60)").css("-moz-opacity","0.6").css("width",bwidth).css("height",bheight);
    });
    </script>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    </head>
    <body>
    <div id="ShowBox" style=" display:none; width:350px; border:2px solid #ccc;background:#fff; position: absolute; top:40%; left:37%; z-index:1001;text-align:center; line-height:25px;">
    <img id="Cancel" src="images/cancel.png" width="18" height="18" style="float:right; cursor:pointer;" />
    <fieldset style="margin:25px;">
    <legend>请输入内容</legend><br>
    <form>
    <textarea id="con_txt" name="content" rows="3" cols="35" style="font-size:12px;" fun="required" required="true" onkeydown="MesCount(this.form.content,this.form.total,this.form.used,this.form.remain);" onkeyup="MesCount(this.form.content,this.form.total,this.form.used,this.form.remain);" ></textarea>
    <br><br>
    共计：<input disabled maxLength="4" name="total" size="3" value="50" />
    已用：<input disabled maxLength="4" name="used" size="3" value="0" />
    剩余：<input disabled maxLength="4" name="remain" size="3" value="50" />
    <br><br>
    <input style="cursor:pointer;" name="Login" type="button" id="btn_sub" value="  提交  ">  
    <input id="btn_clear" type="button" style="cursor:pointer;" value="  重置  ">
    </form>
    </fieldset>
    </div>
    <div id="zhezhao" style="display:none; position:absolute; z-index:1000; top:0; left:0; background:#000;">
    </div>
    <div class="container"><!--container-->
    <div class="top"><!--top-->
    <div class="shang">
    <p><em class="em1">Your</em><em class="em2">WebsiteName</em><em class="em3">"Just Another Website"</em></p>
    </div>
    <div class="xia">
    <div id="active" class="active"></div>
    <span class="word" id="home">首页</span>
    <span class="word" id="about">关于我们</span>
    <span class="word" id="resources">资源下载</span>
    <span class="word" id="services">售后服务</span>
    <span class="word" id="showcase">产品展示</span>
    <span class="word" id="contact">联系我们</span>
    <div style="float:left; text-indent:100; top:-40px; left:50px; font-size:14px; position:relative;"><!--<a style="color:#000;" href="edit.htm?height=260&width=500" title="ajax" class="thickbox">添加信息</a>--><input style="cursor:pointer;" type="button" id="AddNews" value="添加信息" /></div>
    </div>
    </div><!--top-->
    <div class="content"><!--content-->
    <div class="control"><!--control-->
    <ul id="list">
    <li>2010.05.30</li>
    </ul>
    <div id="list_counter"></div>
    </div>
    </div><!--control-->
    </div><!--content-->
    </div><!--container-->
    </body>
    </html>
    温馨提示：内容为网友见解，仅供参考
    其他看法
    第1个回答  2014-07-14
    是那个左右滚动的焦点图？？
    我没看到下拉条向上向下啊。

    类似于拖拽DIV的原理。只对DIV进行X轴的改变，Y轴不改变。

    我也吃不准你说的是不是这个效果我也不多说了。
    相似回答
    大家正在搜
    相关问题
    网站中这样的效果是怎么实现的？
    网页这个效果是怎么做到的？用js嘛？求代码
    网页跳转如何才能实现这种效果？
    html 这种页面切换效果是怎么做到的？
    请问这种网页效果是怎么样子做出来的？
    这个网页效果是怎么弄的啊?
    请问这种网页效果应该怎么实现？关于照片展示和后台更新的（急急...
    这种网页效果是如何实现的，用div盒子模型还是另外一个网页