liangsequn

Web编程爱好者

导航

javascript 模拟图片下拉框

html页面
<script>
var dropShow=false
var currentID
function dropdown(el){
if(dropShow){
dropFadeOut()
}else{
currentID=el
el.style.visibility="visible"
dropFadeIn()
}
}
function dropFadeIn(){//选单淡入的效果
if(currentID.filters.alpha.opacity<100){
currentID.filters.alpha.opacity+=20
fadeTimer=setTimeout("dropFadeIn()",50)
}else{
dropShow=true
clearTimeout(fadeTimer)
}
}
function dropFadeOut(){//选单淡出的效果
if(currentID.filters.alpha.opacity>0){
clearTimeout(fadeTimer)
currentID.filters.alpha.opacity-=20
fadeTimer=setTimeout("dropFadeOut()",50)
}else{
dropShow=false
currentID.style.visibility="hidden"
}
}
function dropdownHide(){
if(dropShow){
dropFadeOut()
dropShow=false
}
}
function hiLight(el){//高亮度显示指标位置
if(dropShow){
for(i=0;i<el.parentElement.childNodes.length;i++){
el.parentElement.childNodes(i).className="link_record0"
}
el.className="link_record1"
}
}
function CheckMe(el){//替换显示内容
document.all.text1.innerText=el.innerText
}
document.onclick=dropdownHide
        </script>
    </HEAD>
    <body MS_POSITIONING="GridLayout">
        &nbsp;
        <div style="PADDING-RIGHT:10px;PADDING-LEFT:10px;PADDING-BOTTOM:10px;PADDING-TOP:10px;BORDER-BOTTOM:red 2px solid">模拟下拉框</div>
        <form id="form1" onsubmit="alert(city.value)" runat="server">
            <BR>
            &nbsp;&nbsp;&nbsp;&nbsp;
            <div class="link_box" onselectstart="return false" style="WIDTH: 100px">
                <table width="100%">
                    <tr>
                        <td width="100%">
                            <div class="link_head" onclick="dropdown(value1)"><table>
                                    <tr>
                                        <td>
                                            <div class="link_text"><nobr><label id="text1">请选择？</label></nobr></div>
                                        </td>
                                        <td><div onmouseup="this.className='link_arrow0'" class="link_arrow0" onmousedown="this.className='link_arrow1'"
                                                onmouseout="this.className='link_arrow0'">6</div>
                                            </NOBR>
                                            <DIV></DIV>
                                        </td>
                                    </tr>
                                </table>
                            </div>
                        </td>
                        <td align="right" width="22">
                        </td>
                    </tr>
                </table>
            </div>
            <div class="link_value" id="value1" style="WIDTH: 500px; HEIGHT: 300px">
                <asp:datagrid id="DataGrid1" runat="server" AutoGenerateColumns="False" Font-Size="12px" Width="100%"
                    ShowHeader="False">
                    <columns>
                        <asp:boundcolumn DataField="img" SortExpression="img" DataFormatString="<img src='../Stuworld/{0}' align='absmiddle'> {0}"></asp:boundcolumn>
                        <asp:boundcolumn DataField="Jbxx_Mc" SortExpression="Jbxx_Mc" HeaderText=""></asp:boundcolumn>
                    </columns>
                </asp:datagrid>
            </div>
            
        private void DataGrid1_ItemDataBound(object sender,System.Web.UI.WebControls.DataGridItemEventArgs e)
        {

            if( e.Item.ItemIndex != -1 )
            {
                e.Item.Attributes.Add("onmouseover", "this.bgColor='#C1D2EE'");
                e.Item.Attributes.Add("onclick", 
                    "document.all.text1.innerText=this.cells[0].innerText;document.all.form1.city.value=this.cells[0].innerText;");
                if (e.Item.ItemIndex % 2 == 0 )
                {
                    e.Item.Attributes.Add("bgcolor", "#FFFFFF");
                    e.Item.Attributes.Add("onmouseout", "this.bgColor=document.getElementById('DataGrid1').getAttribute('singleValue')");
                }
                else
                {
                    e.Item.Attributes.Add("bgcolor", "oldlace");
                    e.Item.Attributes.Add("onmouseout", "this.bgColor=document.getElementById('DataGrid1').getAttribute('oldValue')");
                }
            }
            else
            {
                DataGrid1.Attributes.Add("oldValue", "oldlace");
                DataGrid1.Attributes.Add("singleValue", "#FFFFFF");
            }
        }

posted on 2006-08-16 19:35  昙花一现  阅读(635)  评论(0)    收藏  举报