原生javascript封裝的函數
window.onload = function(){}
2.封裝的id函數
function $(id) {
return document.getElementById(id);
}
//調用 $("id")
3.封裝的數組id
function $arr(array) {
return document.getElementsByTagName(array);
}
//調用 $arr("數組")
4.自定義平均值函數
function avg(array) {
var sum = 0;
var len = array.length;
for (var i = 0; i < len; i++) {
sum += array[i];
}
return sum / len;
}
5.全選取消
function all(flag) {
for (var i = 0; i < inputs.length; i++) {
inputs[i].checked = flag;
}
}
6.封裝的類函數
//【主流瀏覽器（谷歌，火狐，IE9以上的包括IE9）都支持document.getElementsByClassName()函數，IE678不支持】
function getClass(classname, id) {
// 主流瀏覽器帶id
if (document.getElementsByClassName) {
if (id) {
var eleId = document.getElementById(id);
return eleId.getElementsByClassName(classname);
}
// 不帶id
else {
return document.getElementsByClassName(classname);
}
}
// IE678瀏覽器 帶id
if (id) {
var eleId = document.getElementById(id);
var dom = eleId.getElementsByTagName("*");
}
// 不帶id
else {
var dom = document.getElementsByTagName("*");
}
var arr = [];
for (var i = 0; i < arr.length; i++) {
var txtarr = dom[i].className.split(" ");
for (var j = 0; j < txtarr.length; j++) {
if (txtarr.className == classname) {
arr.push(dom[j]);
}
}
}
}
7.顯示函數
function show(obj) {
obj.style.display = "block";
}
//調用 show(id)
8.隱藏函數
function hide(obj) {
obj.style.display = "none";
}
9.封裝的id和類函數
function getClass(classname, id) {
// 主流瀏覽器帶id
if (document.getElementsByClassName) {
if (id) {
var eleId = document.getElementById(id);
return eleId.getElementsByClassName(classname);
}
// 不帶id
else {
return document.getElementsByClassName(classname);
}
}
// IE678瀏覽器 帶id
if (id) {
var eleId = document.getElementById(id);
var dom = eleId.getElementsByTagName("*");
}
// 不帶id
else {
var dom = document.getElementsByTagName("*");
}
var arr = [];
for (var i = 0; i < arr.length; i++) {
var txtarr = dom[i].className.split(" ");
for (var j = 0; j < txtarr.length; j++) {
if (txtarr.className == classname) {
arr.push(dom[j]);
}
}
}
}
function $(str) {
var s = str.charAt(0);
var ss = str.substr(1);
switch (s) {
case "#":
return document.getElementById(ss);
break;
case ".":
return getClass(ss);
break;
default :
return document.getElementsByTagName(str);
}
}
10.封裝的scollTop函數
function scroll() {
// 支持IE9+ 和其餘主流瀏覽器
if (window.pageYOffset != null) {
return {
left: window.pageXOffset,
top: window.pageYOffset
}
}
// 聲明瞭DTD
// 檢測是否是怪異模式的瀏覽器，就是沒有聲明<!DOCTYPE html>
else if (document.compatMode == "CSS1Compat") {
return {
// document.documentElement就是document.html的意思 ，可是沒有documen.html寫法，谷歌不支持這個
left: document.documentElement.scrollLeft,
top: document.documentElement.scrollTop
}
}
// 剩下的確定就是怪異模式的
return {
left: document.body.scrollLeft,
top: document.body.scrollTop
}
}
// 調用
window.onscroll = function () {
// scroll().top 就是仿json的寫法
console.log(scorll().top);
}
11.封裝的可視區域大小的函數
function client() {
if (window.innerWidth != null) // ie9 + 最新瀏覽器
{
return {
width: window.innerWidth,
height: window.innerHeight
}
}
else if (document.compatMode === "CSS1Compat") // 標準瀏覽器
{
return {
width: document.documentElement.clientWidth,
height: document.documentElement.clientHeight
}
}
return { // 怪異瀏覽器
width: document.body.clientWidth,
height: document.body.clientHeight
}
}
12.阻止冒泡
//事件冒泡: 當一個元素上的事件被觸發的時候，好比說鼠標點擊了一個按鈕，一樣的事件將會在那個元素的全部祖先元素中被觸發。這一過程被稱爲事件冒泡；這個事件從原始元素開始一直冒泡到DOM樹的最上層。 順序 IE 6.0: div -> body -> html -> document 其餘瀏覽器: div -> body -> html -> document -> window 不是全部的事件都能冒泡。如下事件不冒泡：blur、focus、load、unload //阻止冒泡 e ? e.stopPropagation() : window.event.cancelBubble = true;
13.勻速動畫
function animate(obj, target) {
clearInterval(obj.timer); // 先清除定時器
var speed = obj.offsetLeft < target ? 15 : -15; // 用來判斷 應該 + 仍是 -
obj.timer = setInterval(function () {
var result = target - obj.offsetLeft; // 由於他們的差值不會超過5
obj.style.left = obj.offsetLeft + speed + "px";
if (Math.abs(result) <= 15) // 若是差值不小於 5 說明到位置了
{
clearInterval(obj.timer);
obj.style.left = target + "px"; // 有5像素差距 咱們直接跳轉目標位置
}
}, 10)
}
14.緩動動畫
function slowanimate(obj, target) {
clearInterval(obj.timer);
// 定義步長
obj.timer = setInterval(function () {
var step = (target - obj.offsetLeft) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
obj.style.left = obj.offsetLeft + step + "px";
if (target == obj.offsetLeft) {
clearInterval(obj.timer);
}
}, 30);
}
15.封裝的得到CSS樣式的函數
function getStyle(obj, attr) {
// IE瀏覽器 全部IE
if (obj.currentStyle) {
return obj.currentStyle[attr];
}
else {
// w3c 瀏覽器
return window.getComputedStyle(obj, null)[attr];
}
}
//調用 getStyle(demo,"width") 注意：屬性必須寫引號
16.封裝運動框架的單個屬性
function slowanimate(obj, attr, target) {
// 動畫原理 盒子自己的樣式 + 步長
clearInterval(obj.timer);
obj.timer = setInterval(function () {
var current = parseInt(getStyle(obj, attr));
var step = (target - current) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
obj.style[attr] = current + step + "px";
if (current == target) {
clearInterval(obj.timer);
}
}, 30);
}
17.封裝運動框架的多個屬性
function slowanimate(obj, json) {
clearInterval(obj.timer);
obj.timer = setInterval(function () {
for (var attr in json) {
var current = parseInt(getStyle(obj, attr));
var step = (json[attr] - current) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
obj.style[attr] = current + step + "px";
}
}, 30);
}
18.封裝運動框架的多個屬性 帶回調函數、透明度、層級
function animate(obj, json, fn) {
clearInterval(obj.timer);
obj.timer = setInterval(function () {
var flag = true;
for (var attr in json) {
var current = 0;
if (attr == "opacity") {
current = Math.round(parseInt(getStyle(obj, attr) * 100)) || 0;
}
else {
current = parseInt(getStyle(obj, attr));
}
var step = (json[attr] - current) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
// 判斷透明度
if (attr == "opacity") {
// 主流瀏覽器
if ("opacity" in json) {
obj.style.opacity = (current + step) / 100;
}
// IE瀏覽器
else {
obj.style.filter = "alpha(opacity = " + (current + step) * 10 + ")";
}
}
else if (attr == "zIndex") {
obj.style.zIndex = json[attr];
}
else {
obj.style[attr] = current + step + "px";
}
if (current != json[attr]) {
flag = false;
}
}
if (flag) {
clearInterval(obj.timer);
if (fn) {
fn();
}
}
}, 30);
}
//調用animate(box,{width:200,left:400,height:800,opacity:30,zIndex:3}, function () {});
19.js原生手機滑動手勢
//返回角度
function GetSlideAngle(dx, dy) {
return Math.atan2(dy, dx) * 180 / Math.PI;
}
//根據起點和終點返回方向 1：向上，2：向下，3：向左，4：向右,0：未滑動
function GetSlideDirection(startX, startY, endX, endY) {
var dy = startY - endY;
var dx = endX - startX;
varresult = 0;
//若是滑動距離過短
if (Math.abs(dx) < 2 && Math.abs(dy) < 2) {
return result;
}
var angle = GetSlideAngle(dx, dy);
if (angle >= -45 && angle < 45) {
result = 4;
} else if (angle >= 45 && angle < 135) {
result = 1;
} else if (angle >= -135 && angle < -45) {
result = 2;
}
else if ((angle >= 135 && angle <= 180) || (angle >= -180 && angle < -135)) {
result = 3;
}
return result;
20.檢測字符長度（包含中英文）
//若是直接用str.length 會把中文也按照一個字符來計算，但是一箇中文應該佔兩個字符，因此封裝這個函數
function getStringLength(str) {
// 存儲字符的總長度
var len = 0;
// 存儲每個編碼
var c = 0;
for (var i = 0; i < str.length; i++) {
c = txt.charCodeAt(i);
if (c >= 0 && c <= 127) {
len++;
}
else {
len += 2;
}
}
// 返回字符長度
return len;
}
21.自制滾動條
//首先計算滾動條的高度
// 動態計算滾動條的告訴 滾動條高度/容器的高度 = 容器的高度 / 內容的高度
bar.style.height = box.offsetHeight * box.offsetHeight / content.offsetHeight + "px";
//obj 滾動條 target 內容盒子
function startScroll(obj, target) {
obj.onmousedown = function (event) {
var event = event || window.event;
var y = event.clientY - this.offsetTop;
var that = this;
document.onmousemove = function (event) {
var event = event || window.event;
// 滾動條的的top
var barTop = event.clientY - y;
// 內容盒子的高度 = （大盒子高度-內容盒子的高度）/（滾動盒子的高度 - 滾動條的高度）* 滾動條的top值
var contentTop = (target.offsetHeight - target.parentNode.offsetHeight) / (target.parentNode.offsetHeight - that.offsetHeight) * barTop;
if (barTop <= 0) {
barTop = 0;
} else if (barTop >= target.parentNode.offsetHeight - that.offsetHeight) {
barTop = target.parentNode.offsetHeight - that.offsetHeight + "px";
} else {
target.style.top = -contentTop + "px";
}
that.style.top = barTop + "px";
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty(); // 防止拖動滑塊的時候，選中文字
}
}
document.onmouseup = function () {
document.onmousemove = null;
}
}
22.階乘(遞歸算法)
function factorial(i) {
if (i > 1) {
return factorial(i - 1) * i;
} else {
return 1;
}
}
//調用 factorial(5) 5!
23.倒計時
function showTime(obj) {
var box = document.querySelector(obj);
var ms = new Date("2018/2/11").getTime()- new Date().getTime();
var day = parseInt(ms/1000/3600/24);
var hour = Math.floor(ms/1000/3600%24);
var minute = parseInt(ms/1000/60%60);
var second = parseInt(ms/1000%60);
hour >= 10 ? hour : hour = "0" + hour;
minute >= 10 ? minute : minute = "0" + minute;
second >= 10 ? second : second = "0" + second;
box.innerHTML = "距離放假還有"+day+"天"+hour+"小時"+minute+"分"+second+"秒";
}
24.針對數組的升序降序排列
//針對數組sort（）方法的排序
var arr = [4, 12, 36, 76, 21, 9, 19, 42];
//升序
//第一種
function asc(a,b){
return a-b;
}
//調用 console.log(arr.sort(asc));
//第二種
var res =arr.sort(function (a,b){
return a-b;
})
//降序
//第一種
function desc(a,b){
return b-a;
}
console.log(arr.sort(desc));
//第二種
var res = arr.sort(function(a,b)){
return b-a;
}
//若是爲 sortfunction 參數提供了一個函數，那麼該函數必須返回下列值之一：
負值，若是所傳遞的第一個參數比第二個參數小。
負值：就不換位置
零，若是兩個參數相等。
正值，若是第一個參數比第二個參數大。
正值:就換位置
25.針對數組的累加求和
arr.reduce(function(total,current,index,arr){
return total+current;
})
26.正則驗證身份證
//身份證號驗證正則
function validateIdCard(idCard){
//15位和18位身份證號碼的正則表達式
var regIdCard=/^(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[Xx])$)$/;
//若是經過該驗證，說明身份證格式正確，但準確性還需計算
if(regIdCard.test(idCard)){
if(idCard.length==18){
var idCardWi=new Array( 7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2 ); //將前17位加權因子保存在數組裏
var idCardY=new Array( 1, 0, 10, 9, 8, 7, 6, 5, 4, 3, 2 ); //這是除以11後，可能產生的11位餘數、驗證碼，也保存成數組
var idCardWiSum=0; //用來保存前17位各自乖以加權因子後的總和
for(var i=0;i<17;i++){
idCardWiSum+=idCard.substring(i,i+1)*idCardWi[i];
}
var idCardMod=idCardWiSum%11;//計算出校驗碼所在數組的位置
var idCardLast=idCard.substring(17);//獲得最後一位身份證號碼
//若是等於2，則說明校驗碼是10，身份證號碼最後一位應該是X
if(idCardMod==2){
if(idCardLast=="X"||idCardLast=="x"){
return true;
}else{
return false;
}
}else{
//用計算出的驗證碼與最後一位身份證號碼匹配，若是一致，說明經過，不然是無效的身份證號碼
if(idCardLast==idCardY[idCardMod]){
return true;
}else{
return false;
}
}
}
}else{
return false;
}
}
26.驗證京東密碼
// 驗證密碼
function testPwd(obj){
// 一種組合
// 純數字組合
var numReg = /^\d{6,20}$/;
// 純字母組合
var letterReg = /^[a-zA-Z]{6,20}$/;
// 純英文字符組合
var charReg = /^[`~!|@#\$%\^&*()_\-\+\/=、<>'",\?\;]{6,20}$/;
// 純中文字符組合
var zhCharReg = /^[？，。《》]{3,10}$/;
// 純漢字組合
var wordReg = /^[\u4e00-\u9fa5]{6,20}$/;
// 兩種組合
// 數字和字母兩種組合
var twoReg = /^[0-9a-zA-Z]{6,20}$/;
// 數字和英文字符組合
var nlReg = /^[\d`~!|@#\$%\^&*()_\-\+\/=、<>'",\?\;]{6,20}$/;
// 數字和中文字符組合
var nzReg = /^[\d？，。《》]{6,20}$/;
// 數字和中文漢字組合
var nwReg = /^[\d\u4e00-\u9fa5]{6,20}$/;
// 字母和純英文字符組合
var lcReg = /^[a-zA-Z`~!|@#\$%\^&*()_\-\+\/=、<>'",\?\;]{6,20}$/;
// 字母和中文字符組合
var lzReg = /^[a-zA-Z？，。《》]{6,20}$/;
// 字母和中文漢字
var lwReg = /^[a-zA-Z\u4e00-\u9fa5]{6,20}$/;
// 英文字符和中文字符組合
var czReg = /^[？，。《》`~\!\|@#\$%\^&*()_\-\+\/=、<>'",\?\;]{6,20}$/;
// 英文字符和中文漢字
var cwReg = /^[\u4e00-\u9fa5\`~!|@#\$%\^&*()_\-\+\/=、<>'",\?\;]{6,20}$/;
// 中文字符和中文漢字
var zwReg = /^[\u4e00-\u9fa5\^[？，。《》]{6,20}$/;
if (numReg.test(obj) == true || letterReg.test(obj) == true || charReg.test(obj) == true || zhCharReg.test(obj) || wordReg.test(obj)) {
alert("有被盜風險,建議使用字母、數字和符號兩種及以上組合");
} else if (twoReg.test(obj) == true || nlReg.test(obj) == true || nzReg.test(obj) == true || nwReg.test(obj) == true || lcReg.test(obj) == true || lzReg.test(obj) == true || lwReg.test(obj) == true || czReg.test(obj) == true || cwReg.test(obj) == true || zwReg.test(obj) == true) {
alert("安全強度適中，可使用三種以上的組合來提升安全強度");
} else if (obj.length >= 6) {
alert("你的密碼安全");
} else {
alert("請覈對輸入");
}
}
27.利用正則替換路徑問題
/*
* 需求：給圖片的src地址前面增長爲assets
*
* 1. 將須要匹配的內容原封不動的寫入正則表達式
* 2. 將改變的內容替換爲.*?
* 3. 將.*?添加(),目的是爲了可以將src中的內容單獨匹配一次做爲匹配結果
* 4.經過replace將內容替換
* content.replace(reg,'<img src="assets/$1" alt="">')
* */
<body>
<ul>
<li class="images"><a href="1.html"><img class="a" src="images/1.jpg" alt="134534"></a></li>
<li><a href="2.html"><img src="images/2.jpg" alt="asdfas2"></a></li>
<li><a href="3.htlm"><img src="images/3.jpg" class="b" alt="3asdf"></a></li>
<li><a href="4.html"><img src="images/4.jpg" alt="45asdf4"></a></li>
<li><a href="5.html"><img src="images/5.jpg" alt="zxcv5" title="abc"></a></li>
</ul>
</body>
<script>
//1。獲取ul對象
var ul = document.querySelector('ul');
// 2.獲取ul的文本內容,此時就是獲取出來ul裏全部的內容
var content = ul.innerHTML;
// 3.寫正則表達式，先把須要改變的地址原封不動拿過來
// <img src="images/3.jpg" class="b" alt="3asdf">把不同地方用(.*?)替換，以下
// .匹配的是非空字符*匹配任意數量?拒絕貪婪，匹配任意數量的非空字符，若是不加?，就會匹配到最後
var reg = /<img(.*?)src="(.*?)"(.*?)>/g;
var result = content.replace(reg,'<img$1src="assets/$2"$3>')
console.log(result);
</script>
28.去除數組中的重複值，打印出不重複的元素
function unique(arr) {
// 定義一個空數組，用來存放不重複的值
var newArr = [];
// 遍歷原數組
for (var i = 0; i < arr.length; i++) {
// 若是新數組裏查找原數組 ，由於查找不到indexOf的值爲-1,若是查找不到就把原數組的值放到新數組中
if (newArr.indexOf(arr[i]) == -1) {
newArr.push(arr[i]);
}
}
return newArr;
}
29.獲取url地址的後綴名
var str = "https://www.baidu.com/index.php?tn=78040160_40_pg";
兩種方法：任選其一
// 數組拆分
function getURLtype(str){
var arr = str.split(".");
var arr1 = arr[arr.length - 1].split("?");
console.log(arr1[0]);
}
//輸出php
// lastIndexOf
function getURLtype(str) {
var index = str.lastIndexOf(".");
var index2 = str.indexOf("?");
console.log(str.slice(index, index2));
}
//輸出.php
30.字符串轉換爲對象
function strToObj(str) {
// 定義一個空對象
var obj = {};
// 切割字符串爲數組
var arr = str.split("; ");
// 遍歷數組
arr.forEach(function (value, key) {
// 獲取第一個等號出現的位置
var index = arr[key].indexOf("=");
// 以等號切割
var res = arr[key].split(/[=]/);
obj[res[0]] = arr[key].slice(index + 1);
})
console.log(obj);
}
31.查找字符串的每一個字符在字符串出現的次數，從小到大輸出
function strCount(str) {
var obj = {};
for (var i = 0; i < str.length; i++) {
if (obj[str[i]]) {
//obj[str[i]] 是對象的一種形式，也就是obj[str[0]] 就是obj['a']=obj.a，在str中查找obj.a obj.b 等等,若是找到 就+1，找不到就是1
obj[str[i]]++;
} else {
obj[str[i]] = 1;
}
}
// 獲取object.keys ["1", "2", "a", "b", "d", "e"]
var num = Object.keys(obj).sort(function (a,b) {
// obj[a] obj.1 就是次數
return obj[a]-obj[b];
});
var newObj = {};
for (var item in num) {
newObj[num[item]] = obj[num[item]];
}
return newObj;
}
32.全選，取消全選，反選
// 全選
function allSelect(obj, input) {
obj.onclick = function () {
input.forEach(function (value, key) {
input[key].checked = true;
})
}
}
// 取消全選
function cancelSelect(obj, input) {
obj.onclick = function () {
input.forEach(function (value, key) {
input[key].checked = false;
})
}
}
// 反選
function reverseSelect(obj, input) {
obj.onclick = function () {
input.forEach(function (value, key) {
if (input[key].checked){
input[key].checked = false;
} else {
input[key].checked = true;
}
})
}
}
33.添加類名、刪除類名（移除類名）
// 添加類名
function addClass(obj, className) {
// 獲取對象的類名，而且去掉兩邊空格 以防class = " box "的狀況
var oldClass = obj.className.trim();
// 把獲取到的對象的類名以空格的形式拆分爲數組,指定的形式能夠是正則表達式,/\s+/ \s是匹配到空格，+最少匹配一個，以防頁面中有多個空格
var classArr = oldClass.split(/\s+/);
// 在拆分後的數組中查找要傳進來的類名，經過索引值，若是索引值爲-1，就查找不到
if (classArr.indexOf(className) == -1) {
// 找不到須要添加的類型的話，就把這個類名添加到數組中
classArr.push(className);
// 而後把添加類名的對象的類名的數組形式轉換爲字符串,此時obj.className中的className 不是形參，而是類名
obj.className = classArr.join(' ');
}
}
// 移除類名
function removeClass(obj, className) {
var oldClass = obj.className.trim();
var classArr = oldClass.split(/\s+/);
// 在拆分後的數組若是找到了須要移除的類名，那麼就移除這個類名
if (classArr.indexOf(className) != -1) {
classArr.splice(classArr.indexOf(className), 1);
obj.className = classArr.join(' ');
}
}
34.放大鏡效果
/*
* 功能:實現電商網站放大鏡效果
* @param Object box: 放大鏡最大盒子的容器
* @param Object small: 放小圖片的小盒子
* @param Object smallImg: 小盒子的圖片
* @param Object shadow: 鼠標遮罩的陰影層
* @param Object big: 裝放大圖片的盒子
* @param Object bigImg: 放大的圖片
* */
function magnifier(box, small, smallImg, shadow, big, bigImg) {
// 鼠標移入小盒子，顯示陰影放大鏡盒子
small.onmouseenter = function () {
shadow.style.display = "block";
big.style.display = "block";
// 設置陰影盒子的寬高陰影盒子的寬高，不是隨便給的
// 陰影盒子的寬高/small盒子的寬高 應該等於 big盒子的寬高(不能包含邊框 ，因此用clientWidth 由於offsetWidth包含寬高)/ bigImg的寬高，他們是等比例關係 也就是x/450 = 540/800
shadow.style.width = small.offsetWidth * big.clientWidth / bigImg.offsetWidth + "px";
shadow.style.height = small.offsetWidth * big.clientWidth / bigImg.offsetWidth + "px";
// 移動陰影，由於只有在進入small盒子是，才能夠移動，因此在這裏出發移動事件
small.onmousemove = function (ent) {
var e = ent || window.event;
/*
* 讓鼠標一直保持在陰影盒子的中間,因此鼠標的起始位置就是陰影盒子的寬高的一半
* 陰影的left/top值= 鼠標距離頁面的距離 - 小盒子距離頁面的距離 - 陰影盒子自身（寬高）的一半
* */
// 此時沒有small盒子的offsetLeft 是由於offsetLeft屬性是距離有定位的祖輩盒子的距離，由於small的父級盒子box相對定位，因此small.offsetLeft 永遠都爲0，由於box和small盒子同樣大，因此用box.offsetLeft
// 爲了避免讓陰影盒子超出邊界，須要判斷一下，
var left = e.pageX - box.offsetLeft - shadow.offsetWidth / 2;
if (left < 0) {
left = 0;
} else if (left > box.offsetWidth - shadow.offsetWidth) {
left = box.offsetWidth - shadow.offsetWidth;
}
var top = e.pageY - box.offsetTop - shadow.offsetHeight / 2;
if (top < 0) {
top = 0;
} else if (top > box.offsetWidth - shadow.offsetWidth) {
top = box.offsetWidth - shadow.offsetWidth;
}
shadow.style.left = left + "px";
shadow.style.top = top + "px";
// 上面都是計算出陰影的移動，下面計算出放大鏡的右側盒子移動的部分
/*
* 放大鏡應該是等比例縮放的，small盒子的寬高450，放大鏡圖片的是800
* 右側盒子和左側盒子的比例就是800/450，假如 左側鼠標的座標位置是（100,100），若是他們是二倍關係，那麼右側盒子圖片的座標就是應該(100*2,100*2)
* 因此右側盒子圖片的left，top值就應該是(左側left*800/450，左側top*800/450)
* 因爲右側是盒子裏麪包含一個特別大的圖片，圖片的內容也超出右側盒子的距離，能夠用big.scrollTop（Left） 來設置座標
* */
big.scrollTop = top * bigImg.offsetHeight / smallImg.offsetWidth;
big.scrollLeft = left * bigImg.offsetHeight / smallImg.offsetWidth;
}
}
// 鼠標離開小盒子，繼續隱藏
small.onmouseleave = function () {
shadow.style.display = "none";
big.style.display = "none";
}
};
35.添加移除綁定事件
/*
* 添加綁定事件
* @param Object obj:綁定的事件對象
* @param String eventName:綁定的事件名稱
* @param function callback:綁定事件執行的函數
* */
function addEvent(obj, eventName, callback) {
if (obj.addEventListener) {
obj.addEventListener(eventName, callback, false);
} else {
obj.attachEvent('on' + eventName, callback);
}
}
/*
* 移除綁定事件
* @param Object obj:移除綁定的事件對象
* @param String eventName:移除綁定的事件名稱
* @param function callback:移除綁定事件執行的函數
* */
function removeEvent(obj, eventName, callback) {
if (obj.removeEventListener) {
obj.removeEventListener(eventName, callback, false);
} else {
obj.detachEvent('on' + eventName, callback);
}
}
36.獲取樣式
/*
* 獲取樣式
* @param Object obj獲取樣式的對象
* @param Object attr:獲取的css樣式名稱
* return 獲取樣式的值
* */
function getStyle(obj, attr) {
return document.defaultView ? document.defaultView.getComputedStyle(obj, null)[attr] : obj.currentStyle[attr];
}
// 調用，須要給attr加引號
console.log(getStyle(box, 'backgroundColor'));
主流瀏覽器獲取的顏色都轉換成rgb值，IE8獲取的是style樣式裏面寫的屬性值，寫什麼就是什麼
37.阻止默認行爲
e ?e.preventDefault() : window.event.returnValue = false;e ?e.preventDefault() : window.event.returnValue = false;
38.移動端視口
function getFontSize() {
// 定義html的字體大小
var htmlFontSize = 16;
// 以iphone6爲準 設置窗口寬度
var cw = 375;
// 獲取新窗口的可視寬度
var newCw = document.documentElement.clientWidth || document.body.clientWidth;
// 獲取新窗口的字體大小
var newHtmlFontSize = newCw * htmlFontSize / cw;
document.documentElement.style.fontSize = newHtmlFontSize + 'px';
}
相關文章
- 1. 封裝原生promise函數
- 2. 封裝原生JavaScript的ajax
- 3. 我的封裝JavaScript函數
- 4. javascript原生封裝一個淡入淡出效果的函數
- 5. 原生JavaScript封裝Ajax
- 6. 用原生js封裝transform函數
- 7. 原生JS封裝ajax函數
- 8. 使用原生js封裝Ajax函數
- 9. js原生：封裝document.getElementByClassName()函數
- 10. 自用封裝javascript函數
- 更多相關文章...
- • C# 封裝 - C#教程
- • MyBatis的工作原理 - MyBatis教程
- • Composer 安裝與使用
- • TiDB 在摩拜單車在線數據業務的應用和實踐
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. 跳槽面試的幾個實用小技巧，不妨看看！
- 2. Mac實用技巧 |如何使用Mac系統中自帶的預覽工具將圖片變成黑白色?
- 3. Mac實用技巧 |如何使用Mac系統中自帶的預覽工具將圖片變成黑白色?
- 4. 如何使用Mac系統中自帶的預覽工具將圖片變成黑白色?
- 5. Mac OS非兼容Windows軟件運行解決方案——「以VMware & Microsoft Access爲例「
- 6. 封裝 pyinstaller -F -i b.ico excel.py
- 7. 數據庫作業三ER圖待完善
- 8. nvm安裝使用低版本node.js(非命令安裝)
- 9. 如何快速轉換圖片格式
- 10. 將表格內容分條轉換爲若干文檔
歡迎關注本站公眾號,獲取更多信息
