图片轮播，禁止页面放大缩小（原创）

Html

Css

#box {
	width:100%;
	height:80%;
	background-color:black;
	overflow:hidden;
}
#box ul {
	white-space:nowrap;
	box-sizing:border-box;
	padding:0;
	margin:0;
}
#box ul>li {
	display:inline-block;
	width:auto;
	height:100%;
	padding:0 1px;
	box-sizing:border-box;
}
#box ul>li>img {
	height:100%;
	width:560px;
	margin:0;
	padding:0;
}

window.onload = function() {
     var box = document.querySelector("#box");
     var ul = document.querySelector("#box ul");
     var sW = ul.scrollWidth;
     ul.innerHTML += ul.innerHTML;
     ul.style.width = ul.scrollWidth;

var v = 0;
     setInterval(() => {
         v++;
         if (v > sW) {
             v = 1;
         }
         ul.style.transform = "translateX(" + -v + "px)";
     }, 20);
 }

//jinzhi
 var isFirefox = /Firefox/i.test(navigator.userAgent) ? true : false;
 var unMouseBtn = function(e) {
     var e = e || window.event;
     if (e.wheelDelta && e.ctrlKey) { //IE/Opera/Chrome e.wheelDelta±120
         e.preventDefault ? e.preventDefault() : e.returnValue = false;
     } else if (e.detail && e.ctrlKey) { //Firefox e.detail±3
         e.preventDefault ? e.preventDefault() : e.returnValue = false;
     }
 };
 var mousewheelevt = isFirefox ? "DOMMouseScroll" : "mousewheel";
 if (document.attachEvent) { //IE/Opera/Chrome
     document.attachEvent("on" + mousewheelevt, unMouseBtn);
 } else if (document.addEventListener) { //Firefox
     document.addEventListener(mousewheelevt, unMouseBtn, false);
 }
 var unCtrl = function(e) {
     var e = e || window.event;
     var isFirefox = (/Firefox/i.test(navigator.userAgent)) ? true : false; //Firefox
     var code = isFirefox ? "109,107,173,61" : "109,107,189,187"; // +  -
     if (e.ctrlKey && code.indexOf(e.keyCode) != -1) {
         e.preventDefault ? e.preventDefault() : e.returnValue = false;
     }
 };
 document.onkeydown = unCtrl;

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

图片轮播，禁止页面放大缩小（原创）

代码描述：图片无限轮播，禁止整个网页页面放大缩小

禁止网页放大缩小，自适应各种浏览器。由于现在的网页都是可以放大缩小的，而
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
在手机上能禁止放大缩小，但在网页端无法实现禁止放大缩小的功能，所以我这个主要是针对pc端的网页禁止放大缩小。希望大家能够多多支持

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

轻描淡写@忧伤

相关代码

图片轮播，禁止页面放大缩小（原创）

最新