Next, let's talk about the purpose:
Blind play, purely for learning JS exercises.
Er, finally PS: secretly borrowed a function written by someone: returns the final style function.
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Strict // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <ptml xmlns = "http://www.w3.org/1999/xhtml" lang = "zh-CN" xml: lang = "zh-CN"> <pead> <meta http-equiv = "Content-Type" content = "text/html; charset = gb2312 "/> <meta name =" keywords "content =" PRcss, xhtml, html, css, js, book, personal homepage, bored, nervous, lazy "/> <meta name =" description "content =" PRcss's personal homepage, boring, nervous, and lazy... "/> <Meta name = "Author" content = "PRcss, qq: 50198763"/> <meta name = "Copyright" content = "this page is copyrighted by PRcss. All Rights Reserved "/> <link rel =" shortcut icon "href =" http://www.pr1984.com/favicon.ico "/> <title> zoom in and out containers: imitation animation-www.jb51.net </title> <style type = "text/css"> * {margin: 0; padding: 0;} body {padding: 1em ;} h2 {font-size: 2em;} div {display: inline-block; width: 10em; padding :. 5em; margin-bottom: 1em; overflow: hidden; background: # eee; text-align: center; font-size: 1em;} p # text {position: absolute; right: 10px; top: 10px ;} </style> </pead> <body> <p id = "text"> </p> title <p> test the mouse sliding effect </p> title <p> Test mouse sliding effect </p> title <p> test mouse sliding effect </p> </body> </ptml>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]