js學習之——網頁側邊欄廣告效果

阿新 • • 發佈：2019-01-27

側邊欄廣告就是指我們在瀏覽網站的時候在網頁的右邊中間部分顯示的那個div，無論我們是拖動滾動條，還是放大縮小視窗，廣告始終顯示在右邊的中間。這裡主要是提供兩種方法的實現。
方法一：
就是使用純粹的佈局來實現，比較簡單，即是使用 position:fixed; 沒有什麼好說的直接看程式碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>側邊欄廣告</title>
    <style>
        div 
 {
            width: 100px;
            height: 100px;
            background-color: red;
            position: fixed;/** 最簡單的一種是新方法，就是讓絕對定位設定成固定，但是IE6不會支援此種特性*/
            right: 0;
            top: 50%;
            margin-top: -50px;
        }
    </style>

</head>
<body style="height: 2000px"> 

<div id="div1">

</div>
</body>
</html>

方法二：
通過設定div top值的方式來實現：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>側邊欄廣告效果2-</title>

    <style>
        #div1 {
            height: 100px;
            width 
: 100px;
            background-color: red;
            position: absolute;
            right: 0px;
        }
        /**
            通過設定div的top值 = scrolltop 的高度 + （視覺化區域的高度-div自身的高度）/2 來實現 div始終位於區域中間位置
        */
    </style>
    <script>
        window.onresize=window.onscroll= window.onload=function () {
            var oDiv=document.getElementById("div1");
            var scrollTop =document.documentElement.scrollTop;
            var t = (document.documentElement.clientHeight-oDiv.offsetHeight)/2;
            oDiv.style.top=scrollTop+t+"px";
        }
    </script>
</head>
<body style="height: 2000px;">

<div id="div1">

</div>
</body>
</html

參考自：妙味課堂的原創js視訊。

js學習之——網頁側邊欄廣告效果

側邊欄廣告就是指我們在瀏覽網站的時候在網頁的右邊中間部分顯示的那個div，無論我們是拖動滾動條，還是放大縮小視窗，廣告始終顯示在右邊的中間。這裡主要是提供兩種方法的實現。方法一：就是使用純粹的佈局來實現，比較簡單，即是使用 position:fixed;

利用js編寫響應式側邊欄

為了練手，自己學敲網站時剛好碰到需要製作側邊欄，在網上也查了各種外掛以及框架都可以實現這個功能，但是想自己學著用js原生學一個試試，於是就初略完成了側邊欄的實現，可以讓初學者參考參考，程式碼能力有限。其中主要設計的就是animate（）函式，animate() 方法執行

js實現自動隱藏側邊欄

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4

Framework7學習筆記之側邊欄

pen 滑動遮蓋 body style nbsp 筆記 con reveal 一：舊版 1:定義側邊欄並指定側邊欄滑出效果側邊欄有兩個：左側、右側。側邊欄在body標簽間定義。 <body> <!-- 1:添加側

Android學習筆記（四）之碎片化Fragment實現仿人人客戶端的側邊欄

其實一種好的UI佈局，可以使使用者感到更加的親切與方便。最近非常流行的莫過於側邊欄了，其實我也做過很多側邊欄的應用，但是那些側邊欄的使用我都不是很滿意，現在重新整理，重新寫了一個相對來說我比較滿意的側邊欄，其中運用的就是android3.0版本之後新加的Fragme

Android學習之基於DrawerLayout的側邊欄實現

本例，是基於AndroidStudio開發，用到v7包下DrawerLayout，Toolbar，和android.support.design下的NavigationView，需要在gradle中配置 compile 'com.android.support:appco

js 分享到側邊欄

htm func line target 判斷 rip mouse get pad <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/

【被玩壞的博客園】之canvas裝飾博客園側邊欄

ctx tail lang num radi sid 應用 ack 火狐最近抽空學了學canvas,然後用canvas做了個小球運動的demo,大致的效果如下：雖然網上已經有很多這樣的demo,但是還是想根據自己的思路來寫一個，下面先跟大家講解一下源代

JS側邊欄實現

1 <!DOCTYPE html> 2 <html lang="en"> 3 <style> 4 </style> 5 <head> 6 <meta charset="UTF-8"> 7 <title&g

微信小程式之側邊欄滑動實現（附完整原始碼）

目錄一、效果圖二、原理解析三、原始碼四、專案下載同類文章推薦：更多幹貨關注公眾號：一、效果圖講什麼都不如直接上效果圖好，所以我們先來看下實現效果如何。通過滑動螢幕，或者點選左上角的圖示按鈕，都能實現側邊欄的劃出效果。 &nb

Linxu基礎之Ubuntu如何使側邊欄自動隱藏

如果你裝了ubuntu桌面版就會發現預設情況下桌面左邊會有一個側邊欄，從中我們可以啟動一些軟體，但是這個側邊欄一直顯示在桌面左邊不是很美觀，還會佔據桌面的的空間。我們可以使其自動隱藏起來，當我們需要時只要把滑鼠放到桌面左邊它就會出現。 1. 系統設定-外觀開啟系統

android自定義View之仿通訊錄側邊欄滑動，實現A-Z字母檢索

我們的手機通訊錄一般都有這樣的效果，如下圖： OK，這種效果大家都見得多了，基本上所有的android手機通訊錄都有這樣的效果。那我們今天就來看看這個效果該怎麼實現。一.概述 1.頁面功能分析整體上來說，左邊是一個ListView，右邊是一個自定義View，但

js 側邊欄

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text

Django學習筆記三：頁面側邊欄最新文章，文章歸檔，分類,標籤雲的實現

前言執行效果（箭頭 == 點選）根據效果圖可以知道我們要實現的功能：將內容填充到各個側邊欄對應的內容下面，並實現對應的跳轉功能。下面我們一項一項的實現下列的功能：首先在blog應用下建立一個templatetags資料夾，資料夾下

JS實現div的顯示和隱藏側邊欄區域性偽重新整理的實現

效果描述：點選a標籤1，觸發事件open(obj)，顯示div內容1，點選a標籤2，隱藏div內容1,並顯示div內容2……js程式碼：<script language="javascript"> function opens(obj) { for (v

JS側邊欄的顯示和消失

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <st

js、jq兩種方法實現網頁側邊導航

js第一種方法: 實現的效果如下: 1.在側欄滑動時背景顏色切換和字型顏色切換. 2.視窗滾動時，右邊側欄隨之變化. 3.點選側欄選項,跳動到當前選項對應的頁面,並且側欄也隨之變化. 程式碼如下: html+css: *{

基於slideout.js實現的移動端側邊欄滑動特效

HTML5現在本領太大了，PC端已經無法滿足它的胃口了，它將強勢攻入移動端，所以移動端中各種特效也得基於HTML5實現，看看我們將要介紹的slideout.js，能幫我們實現怎麼樣的側邊欄滑動特效呢~~ 先看下執行效果：一、準備資料只需要準備s

Vue.js學習之生命周期

ted eight http 初始機會編譯 log console eat 每個 Vue 實例在被創建之前都要經過一系列的初始化過程。例如，實例需要配置數據觀測(data observer)、編譯模版、掛載實例到 DOM ，然後在數據變化時更新 DOM 。在這個過程中

WordPress主題開發實例：利用側邊欄工具顯示聯系方式

des dynamic class cat ons eba 廈門市 wordpress .com 利用側邊欄顯示聯系方式是很方便的一、先開啟側邊欄工具，在functions.php加上 $args = array( ‘name‘ =

js學習之——網頁側邊欄廣告效果

相關推薦