텍스트 상자 워터프린트 알림 효과의 간단한 실현 코드

2481 단어
 
  



    <br/>    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"/> <br/>    <style type="text/css"> <br>        #divTips{ <br>            filter:alpha(opacity=30); /*IE , 50%*/ <br>            -moz-opacity:0.3; /*Firefox , 50%*/ <br>            opacity:0.3;/* , 50%*/ <br>            position: absolute;width: 600px; height: 400px;display:none;color:red;z-index:10;padding:10px; <br>        } <br>    </style> <br/>    <script type="text/javascript"> <br>        $(function () { <br>            var $txtNote = $("#txtNote"); <br>            var $divTips = $("#divTips"); <br>            $txtNote.focus(function () { <br>                // <br>                $divTips.hide(); <br>            }).blur(function () { <br>                // , , . <br>                $divTips.toggle($txtNote.val() == "") <br>                    .css({ <br>                        "left": $txtNote.position().left, <br>                        "top" : $txtNote.position().top <br>                    }); <br>            }); <br>            $divTips.click(function () { <br>                $txtNote.focus(); <br>            }); <br>            $txtNote.blur(); <br>        }); <br>    </script> <br/> <br/> <br/>    <br/> <br/>    <textarea id="txtNote" style="width: 600px; height: 400px;"/> <br/>    <div id="divTips"> <br/>        , , !!<br/> <br/>        ( name, ) <br/>    </div><br/> <br/>    <input type="text" value=" "/> <input type="text" value=" /QQ/……"/> <br/> <br/> <br/> </code></pre> <div class="clearfix"> <span id="art_bot" class="jbTestPos"/> </div> </div> </div> </div>

좋은 웹페이지 즐겨찾기