1. 程式人生 > >原生js實現document.ready效果

原生js實現document.ready效果

(function ()  
{   var ie = !!(window.attachEvent && !window.opera); 
    var wk = /webkit//(/d+)/i.test(navigator.userAgent) && (RegExp.$1 < 525); 
    var fn = [];  
    var run = function () 
                {  
                    for (var i = 0; i < fn.length; i++) fn[i]();  
                };  
    var d = document;  
    d.ready = function (f)  
                {  
                    if (!ie && !wk && d.addEventListener)  
                    return d.addEventListener('DOMContentLoaded', f, false);  
                    if (fn.push(f) > 1) return;  
                    if (ie) (function ()  
                                {  
                                    try {  
                                            d.documentElement.doScroll('left');  
                                            run();  
                                        }  
                                    catch (err)  
                                        {  
                                            setTimeout(arguments.callee, 0);  
                                        }  
                                } 
                            )();  
                    else if (wk)   
                    var t = setInterval(function ()  
                                        {   
                                            if (/^(loaded|complete)$/.test(d.readyState))  
                                            clearInterval(t), run();   
                                        }, 0);  
                };  
})();   
 
//usage 
document.ready(function(){check_radio();});

相關推薦

原生js實現document.ready效果

(function ()   {   var ie = !!(window.attachEvent && !window.opera);      var wk = /webkit//(/d+)/i.test(navigator.userAgent) &a

原生js實現圖片抖動效果

int clear 停止 動效 null scrip log 定時 實現 今天來寫一個關於圖片抖動的效果,需求是:點擊圖片,讓其抖動幾下停止(類似於蘋果手機填錯密碼之後會抖一下的效果),其實想要實現這個效果,原理就是,點擊之後,讓其左移動下然後右移動一下(每移動一下減幾像素

原生js實現瀑布流效果 函式封裝

實現目標:實現瀑布流佈局、當滾動條滾動到一定距離時載入圖片 瀑布流佈局:結合視窗改變 定位第一行的盒子 第二行第一個盒子接到第一行最矮的盒子下面 當接完後更新最矮盒子 以此類推 滾動載入圖片:案例是用陣列物件實現圖片載入 條件是當載入到最後一張圖片一半+最後盒子的offsetTop小於等於螢

原生JS實現選項卡效果

var oBox = document.getElementById('box'); var aBtn = oBox.getElementsByTagName('button'); var aDiv = oBox.getElementsByTagName('d

原生JS實現DOM爆炸效果

爆炸動效分享 前言 此次分享是一次自我元件開發的總結,還是有很多不足之處,望各位大大多提寶貴意見,互相學習交流。 分享內容介紹 通過原生js程式碼,實現粒子爆炸效果元件 元件開發過程中,使用到了公司內部十分高效的工程化環境,特此打個廣告: 新浪移動誠招各種技術大大

原生js實現div跳動效果---很多炫酷效果的基本原理

效果預覽:這塊實現起來很簡單,原生的js實現更簡單。為什麼寫這個呢?因為這個其實是很多網頁動態效果的一個原型,不管是什麼大型的網站,其實底層的原理都是一樣的,基本思路是,畫出DIV,然後載入頁面的時候載入到每一個div元素,然後就是控制滑鼠的事件,移入和移出的時候執行偏移函式

原生JS實現選項卡效果例項

<!doctype html> <html> <head> <meta charset="utf-8"> <title>無標題文件</title> <style> *{ margin:0;

原生JS實現 輪播效果

<div id="playImages" class="play"> <ul class="big_pic"> <div class="prev"></div> <div class

document.ready原生js實現

var whenReady = (function () { //這個函式返回whenReady()函式 var funcs = [ ]; //當獲得事件時,要執行的函式 var ready = false; //當觸發事件處理程式時,切換為true

原生JS實現放大鏡效果

use 瀏覽器 賦值 uri 字符串 () solid adding clas 效果: 1、 鼠標放上去會有半透明遮罩、右邊會有大圖片局部圖 2、 鼠標移動時右邊的大圖片也會局部移動 放大鏡的關鍵原理: 鼠標在小圖片上移動時,通過捕捉鼠標在小圖片上的位置,定位大圖片的相

原生js實現簡單的焦點圖效果

begin pic false doctype 目標 16px urn 旅行 .cn 用到一些封裝好的運動函數,主要是定時器 效果為圖片和圖片的描述定時自動更換 <!DOCTYPE html> <html> <head>

原生JS輪播-各種效果的極簡實現

star element length for sha 部分 wid 方式 高度 寒假持續摸魚中~此為老早以前博客的重寫,當時還是分開寫的,這裏匯總重寫,正好復習一遍~ 春招我來了! 所有有意思的,一股腦先扔進收藏,然後再也不看哈哈,真是糟糕。 今日事,今日畢,說起來容易

使用原生js實現仿淘寶放大鏡效果

放大鏡實現步驟 1.獲取元素 2.實現滑鼠移上時顯示小方塊 和大圖 3.再新增中圖的移動事件 獲取滑鼠的座標付給小方塊 注意必須座標還要減去小方塊的寬高的一半 讓游標在中間顯示 4.實現大圖同比例的顯示 原理:游標移動的座標/大圖移動的座標=中圖的寬度/大圖的寬度 求的是大圖

原生js實現select效果

前言 在使用select時候原生預設樣式很難修改特別是option的樣式和滑鼠經過option時候的樣式改變很難覆蓋,能力不足尚未實現,暫且記錄後續解決,現自己寫一個選擇的效果 DOM <div class="selectBox"> <div class="se

原生js實現滑鼠點選切換效果

今天之所以寫一篇關於js的程式碼實現,一方面是因為個人習慣用jquery編寫程式碼,另一方面是因為github這個大平臺拋棄了jquery。 Jquery是一個js庫,極大簡化js程式設計,使用方便,相容性好,這篇文章就以一個例子來說明jq和js的編寫差別。 首先我們看一下效果圖:

原生js實現簡單輪播圖效果

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>首頁</title> <style> .father{

原生js實現簡單的移動端輪播圖效果

近期接觸了移動端html5和css3,想加入些輪播圖,於是在網上搜集整理了一些資料,經自己補充改進使之較為完善 原生JavaScript 移動端web輪播圖片 實現功能 索引小圓點 過渡滑動動畫的定時輪播 移動端可以滑動切換圖片 滑動距離不夠則吸附回去 效果圖

使用原生js實現輪播圖效果

這幾天在逛網站的時候,發現很多網站都有輪播圖這個效果,所以我就仿照小米的官網用原生js寫了一個輪播圖效果,希望大家喜歡。 這是我釋出在github上的最後實現的效果:https://heternally.github.io/banner/ 下面我簡單跟大家說一下

原生JS實現移動端模組的左右滑動切換效果,基於vue、stylus

原生JS實現移動端模組的左右滑動動畫效果,基於vue、stylus 大概實現方案: 手指touch螢幕的整個過程,會派發touchstart、touchmove、touchend三個事件,對這三個事件設定相應函式,通過移動過程中位置的變化計算出偏移值,進行對應的設定。 注:

原生js實現隨著滾動條滾動,導航會自動切換的效果

最近學習前端,把前面用原生js寫的一段有關tab切換效果的程式碼貼上,實現的效果比較簡陋,請大家見諒 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/