快捷導(dǎo)航

DIV始終居中的js代碼

更新時(shí)間：2014年02月17日 17:06:48 作者：

這篇文章主要介紹了DIV始終居中的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=utf-8" /> 
<title>側(cè)邊欄廣告</title> 
<style type="text/css"> 
#show { width:100px; height:80px; background:#0f0; position:fixed; _position:absolute; right:0px; top:0px;} 
</style> 
<script type="text/javascript"> 
window.onscroll = window.onresize = window.onload = function(){ 

var oDiv = document.getElementById("show"); 
var sTop = document.documentElement.scrollTop || document.body.scrollTop; 
var cHeight= document.documentElement.clientHeight || document.body.clientHeight; 
var mid = (cHeight - oDiv.offsetHeight) / 2; 
// oDiv.style.top = parseInt(sTop + mid) + "px"; //理論上應(yīng)該只設(shè)這句就可以居中吧 

//實(shí)際上的 各大瀏覽器只認(rèn)識(shí)下面這if判斷 
if(navigator.appVersion.indexOf("MSIE 6")> -1){ 
oDiv.style.top = parseInt(sTop + mid) + "px"; 
}else{ 
oDiv.style.top =mid + "px"; 
} 
} 

您可能感興趣的文章:

div居中

相關(guān)文章

JavaScript中本地存儲(chǔ)(LocalStorage)和會(huì)話存儲(chǔ)(SessionStorage)的使用
本地存儲(chǔ)和會(huì)話存儲(chǔ)是比較常用的方法，你知道兩者的區(qū)別嗎，本文詳細(xì)的介紹了JavaScript中本地存儲(chǔ)(LocalStorage)和會(huì)話存儲(chǔ)(SessionStorage)的使用，具有一定的參考價(jià)值，感興趣的可以了解一下
2022-03-03
JavaScript DSL 流暢接口(使用鏈?zhǔn)秸{(diào)用)實(shí)例
這篇文章主要介紹了JavaScript DSL 流暢接口(使用鏈?zhǔn)秸{(diào)用)實(shí)例,本文講解了DSL 流暢接口、DSL 表達(dá)式生成器等內(nèi)容,需要的朋友可以參考下
2015-03-03
微信小程序?qū)崿F(xiàn)雙層嵌套菜單欄
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)雙層嵌套菜單欄，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-07-07
將兩個(gè)div左右并列顯示并實(shí)現(xiàn)點(diǎn)擊標(biāo)題切換內(nèi)容
將兩個(gè)div左右并列顯示并實(shí)現(xiàn)點(diǎn)擊標(biāo)題切換內(nèi)容的效果，接下來(lái)為大家詳細(xì)介紹下js中時(shí)如何實(shí)現(xiàn)的，感興趣的朋友不要錯(cuò)過(guò)
2013-10-10
微信小程序?qū)崿F(xiàn)手風(fēng)琴折疊面板
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)手風(fēng)琴折疊面板，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-05-05
JavaWeb表單及時(shí)驗(yàn)證功能在輸入后立即驗(yàn)證(含用戶類型,性別,愛好...的驗(yàn)證)
最近做項(xiàng)目遇到表單在輸入后立即驗(yàn)證，而不是提交后再驗(yàn)證，在網(wǎng)上找了下資料，沒有合適的，于是我自己動(dòng)手寫了一個(gè)，分享到腳本之家平臺(tái)，供大家參考
2017-06-06
用js實(shí)現(xiàn)的一個(gè)根據(jù)內(nèi)容自動(dòng)生成表格的函數(shù)
用js實(shí)現(xiàn)的一個(gè)根據(jù)內(nèi)容自動(dòng)生成表格的函數(shù)...
2007-08-08
bootstrapValidator.min.js表單驗(yàn)證插件
這篇文章主要為大家詳細(xì)介紹了bootstrapValidator.min.js表單驗(yàn)證插件的使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-02-02
詳解javascript 變量提升（Hoisting）
這篇文章主要介紹了詳解javascript 變量提升(Hoisting),小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2019-03-03
淺談JS驗(yàn)證表單文本域輸入空格的問(wèn)題
下面小編就為大家?guī)?lái)一篇淺談JS驗(yàn)證表單文本域輸入空格的問(wèn)題。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-02-02