原生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/