JS實(shí)現(xiàn)圖片居中懸浮效果
更新時(shí)間：2017年12月25日 10:24:11 投稿：laozhang
這篇文章給大家分享的是通過(guò)JS實(shí)現(xiàn)圖片垂直居中懸浮，不跟隨滾動(dòng)條飄動(dòng)的效果，有興趣的朋友跟著學(xué)習(xí)下吧。
這篇文章我們是用JS實(shí)現(xiàn)一個(gè)圖片懸浮的效果，在我們用鼠標(biāo)下拉滾動(dòng)的時(shí)候圖片居中懸浮，不跟隨滾動(dòng)，我們先來(lái)看下效果圖：
下面我們來(lái)看下所有測(cè)試過(guò)的代碼：
<!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.dhdzp.com/images/logo.gif) no-repeat;
margin:auto;
left:0;
right:0;
top:0;
bottom:0;
}
</style>
<title>圖片垂直居中不隨滾動(dòng)條滾動(dòng)的JS代碼</title>
</head>
<body style="height:3000px">
<div class="logo"> </div>
<p>腳本之家JS圖片懸浮圖片效果</p>
</body>
</html>
以上就是經(jīng)過(guò)效果測(cè)試的原創(chuàng)代碼，感謝你對(duì)腳本之家的支持。
相關(guān)文章
BootStrap 下拉菜單點(diǎn)擊之后不會(huì)出現(xiàn)下拉菜單(下拉菜單不彈出)的解決方案
最近學(xué)到Bootstrap下拉菜單，學(xué)懂了教程內(nèi)容之后自己敲一個(gè)點(diǎn)擊按鈕底下彈出下拉菜單的小demo，寫(xiě)完代碼發(fā)現(xiàn)運(yùn)行之后點(diǎn)擊按鈕沒(méi)反應(yīng)，下拉菜單彈不出來(lái)，下面給大家分享下解決方案2016-12-12
用js實(shí)現(xiàn)輸入提示(自動(dòng)完成)的實(shí)例代碼
用js實(shí)現(xiàn)輸入提示(自動(dòng)完成)的實(shí)例代碼，需要的朋友可以參考一下2013-06-06
17道題讓你徹底理解JS中的類(lèi)型轉(zhuǎn)換
這篇文章主要給大家介紹了關(guān)于如何通過(guò)17道題讓你徹底理解JS中的類(lèi)型轉(zhuǎn)換的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用JS具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
這篇文章主要介紹了8 個(gè)有用的JS技巧(推薦)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-07-07
如何使用 Intl.RelativeTimeFormat 在 JavaScript&nbs
Intl.RelativeTimeFormat是JavaScript提供的一個(gè)國(guó)際化API,用于格式化相對(duì)時(shí)間,如"3天前"或"2年后",支持多種語(yǔ)言和配置選項(xiàng),適用于社交媒體時(shí)間戳和事件提醒等場(chǎng)景,它簡(jiǎn)化了國(guó)際化的相對(duì)時(shí)間顯示,使開(kāi)發(fā)者能夠根據(jù)用戶(hù)的語(yǔ)言和區(qū)域設(shè)置輕松實(shí)現(xiàn)時(shí)間格式化2024-09-09
js中settimeout方法加參數(shù)的使用實(shí)例
這篇文章主要介紹了js中settimeout方法加參數(shù)的使用,需要的朋友可以參考下2014-02-02
uniapp實(shí)現(xiàn)點(diǎn)擊出現(xiàn)彈窗功能實(shí)例
這篇文章主要給大家介紹了關(guān)于uniapp實(shí)現(xiàn)點(diǎn)擊出現(xiàn)彈窗功能的相關(guān)資料,UniApp框架中提供了兩種不同類(lèi)型的彈出框,以幫助我們滿(mǎn)足不同的需求,需要的朋友可以參考下2023-08-08
本文主要給大家簡(jiǎn)單介紹了是什么是DOM、動(dòng)態(tài)操作DOM元素的方法、使用jsjs操作樣式以及Form對(duì)象的簡(jiǎn)介，是個(gè)人對(duì)于javascript中的DOM的理解的總結(jié)，推薦給小伙伴們。2015-03-03
IE6/IE7中JavaScript json提示缺少標(biāo)識(shí)符、字符串或數(shù)字問(wèn)題處理
這篇文章主要介紹了IE6/IE7中JavaScript json提示缺少標(biāo)識(shí)符、字符串或數(shù)字問(wèn)題處理,需要的朋友可以參考下2014-12-12
JavaScript實(shí)現(xiàn)大文件上傳的示例代碼
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)大文件上傳功能的示例代碼，文中的代碼講解詳細(xì)，對(duì)我們學(xué)習(xí)JavaScript有一定幫助，感興趣可以跟隨小編一起學(xué)習(xí)一下2022-11-11