本文实例讲述了JS模拟并美化的表单控件效果实例。分享给大家供大家参考。具体如下:
这里演示使用JS美化并模拟网页表单控件,十分漂亮的表单效果,使用时可以将代码内的JS保存为文件, 方便调用,使用方法:WellForm(element)
运行效果截图如下:
具体代码如下:
--------- ---- ------ ------------ ----- --- ----------------- ---------------------------------------------------------- ----- ------------------------------------- ------ ----- ------------------------- ------------------- -------------- -- --------------------- ------ ---------------- -- ----------------- - -- --------- ---------------------- ------------------------------------------------------------- --------- ---------------------------------- -------------- --------- ---------------- ---------------- ---------- --------- ------------------ ------------------ ------------ --------- ------------- --- --------- ------------- -- ---- --------- ------------- -- ---- --------- ------------- --- --------- ------------- -- ---- --------- ------------- -- ---- --------- ----------- --------- -------------- --------- ------------------ ------------------ ----------- ------------------------------------ ----------- ------------ --------- ---------------- ---------------- -------------------------------------------- --------- ---------------------------- ------------ -------------------------------- --- --------- ----------------------------- ---------------- --------------------------------- ------- --------- ----------------------------------------------------- ------------- - ------------------ - ---------------------------------------------------------------------- ------- --------- -------------------------------- ------- -------------- --------- ------------------ ------------------ ------------------------------------ --------- ---------------------------------------- ------- --------- ------------------------------------------------------------ ------------------------ --------- --------------------------------------------------------------------------------------------- -------- --------- ----------- --------------------- --------- ----------- ------------------------------------------------------------------------------------------------------------- --------- ----------- -------------------------------------------------------------------------------------------------------- --------- ----------- -- -- -------------------------------------------------------------------------- --------- ----------- -- -------------------------- ---------------- --------- -------------------------- --------- ------------- --- --------- ------------- -- ---- --------- ------------- -- ---- --------- ------------- --- --------- ------------- -- ---- --------- ------------- -- --- ----------------------------- --------- ------------- -------------------------------------------------- -------- --------- ------------- --------------------------------------------------- -------- --------- ------------- -- ------------------------- -------- --------- ------------- --- ------------------------- -------- --------- ------------- -- ------------ ---------------------------------------------------- -------- --------- ------------- --- ------------ ---------------------------------------------------- -------- --------- ------------- -------------------------------------------------- -------- --------- ------------- --------------------------------------------------- -------- --------- ------------- -- ------------------------- -------- --------- ------------- --- ------------------------- -------- --------- ------------- -- ------------ ---------------------------------------------------- -------- --------- ------------- --- ------------ ---------------------------------------------------- -------- --------- ------------- --- --------- ------------- -- --- ------------------------------------------------- ---------- --------- ------------- ------------------------ --- --------- ------------- -- ----------------------------- --- --------- ------------- ---- --------- ------------- --- --- ------------------------------------------------- ---------- --------- ------------- ------------------------- --- --------- ------------- --- ----------------------------- --- --------- ------------- ------------------------------------- ---------------------------------------------------------------------------------------------------- ------------- --------- -------------------------------------------------------------------------------------- --- - --------------------------- -------- --------- ------------------------------------- -------- --------- ---------- ------------------------------------ ---------------- --------- ------------------------- ---------------------------------------------------------------- --- - ----------------------- -------- --------- ------------------------------------ -------- --------- ------------- ------------------------------------ -------------- --------- ------------------ ------------------ ------------------------------------------------------------- --------- ------------------------------ ----------------- ---------------------------------- -------------------------- --------- ------------------------------- ----------------- ----------------------------------- -------- --------- ----------------------------------------------------------------------------------------- ---- ----------------------------------------------------------------------------------------------------------- -------- --------- ---------------------------------- -------- -- ----------------- - -- --------------------------------------- ------ ---------------- - - ------------------ ---- ----------------------------------------------------------- --------- --------------------------------------------------------- -------- ------- ----------------------- ------------- - -------- -- - --- ----- - -------------------------------------- ------ --- ---- - - -- - - ------------- ---- ------------------- -- --------------------------------------------------- - ------------- ---- ---------------------- --------- ----- -------------------------------------------------- -- -- ------- -------- ---------------- -------- - --- ------ - --- --- ------- - --- ----------- -- - ------ - -- ------ --- ----- - -------- -- ------------------------------------ --- ---- - - -- - - ------------- ---- -------------------------------- -- ---------------------- ------ ------ - -- --------- -------- ------------- ------- - --- --- - --- ---------------- - ------ - ----------- ------ ----------------------- - -- ------- -------- ------------- ------- - ------------- ------- -- -------------- -- - --------- - -- ------- -------- ---------------- ------- - -- -------------- -------- - --- --- - --- ---------------- - ------ - ----------- ------------- - -------------------------- ---- - - -- ----- -------- ---------------- - ------ ------------------- -- -------------------------- -- ---- - -- ----- -------- ---------------- - ------ --------------- -- ---------------------- -- ---- - -- ------- -------- -------------- - --- - - -- --- ------ - -- --- ------ - ----------------------------------- --- ------- - ------------------------------------ --- --------- - -------------------------------------- -------------- - ----------- -- ----- -- --- ----- - --- --- -- - -- - - -------------- ---- ------------------ -- ------ -- ----------------- -- ----------- -- ---------------------- --- -- - -- - - ------------- ---- - --- ------ - ------------------------------ --- ------ - ------------------------------ ---------------- - -------- ---------------- - -------- ------------------ - ----------- ---------------------------------------- ---------- ---------------------------------------- ----------------------- ------ ---------------- - -------- -- - -------------- ------------- --------------------------- ---------- --------------------------- --------- -- ------ --------------- - -------- -- - ----------------- ------------- ------------------------------ ---------- ------------------------------ --------- - - -- ----- -- --- -- - -- - - ----------------- ---- - --- --------- - ------------------------------ ------------------- - --------------- ----- --- -- - ------------------------------ --- --- - ------------------------------ --- --- - ------------------------------ ------------ - ---- ------------- - ----- ------------- - ----- --------------------- -------------------- ------ --- -- - ------------------------------ --- --- - ------------------------------ ------------ - ---- ------------- - ----- -------------------- ----- --- -- - ------------------------------ --- --- - ------------------------------ --- --- - ------------------------------ ------------ - ---- ------------- - ----- ------------- - ----- --------------------- -------------------- ------ ----------------------------------------------- -------------- ------------------------------ -------------------------- -------------------------- -------------------------- --------------------- - --------------- - ----- ------ -------------------- - -------- -- - --- - - --------------------------- ----------- ------ ------------------------ ------ ------------------------ ----- -- ------------------- - -------- -- - --- - - --------------------------- -------------- ------ --------------------------- ------ --------------------------- ----- - - -- --- -- --- ------ - --- --- -- - -- - - -------------- ---- ----------------- -- ------- -- ----------------------- --- -- - -- - - -------------- ---- - --- ------ - ------------------------------ ---------------- - ------------ ----------------------------------------- ----------- ------------------------------ ----------------- -- ------------------------------ -------------- -------------- - -------- -- - --- -------- - --------------------- ----------------- --- -- - -- - - ---------------- ---- - ------------------------ -------------- ------------------------------- - ------ - -------------- -------------- ------------------------ - ---- - - -- --- -- --- --------- - --- --- -- - -- - - -------------- ---- ----------------- -- ---------- -- -------------------------- --- -- - -- - - ----------------- ---- - --- --------- - ------------------------------ ------------------- - --------------- ----------------------------------------------- -------------- ------------------------------------ -------------------- -- --------------------------------- ----------------- ----------------- - -------- -- - ------------------------ - -------------------------- ------------------------ - -------------- ---------------- - ----------------- ---------------- - - -- -- -- --- ------- - --- --- -- - -- - - -------------- ---- ------------------ -- -------- -- ----------------- -- --------- -- ------------------------ --- -- - -- - - --------------- ---- - --- ----- - ------------------------------ --- ----- - ------------------------------ --------------- - ---------- --------------- - ---------- -------------------- - ------------- ----------------------------------------- ------------ ----------------------------------------- ------------------------- ------ ---------------------- - -------- -- - -------------- --------------- --------------------------- ------------ --------------------------- ------------ -- ------ --------------------- - -------- -- - ----------------- --------------- ------------------------------ ------------ ------------------------------ ------------ - - -- ---- -- --- -- - -- - - --------------- ---- - --- --------- - ---------------------------------- --- -------- - ------------------------------ --- -------- - ------------------------------ --- ----------- - ------------------------------ --- --- - ----------------------------- --- --- - ----------------------------- ------------------ - ---------- ------------------ - ---------- --------------------- - ------------- ------ -------------------------------------------- ------------ -------------------------------------------- ------------------------- --------------- - ----------------------- - ---------------------- - -------------------- - - - ----- --- ---- - - -- - - -------------------------- ---- - --- --- - ----------------------------- ------------- - --------------------------- ------------- - ---------------------------- --------------------------- ------------------------------ -- -------------- - --------------------------- - --------------------------- ----------------------------- ----------------------------- ----------------------------------------------- ------------ ------------------------------------ ------------------- - ---------------- - -------- ------- - --- - - ---------------------------------- -- ------------------------------------------------ --- --- - -------------------------------- ------------------------------ - ----------- ---------------------------- - --------- --------------- - --------------- -- ------- - ------ - -------- --- -- - -- - - ----------- ---- - -- -- -- ------- --------- -------------------- - ------- - --- --- - ----------------------------- --- -- - -- - - ----------- ---- - ------------------ - -------- -- - -------------- - ------- -- ----------------- - -------- -- - -------------- - -- -- -------------- - -------- -- - -------------------------------------- - --------------- ---------------------------------- - ----------- - - ------ -- -------------------------- - ----- ---------------- - -------- -- - --------------- - ------ - - - - --------- ------- ------ ------ ---- ------------------------------------- ----------- ----------- -------- ---- ------------------------------------- ----------- ---------- -------- ---- ------------- ------------------ ------- ----------- ------- ---------------------- ------- ---------- ------------------------------- ------- ---------------------- --------- ------ ---- ------------- ------------------ ------- ------------- ------- --------------------- ------- --------------------- ------- --------------------- ------- --------------------- ------- --------------------- ------- --------------------- ------- --------- ------------------------------- ------- --------------------- ------- --------------------- ------- ----------------------- --------- ------- ----------- ------- --------------------- ------- --------------------- ------- --------------------- ------- --------------------- ------- --------------------- ------- --------- ------------------------------- ------- --------------------- ------- --------------------- ------- --------------------- ------- ----------------------- ------- ----------------------- ------- ----------------------- ------- ----------------------- ------- ----------------------- ------- ----------------------- ------- ----------------------- --------- ------- ------------ ------- --------------------------- ------- --------------------------- ------- --------------------------- ------- --------------------------- ------- --------------------------- ------- --------------------------- ------- --------------------------- ------- --------------------------- ------- --------------------------- ------- --------------------------- ------- ------------ ---------------------------------- ------- --------------------------- ------- --------------------------- ------- --------------------------- --------- ------ ---- ------------- ------------------ ------ ------------ ------------ ---------- --------------- ------ ------------ ------------ ---------- ----------------- --------------- ------ ---- ------------- ------------------ ------ --------------- ----------- ---------- --------------- ------ --------------- ----------- ---------- --------------- ------ --------------- ----------- ---------- ----------------- --------------- ------ --------------- ----------- ----------- ----------------- ---------------- ------ ---- ------------------------------------- ----------- -------------------- -------------- -------- ---- ---------------------------------------- --------- -------- -------------------- ------------------------------- ---- ---------------------------------------- --------- -------- -------------------- ----------------------------- ---- ---------------------------------- ------------- ---------- -------- ------- ------ ---- -------------------------------------- ----------- --------------- -------- ---- ------------------------------------- --------------- ---------- -------- ---- -------------------------------------- ----------- ----------- ------------------- -------- ---- ---------------------------------- ------------- ---------- -------- ------- ------- -------
希望本文所述对大家的javascript程序设计有所帮助。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/4008