谁刷方了我的头像？

    事情是这样的，前一段时间，我们做得电子班牌，近期又拿过来测试运行，测试过程中，我发现了一个问题，我负责的那个部分，刚开始加载的时候，我设置的是圆形的图像，但是左侧的通知已一刷新，出现文字滚动现象，我这里的头像就会变成方形的，十分有意思，好纳闷为什么通知一刷新，就把我小孩头像给刷放了。

                                    

1.别人的问题？

刚开始的时候，我挺解决的，同事那一块没有出来的时候，我这里是没有问题的，为什么她哪里文字开始滚动，我这里就会出错，所以一直是她的问题。没有从自己身上找原因，反而却看别人的代码。现在看来这个想法真幼稚，必要的沟通很好，但是这样的怀疑，感觉自己还是挺惭愧的。

2.找自己的漏洞和问题

首先想到的是刷新的问题，然后就在想局部刷新，div的overflow属性失效，但是尝试之后不行？难道是在一个父div中的原因，不是。或者是div的border-radic失效，最后去掉图片，测试还是不成功。最后仔细改了代码，发现成功了！

其实是这样的，代码如下

<span style="font-family:KaiTi_GB2312;font-size:18px;">           <div class ="gloryshow" style="  border-radius:100px;  position:relative;float:left; width:200px;text-align:center; min-height:200px;max-height:200px; margin-top:0px; margin-left:2px " >    
             <ul class="gloryImage1"   style="position:relative;bottom: -2px;   border-radius:100px; Height:200px; Width:200px;text-align:center;">    
                          
            </ul>  
              </div>   </span>

最关键的是 <ul>中的

<span style="font-family:KaiTi_GB2312;font-size:18px;"> border-radius:100px</span>

一般处理程序代码如下：

<span style="font-family:KaiTi_GB2312;font-size:18px;">   if (ds.Tables[0].Rows.Count == 0)
                {
                    srcglory = "<li><img width='200px' height='200px'src='/Computer/ClassBoard/Images/glory/glory.jpg'></li>";
                    descriptionglory = "荣誉墙没有设置相关内容！";

                }
                else
                {
                    string description = ds.Tables[0].Rows[0]["description"].ToString();
                    string src = ds.Tables[0].Rows[0]["glory_picture"].ToString();

                    srcglory = "<li><img width='200px' height='200px'src='" + src + "'></li>";
                    descriptionglory = description;

                }
                String json = "{\"srcglory\":\"" + srcglory + "\",\"descriptionglory\":\"" + descriptionglory + "\"}";
                context.Response.ContentType = "text/plain";
                context.Response.Write(</span>

因为我从后台传过来的是图片的路径，设置好的大小宽度，然后加载图片。而〈li>的上一次〈ul>没有设置border-radius和overflow，所以放在一块就会出现溢出的情况，导致图像最后变成方形的。

3.效果实现

最后加上简单的前台代码，局部刷新的电子班牌荣誉墙就做好了。

<span style="font-family:KaiTi_GB2312;font-size:18px;"> $(document).ready(function () {

            setInterval("startGloryRequest()", 1000);
        });
        function startGloryRequest() {
            $.ajax({
                type: "POST",
                dataType: "Json",
                url: "ashx/glory.ashx?IP=<%=ip%>",
                beforeSend: function () { },
                success: function (glory) {
                    $(".gloryImage1").empty();
                    $(".gloryImage1").append(glory.srcglory.toString());
                    $("#descriptionglory").text(glory.descriptionglory.toString());
                },
                error: function (errorThrown) {
                    //alert("荣誉墙有错误，请联系管理员！");
                }
            });
        }</span>

最后效果：

  

小结：

1，方法总比问题多，多查多尝试，或许一句话就可以解决了，要有耐心。

2，多找自己的问题，不为自己找借口