新人求解答，实现这种js遮罩谁有办法或者有相似的例子

解决方案 »

  1.   

    遮照层，其实就是放一个透明的div在上面。设置它的opacity，z-index 你用jquery去实现吧。移置性好。
      

  2.   


    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>test</title>
        <script type="text/javascript" src="../jquery-1.4.4.min.js"></script>
        <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.8.0.min.js" type="text/javascript"></script>
        <style type="text/css">
            #showimg {
                width: 730px;
                margin: 30px 0;
            }
            #showimg img {
                width: 150px;
                height: 150px;
                margin:0 20px 20px 0;
                border: solid 2px #CCC; overflow:hidden; display:inline-block;
            }
        </style>
    </head>
    <body>
    <div id="showimg">
        <img src="http://www.jquery001.com/images/demo/2010/anyixuan1.jpg" alt="安以轩" style="opacity: 1;">
        <img src="http://www.jquery001.com/images/demo/2010/anyixuan2.jpg" alt="安以轩" style="opacity: 1;">
        <img src="http://www.jquery001.com/images/demo/2010/anyixuan3.jpg" alt="安以轩" style="opacity: 1;">
        <img src="http://www.jquery001.com/images/demo/2010/anyixuan4.jpg" alt="安以轩" style="opacity: 1;">
        <img src="http://www.jquery001.com/images/demo/2010/anyixuan5.jpg" alt="安以轩" style="opacity: 1;">
        <img src="http://www.jquery001.com/images/demo/2010/anyixuan6.jpg" alt="安以轩" style="opacity: 1;">
        <img src="http://www.jquery001.com/images/demo/2010/anyixuan7.jpg" alt="安以轩" style="opacity: 1;">
        <img src="http://www.jquery001.com/images/demo/2010/anyixuan8.jpg" alt="安以轩" style="opacity: 1;">
    </div>
    <script type="text/javascript">
        $('#showimg img').hover(function(){
            $(this).siblings().stop().fadeTo(500, 0.5);
        }, function(){
            $(this).siblings().stop().fadeTo(500, 1);
        });
    </script>
    </body>
    </html>
      

  3.   

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
     <head>
      <title> New Document </title>
      <meta name="Generator" content="EditPlus">
      <meta name="Author" content="">
      <meta name="Keywords" content="">
      <meta name="Description" content="">
      <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
      <!--<script type="text/javascript" src="jquery.livequery.js"></script>-->
      <script type="text/javascript">
      <!--
    $(document).ready(function(){
    $("#but1").click(function(){
    var w = $(window).width();
    var h = $(window).height();
    if(!$("#divhd")[0]){
    $("<div id='divhd' style='position:absolute;left:0px;top:0px;background-color:#cfcfcf;width:" + w + "px;height:" + h + "px;'><button id=divbut>关闭层</button></div>").css("opacity",0.5).appendTo($("body"));
    $("#divbut").click(function(){
    $(this).parent().hide();
    });
    }else{
    $("#divhd").show();
    }
    });

    });
      //-->
      </script>
     </head> <body>
      <button id="but1">出来遮照层</button>  <div id="div1">
    有遮照层就输入不了：<input>
      </div>
     </body>
    </html>