透明层--遮罩层

来源:互联网 发布:数据库处理 编辑:程序博客网 时间:2024/06/05 16:25

.layer{filter:alpha(opacity=50); /* IE */ -moz-opacity:0.5; /* Moz + FF */ opacity:0.5;
      
        margin-left:-180px;position:absolute;
        z-index:99; text-align:center; padding:20px; border:1px,solid,red;
       
        }

 

<html>

<body>

<table>

<tr>

     <td style="width: 300px;height: 300px" rowspan="<#=listcount #>">
      <div id="curr_sparkline" style="width: 100%; height: 100%;">
      </div>
                        <div id="divAnswer" class="layer" style="width: 100%; height: 100%; display:none">
      </div>
     </td>

</tr>

</table>

</body>

</html> 

<script>

        $(document).ready(function () {

          //页面缩放:保持遮罩层位置和被遮罩层位置一致 

       $(window).resize(function() {
                $("#divAnswer").css("left",$("#curr_sparkline").offset().left+ 178+"px");
                $("#divAnswer").css("top",$("#curr_sparkline").offset().top+"px");
            });

 

        //显示遮罩层

        $("#ActivitySubmit").click(function () {
            var width=$("#curr_sparkline").width();
            var height=$("#curr_sparkline").height();
            $("#divAnswer").css("width",300);
            $("#divAnswer").css("height",300);
            $("#divAnswer").css("left",$("#curr_sparkline").offset().left+ 166+"px");
           $("#divAnswer").css("top",$("#curr_sparkline").offset().top+"px");
            $("#divAnswer").show();

          });

 

         });

        

       //添加连线  jqplot:页面图形插件--很强大

详细参数:http://hi.baidu.com/xuchao_duizhang/blog/item/8f41082a2877c9365343c128.html
  function SetLine(dataobj,colorobj,divobj)
  {
            if (dataobj.length < 1) {
                $("#" + divobj ).html("");
                return;
            }
   var totalHight = parseInt($("#hidcount").val()) + 1;

            $.jqplot(divobj, dataobj, {
                gridPadding: { top: 0, right: 0, bottom: 0, left: 0 },
                axes: {
                    xaxis: { showTicks: false, showTickMarks: false },
                    yaxis: { showTicks: false, showTickMarks: false, min: 4, max: totalHight*10-4 }
                },
                title: { text: '', show: false },
                seriesDefaults: {  
                    showMarker: true,
                    style: 'filledCircle',
                    color: colorobj
                },
                grid: {
                    lineWidth: 2,
                    drawGridLines: false,
                    gridLineColor: '#fffdf6',
                    background: '#ffffff',
                    borderColor: '#ffffff',
                    borderWidth: 0,
                    shadow: false
                }
            });  
  
  }

</script>

原创粉丝点击