2. 程式人生 > >前端開發之js基礎(11)

前端開發之js基礎(11)

阿新 • • 發佈：2018-12-10

實現網站跟隨小廣告

css程式碼

 <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            #box{
                width: 100%;
                height: 2500px;
                border: 1px solid #FF0000;
                position: relative;

            }
            #box
 
 #left{
                position: absolute;
                left: 20px;
                top: 50px;
            }
            #box #right{
                position: absolute;
                right: 20px;
                top: 50px;
            }
        </style>

html程式碼

<body>
        <div
 
 id="box">
            <div id="left"><img src="../images/topimg/aside.jpg"/></div>
            <div id="right"><img src="../images/topimg/aside.jpg"/></div>
            <div id="content">

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

js程式碼

<script
 
 type="text/javascript">
        //封裝動畫
        function animate(obj,target){
            clearInterval(obj.timer);
            obj.timer = setInterval(function(){
                var speed = (target-obj.offsetTop)/10;
                speed = speed>0?Math.ceil(speed):Math.floor(speed);
                obj.style.top = obj.offsetTop+speed+"px";
                var result = target-obj.offsetTop;
                if(Math.abs(result)<Math.abs(speed)){
                    clearInterval(obj.timer);
                    obj.style.top = target+"px";
                }
            },30);
        }
        //封裝滾動
        function scroll(){
            if(window.pageYOffset!=null){
                return {
                    top:window.pageYOffset
                }
            }
        }
        //事件
        window.onload = function(){
            var box = document.getElementById("box");
            var left = box.children[0];
            var right = box.children[1];
            window.onscroll = function(){
                var top = scroll().top;
                animate(left,top+80);
                animate(right,top+80);
            }
        }
    </script>

相關推薦

前端開發之js基礎(11)

實現網站跟隨小廣告 css程式碼 <style type="text/css"> *{ margin: 0;

前端開發之js基礎(10)

導航欄實現筋斗雲效果 css程式碼 <style type="text/css"> *{ padding: 0;

前端開發之JavaScript基礎篇一

object 行為 基礎篇 類型轉換 設計 介紹 目的 數據類型轉換 引入 主要內容： 　　1、JavaScript介紹 　　2、JavaScript的引入方式 　　3、javaScript變量和命名規則 　　4、五種基本數據類型 　　5、運算符 　　6、字符串

前端開發之html基礎知識02

輸入框 option cap 性別 下拉菜單 設置 checkbox ble submit 經典表格：表格沒有列的概念，只有行的概念， 一行 tr,行中的單元格 td表頭的突出顯示：tr>th <table width="400px" align="center

前端開發之CSS基礎知識02

類選擇器 bsp top osi 文本 層疊 das chm rgba 重要： 行內元素中只能容納文本或其他的行內元素 a標簽例外 文字類型的塊標簽，不要放其他塊元素 如 P H1 CSS規範： .demo {} 空格 font-size: 12px; 空格 .

Web前端開發之HTML+CSS基礎入門(框架)

AR 網頁 html 表單提交 pos 部分加載 selected area pin HTML框架詳解與框架布局? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?? 1)什麽是框架 框架將瀏覽器劃分成不同的部分，每一部分加載不同的網頁，實現在同一

Web前端開發之HTML+CSS基礎入門(使用CSS樣式的方式)

AD 層疊樣 b前端開發 col In 基於 允許 ML 語言 1) HTML<!DOCTYPE> 聲明標簽 a.定義和用法 <!DOCTYPE> 聲明必須是 HTML 文檔的第一行，位於 <html> 標簽之前。 <!DOCTYP

指尖下的js —— 多觸式web前端開發之三：處理複雜手勢

    這篇文章著重介紹多觸式裝置上特有的gesture event（android和iOS對這個事件的封裝大同小異）。這個事件是對touch event的更高層的封裝，和touch一樣，它同樣包括gesturestart，gesturechange，gestureend三個事件回撥：  gesture

指尖下的js ——多觸式web前端開發之二：處理簡單手勢

這篇文章將描述多觸式網頁開發中對手勢（Gesture）事件的處理。     水果裝置中的Gesture，廣義的說包括手指點選（click），輕拂（flick），雙擊（double-click），兩隻手指的分開、閉合（scale）、轉動（rotate）等一切手指能在螢幕上做的事情。iOS上設計了了一系列手勢來模

從零開始，學習web前端之js基礎

js來源 Javascript作為web標準中的行為標準，最初起名叫LiveScript，它是Netscape開發出來一種指令碼語言，其目的是為了擴充套件基本的Html的功能，驗證web頁表單資訊，為web頁增加動態效果。為了趕上java的熱潮，Netscap

好程序員Web前端培訓入門之JS基礎知識梳理匯總

js引擎 外部 定義 活動 代碼塊 它的 相關 調用 知識點 好程序員Web前端入門之JS基礎知識梳理匯總，Web前端工程師是當前各大企業都比較稀缺的人才，薪資待遇和就業前景都很不錯。不論是專業還是非專業，有基礎亦或是無基礎，都想通過學習Web前端實現高薪就業。不過，學習要

好程式設計師Web前端培訓入門之JS基礎知識梳理彙總

開發十年，就只剩下這套架構體系了！ >>>   

Hybrid App開發之jQuery基礎

簡單 代碼 前言 tdi ner user 總結 func pre 前言： 前面學習了JavaScript/Html/Css的基礎知識，今天學習一下常用js框架jQuery的使用進行快速的開發。 JQuery的基本功能： 方位和操作DOM元素 控制頁面樣式 對頁

移動前端開發之viewport的深入理解

瀏覽器 開發 分辨率 電腦 標簽 在移動設備上進行網頁的重構或開發，首先得搞明白的就是移動設備上的viewport了，只有明白了viewport的概念以及弄清楚了跟viewport有關的meta標簽的使用，才能更好地讓我們的網頁適配或響應各種不同分辨率的移動設備。一、viewport的概念

移動WEB開發之JS內置touch事件[轉]

調用 位置 .com 構造 turn listener 附件 cli 瀏覽器 iOS上的Safari也支持click 和mouseover等傳統的交互事件，只是不推薦在iOS的瀏覽器應用上使用click和mouseover，因為這兩個事件是為了支持鼠標點擊而設計 出來的。

2017年前端開發Angular.JS從入門到上手企業開發視頻

angular入門 angular學習 angular文後附錄下載鏈接：課時名稱1體驗angular2ng-init初始化變量3獲取應用程序4控制器定義作用域5使用事件6顯隱頁面7插值表達式8插值過濾器9filter過濾器10日期過濾器11新聞日期案例12字符串過濾器13數字過濾器14數組過濾器15自定義過濾

我的IT夢——web前端開發之HTML,CSS（一）

jpg 標記語言 方便 add body 前端 input cti 列表 HTML HTML全稱HyperText Markup Language（超文本標記語言） 標簽成對出現 <!DOCTYPE html> 文檔類型定義 < > 標

spark快速開發之scala基礎之2控制流程

seq ack size exceptio array 三元 選擇 tar trac 判斷結構 大體與java相當。scala沒有三元表達式。 val num = if(1>0) 1 else 0 //相當於匿名函數 println(num)

前端開發常用js代碼片段

表達式 form break ase create 字節 eve follow getc HTML5 DOM 選擇器 // querySelector() 返回匹配到的第一個元素var item = document.querySelector(‘.item‘);conso

前端系列之HTML基礎知識概述

漸變 技術分享 isa select spl 文件上傳 右鍵 文本標簽 markup 1、什麽是HTML HTML：Hyper Text Markup Language ：超文本標記語言。超文本：功能比普通文本更加強大。標記語言：使用一組標簽對內容進行描述的語言，它不是編程