本文主要給大家分享的是透過JS實現圖片垂直居中懸浮,在我們用滑鼠下拉滾動的時候圖片居中懸浮,不跟隨滾動的效果,有興趣的朋友跟著學習下吧。
我們先來看下效果圖:
下面我們來看下所有測試過的程式碼:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <style type="text/css"> .logo { width: 650px; height: 383px; position:fixed; background: url(http://www.php.cn/images/logo.gif) no-repeat; margin:auto; left:0; right:0; top:0; bottom:0; } </style> <title>图片垂直居中不随滚动条滚动的JS代码</title> </head> <body style="height:3000px"> <p class="logo"> </p> <p>脚本之家JS图片悬浮图片效果</p> </body> </html>
相關推薦:
以上是JS實作圖片居中懸浮效果實例分享的詳細內容。更多資訊請關注PHP中文網其他相關文章!