新人请教两个js问题.1-如何能触发一个事件让一个按钮显示出被点击了一下的动画?2-input file透明,用其他按钮遮盖,IE7下点击有光标闪动如何解决?

inputcss兼容性IE7

解决方案 »

  1.   

    写在标题里可能不太清楚1-如何能触发一个事件让一个按钮显示出被点击了一下的动画?2-input file透明,用其他按钮遮盖,IE7下点击有光标闪动如何解决?
      

  2.   

    1、捕捉onclick事件，如果要等待可以先 return false，动画完成后再触发 click()
    2、用 display: none
      

  3.   

    感谢回复,但您可能没看明白我的问题我现在需要对input type=file进行美化所以我把file框做很大,并且透明.同时绝对定位了一个span作为文件路径的显示,一个button放在浏览按钮位置来视觉欺骗把file隐藏的结果就是这个上传图片的功能无效啦.....第一个问题的话 是希望能点击到这个file的提交按钮后  那个假的button也可以有被点击一下的那种动画效果
      

  4.   

    为什么要把file框放很大，而不是直接用span遮住file的框？这样，你直接点击file的浏览，在span中显示文件名不是更直接？
      

  5.   

    用a来做<style>
    /*file容器样式*/
    a.files {
    width:90px;
    height:30px;
    overflow:hidden;
    display:block;
    border:1px solid #BEBEBE;
    text-decoration:none;
    }
    a.files:hover {
    background-color:#FFFFEE;
    background-position:0 -30px;
    }
    /*file设为透明，并覆盖整个触发面*/
    a.files input {
    margin-left:-350px;
    font-size:30px;
    cursor:pointer;
    filter:alpha(opacity=0);
    opacity:0;
    }
    </style>
    <a href="javascript:void(0);" class="files">选择文件...<input type="file"/></a>
      

  6.   


    display:none;不会影响功能。如果你想按钮有被点击效果，只要出发对应按钮的click事件即可。我好奇你那个span怎样获取最新上传的文件名
      

  7.   

    自定义文件上传方式下面的代码在ie中没问题，而在firefox中怎么获取上传的文件名称失败呢？忘高手指点。
    <html>
    <script type="text/javascript">
    function upload(){
    var div=document.getElementById("uploaderContainer");

    div.innerHTML="<input type='file' />";
    div.firstChild.click();

    setTimeout("updateFileName()",100);

    }

    function updateFileName(){

    var uploader=document.getElementById("uploaderContainer").firstChild;
    //alert(uploader);
    var fileName=(uploader==null)?"":uploader.value;
    //alert(fileName);
    if(fileName.lenght==0){
    setTimeout("updateFileName()",100);

    }else{

    document.getElementById("fileName").value=fileName.replace(/.*\\/,"");
    }
    }


    function showFileName(){
    alert(document.getElementById("test").value);
    }
        </script>
    <style type="text/css">  #uploaderContainer{
    display:none;
    }
    </style><body>
    <div id="uploaderContainer"></div>
    <input type="text" id="fileName" />
    <input type="button"  onclick="upload()" value="浏览" /></body>
    </html>
      

  8.   


    假设如果 你要在 file按钮提交后执行 button事件可以用 $("button").trigger("click");
    假设如果 你不需要执行button的click, 那么 你在file提交后 用CSS控制假button的样式就行，
    至于你的动画效果不知道是什么样的，如果是慢慢消失或者 隐藏 jquery 也有封闭的效果，如果只是做点击后的一个效果展示 就用CSS就好了。
      

  9.   

    1.在点击事件中，先动画，然后将具体操作添加到setTimeout(function(){//操作},500)中
    2.设置样式opacity,z-index添加按钮置于其上
      

  10.   

    用a来做<style>
    /*file容器样式*/
    a.files {
    width:90px;
    height:30px;
    overflow:hidden;
    display:block;
    border:1px solid #BEBEBE;
    text-decoration:none;
    }
    a.files:hover {
    background-color:#FFFFEE;
    background-position:0 -30px;
    }
    /*file设为透明，并覆盖整个触发面*/
    a.files input {
    margin-left:-350px;
    font-size:30px;
    cursor:pointer;
    filter:alpha(opacity=0);
    opacity:0;
    }
    </style>
    <a href="javascript:void(0);" class="files">选择文件...<input type="file"/></a>按照你的方法做的，效果如此，点击框里的下方空白处才能弹出浏览框，别的地方无用，