js之单选框判断身份和h5页面点击图片放大

2018/03/05 19:12
阅读数 41

例:一个系统分为管理员登录和用户登录,不同的身份显示不同的页面和加载操作不同的数据库,登录前需要点击单选框指明登陆者身份。

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判断身份。

 

h5页面点击放大:思路使用通过fixed定位的元素当遮罩层,然后将放大的图片放在遮罩层上面。点击遮罩层,遮罩层消失。

首先给遮罩层设置宽高和定位

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逻辑

 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     };

个人总结笔记,不是最好却是实践,有误请指正,谢谢!

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部