js之單選框判斷身份和h5頁面點擊圖片放大

例:一個系統分爲管理員登陸和用戶登陸,不一樣的身份顯示不一樣的頁面和加載操做不一樣的數據庫,登陸前須要點擊單選框指明登錄者身份。
jquery

1    <input type="radio" name="identity" value="0">管理員</br>
2     <input type="radio" name="identity" value="1">用戶</br> 

 判斷哪一個選中能夠使用僞類數據庫

document.querySelector("[name='identity']:checked").value
或者使用jquery  $("[name='identity']:checked").val()

這樣就能夠經過返回的0或1判斷身份。app

 

h5頁面點擊放大:思路使用經過fixed定位的元素當遮罩層,而後將放大的圖片放在遮罩層上面。點擊遮罩層,遮罩層消失。ide

首先給遮罩層設置寬高和定位this

1 div.click-enlarge {
2     position: fixed;
3     top: 0;
4     left: 0;
5     z-index: 9999;
6     background-color: rgba(0, 0, 0, 0.8);
7     display: none;
8 }

而後編輯js邏輯spa

 1   var imgs = document.querySelectorAll("img");  //獲取點擊須要方法的圖片
 2     var enlarge = document.querySelector(".click-enlarge");            //獲取遮罩層容器
 3     var clienthight = document.documentElement.clientHeight;           //獲取屏幕的寬高
 4     var clientwidth = document.documentElement.clientWidth;
 5     enlarge.style.width = clientwidth + 'px';                    //使遮罩層鋪滿屏幕
 6     enlarge.style.height = clienthight + 'px'; 7     imgs.forEach(function(v, i) {                           //循環獲取的圖片並綁定點擊事件
 8         imgs[i].onclick = function() {
 9             enlarge.style.display = "block";
10             var imgsrc = v.src;
11             var newimg = document.createElement("img");
12             newimg.src = imgsrc;
13             newimg.style.width = '100%';
14             newimg.style.position = "absolute";
15             newimg.style.top = '30%';
16             enlarge.innerHTML = "";
17             enlarge.appendChild(newimg);
18         }
19     });
20     enlarge.onclick = function() {
21         this.style.display = "none";
22     };

我的總結筆記,不是最好倒是實踐,有誤請指正,謝謝!code

相關文章
相關標籤/搜索