小弟对JS给网页带来的各种效果很着迷,也接触JS一段时间了,只能勉强看懂一些简单的,小弟对JS给网页带来的各种效果很着迷
希望前辈能介绍下如何能自己写代码的经验啊!
顺便问下,最近在做一个鼠标点击链接,弹出一个可以自由拖动的浮动层!就像DISCUZ上的那样!
各位前辈指点迷津下吧!

解决方案 »

  1.   

    先把基础弄好,因为JS是一个跟其他任何语言都很不一样的东西,最好能先看一本详细讲解了基础的书,看不全懂也没关系,不懂那部分用着用着就能懂了。在基础没好之前不要光想着做什么什么样的效果,因为你会想不出来效果是怎么做出来的,然后就只能问。最后这个效果清楚怎么做了,下回遇到新的还是不会。应该学会自己去分析问题分解问题,HTML里的东西就这么多,JS的功能是有限的,怎么用有限的东西组合得到不同的效果,学会解决问题的方法才是王道。
    像可以拖动的浮动层,看到这个东西脑袋里想的就不应该是一个漂浮在网页上的框框,而应该是div, mousedown, mousemove, mouseup, position: absolute, left, top, window.event/event这些分解开的最基本的东西。所谓目无全牛嘛。当然这就要求你对基本概念非常熟悉了,所以才会强调基础。
    然后浏览器兼容非常重要,即使现在很多项目只要求IE能够运行,但是浏览器兼容是发展趋势,早晚就会遇到要你的代码在各种主流浏览器都能运行的要求。特别对于做国外外包项目的人。其实这并不困难,不过刚开始会有一个困难期。坚持下来以后就会觉得很容易了。
    最后应该是所有程序员都应该有的要求,对自己的代码高标准严要求,千万不要抱着能用就成的心态去写代码,个人十分反感这样的编码态度(因为过去一年半以来一直跟这样一群人工作,十分辛苦)。
    JS需要很多的练习,LZ加油吧
      

  2.   

    先看看JavaScript权威指南吧。或者JS_高级程序设计也行!
      

  3.   

    浮动层  
    给个例子给你吧<html>
    <head>
    <style TYPE="text/css"> 
    <!-- 
     
    .popcomments 

    position : absolute; width:130;height:50;
    visibility : hidden; 

    //--> 
    </style> 
    </head>
    <body>
    <DIV ID="commentsboard" CLASS="popcomments">&nbsp;</DIV> 
    <SCRIPT> 
     function popup(message) 
    { var content ="<TABLE WIDTH=130 BORDER=0 CELLPADDING=1 CELLSPACING=0 BGCOLOR=#000000><TR><TD><TABLE WIDTH=100% BORDER=0 CELLPADDING=0 CELLSPACING=0><TR><TD><CENTER><FONT COLOR=#FFFFFF SIZE=2><B>说  明</B></FONT></CENTER></TD></TR></TABLE><TABLE WIDTH=100% BORDER=0 CELLPADDING=1 CELLSPACING=0 BGCOLOR='#FFFFE8'><TR><TD><FONT COLOR=#000000 SIZE=2><CENTER>"+message+"</CENTER></FONT></TD></TR></TABLE></TD></TR></TABLE>"; document.all("commentsboard").innerHTML = content; 
    commentsboard.style.visibility = "visible"; 
     

    function closeboard() 

    commentsboard.style.visibility = "hidden"; 
    } function currentXY(e) 

    var x = event.x+document.body.scrollLeft; 
    var y = event.y+document.body.scrollTop; 
    commentsboard.style.left = x - 55; 
    commentsboard.style.top = y+25; 
    } </SCRIPT> 
    <p>&nbsp;</p>
    <table border="0" width="100%" height="82">
      <tr>
        <td width="100%" height="1">
          <p align="center"><span style="font-size: 10pt; background-color: #ccffcc">超级链接动态注释特效</span></td>
      </tr>
      <tr>
        <td width="100%" style="border: 1 ridge #00FFFF" height="17">
          <p align="center"><span style="font-size:9pt">&nbsp;&nbsp;&nbsp; </span><span style="font-size:10.5pt;mso-bidi-font-size: 
    10.0pt;font-family:宋体;mso-ascii-font-family:&quot;Times New Roman&quot;;mso-hansi-font-family: 
    &quot;Times New Roman&quot;;mso-bidi-font-family:&quot;Times New Roman&quot;;color:black; 
    mso-font-kerning:11.0pt;mso-ansi-language:EN-US;mso-fareast-language:ZH-CN; 
    mso-bidi-language:AR-SA">在这一部分,我们将来完成两个鼠标特效。当我们把鼠标移到超级链接上时浏览器会弹出一些文字说明,这些文字说明可以是动态的,也可以是静态的。</span></p> 
        </td> 
      </tr> 
    </table> 
    <table cellPadding="0" cellSpacing="0" width="100%"                  
                        height="244">                  
                    
                          <tr>                  
                            <td height="14" width="110%"></td>                  
                          </tr>                  
                          <tr>                  
                            <td height="232" width="110%" bgcolor="#FFFFFF"><table align="center" bgColor="#000000" border="0"                  
                            cellPadding="2" cellSpacing="1" width="113">                  
                    
                            <tr bgColor="#ffcccc">                  
                            <td bgColor="#eaedf7" width="103"><p align="center"><a href="?" ONMOUSEOVER="popup('聊天室')" ONMOUSEOUT="closeboard()" onmousemove="currentXY();">聊天室</a> </td>                  
                            </tr>                  
                            <tr bgColor="#ffcccc">                  
                            <td bgColor="#eaedf7" width="103"><p align="center"><a href="?" ONMOUSEOVER="popup('请留下您宝贵的意见!')" ONMOUSEOUT="closeboard()" onmousemove="currentXY();">请留言</a>                   
                            </td>                  
                            </tr>                  
                            <tr bgColor="#ffcccc">                  
                            <td bgColor="#eaedf7" width="103"><p align="center"><a href="?" ONMOUSEOVER="popup('这是一个由JavaScript编写的调试器!')" ONMOUSEOUT="closeboard()" onmousemove="currentXY();">Html调试器</a> </td>                 
                            </tr>                 
                            <tr bgColor="#ffcccc">                 
                            <td bgColor="#eaedf7" width="103"><p align="center"><a href="?" ONMOUSEOVER="popup('这里收集了许多精彩的网址!')" ONMOUSEOUT="closeboard()" onmousemove="currentXY();">友情链接</a> </td>                 
                            </tr>                 
                            <tr bgColor="#ffcccc">                 
                            <td bgColor="#eaedf7" width="103"><p align="center"><a href="?" ONMOUSEOVER="popup('这是一个由JavaScript编写的日历。')" ONMOUSEOUT="closeboard()" onmousemove="currentXY();">日历</a> </td>                 
                            </tr>                 
                            <tr bgColor="#ffcccc">                 
                            <td bgColor="#eaedf7" width="103"><p align="center"><a href="?" ONMOUSEOVER="popup('这是一个由JavaScript编写的计算器。')" ONMOUSEOUT="closeboard()" onmousemove="currentXY();">计算器</a> </td>                 
                            </tr>                 
                            <tr>                 
                            <td bgColor="#eaedf7" width="103"><p align="center"><a href="?" ONMOUSEOVER="popup('欢迎进入网上购物虚拟时空。')" ONMOUSEOUT="closeboard()" onmousemove="currentXY();">网上购物</a>                  
                            </td>                 
                            </tr>                 
                       
                            </table>                      
                            </td>                      
                          </tr>                      
                        
                        </table>                      
    </body>
    </html>
      

  4.   

    用JQuery做挺省事的、、、
    还是用JQuery吧、、、
      

  5.   

    把我的blog上的javascript分类的文章都读一遍:http://blog.csdn.net/sunxing007;
    代码都看一遍,包你差不多。