xml地图|网站地图|网站标签 [设为首页] [加入收藏]

正规赌博十大app排名

当前位置:网上十大正规赌博平台 > 正规赌博十大app排名 > jquery实现简单的遮罩层,jQuery实现本地预览上传

jquery实现简单的遮罩层,jQuery实现本地预览上传

来源:http://www.nb-machinery.com 作者:网上十大正规赌博平台 时间:2019-07-14 03:12

本文实例介绍了基于JQUERY扩展,图片上传预览插件,目前兼容浏览器(IE 谷歌 火狐) 不支持safari,分享给大家供大家参考,具体内容如下

本文实例讲解了jquery遮罩层,包括遮罩层的不同样式实现、mask实现遮罩层等,分享给大家供大家参考,具体内容如下

废话不多说了,直接给大家上array对象扩展代码了,具体代码如下所示:

HTML代码:

一、jQuery实现遮罩层的不同样式
**
1.1 背景半透明遮罩层样式**
需要一个黑色(当然也可以其他)背景,且须设置为绝对定位,以下是项目中用到的css样式:

/**
* Created by laixiangran on 2016/01/07.
* Array扩展
*/
(function() {
// 遍历数组
if (typeof Array.prototype.forEach != "function") {
Array.prototype.forEach = function (fn, context) {
for (var i = 0; i < this.length; i  ) {
if (typeof fn === "function" && Object.prototype.hasOwnProperty.call(this, i)) {
fn.call(context, this[i], i, this);
}
}
};
}
// 让数组中的每一个元素调用给定的函数,然后把得到的结果放到新数组中返回
if (typeof Array.prototype.map != "function") {
Array.prototype.map = function (fn, context) {
var arr = [];
if (typeof fn === "function") {
for (var k = 0, length = this.length; k < length; k  ) {
arr.push(fn.call(context, this[k], k, this));
}
}
return arr;
};
}
// 把符合条件的元素放到一个新数组中返回
if (typeof Array.prototype.filter != "function") {
Array.prototype.filter = function (fn, context) {
var arr = [];
if (typeof fn === "function") {
for (var k = 0, length = this.length; k < length; k  ) {
fn.call(context, this[k], k, this) && arr.push(this[k]);
}
}
return arr;
};
}
// 如果数组中的每个元素都能通过给定的函数的测试,则返回true,反之false
if (typeof Array.prototype.every != "function") {
Array.prototype.every = function (fn, context) {
var passed = true;
if (typeof fn === "function") {
for (var k = 0, length = this.length; k < length; k  ) {
if (passed === false) break;
passed = !!fn.call(context, this[k], k, this);
}
}
return passed;
};
}
// 类似every函数,但只要有一个通过给定函数的测试就返回true
if (typeof Array.prototype.some != "function") {
Array.prototype.some = function (fn, context) {
var passed = false;
if (typeof fn === "function") {
for (var k = 0, length = this.length; k < length; k  ) {
if (passed === true) break;
passed = !!fn.call(context, this[k], k, this);
}
}
return passed;
};
}
// 返回元素在数组的索引,没有则返回-1,从左到右
if (typeof Array.prototype.indexOf != "function") {
Array.prototype.indexOf = function (item, index) {
var n = this.length,
i = index == null ? 0 : index < 0 ? Math.max(0, n   index) : index;
for (; i < n; i  ) {
if (i in this && this[i] === item) {
return i
}
}
return -1
};
}
// 返回元素在数组的索引,没有则返回-1,从右到左
if (typeof Array.prototype.lastIndexOf != "function") {
Array.prototype.lastIndexOf = function (item, index) {
var n = this.length,
i = index == null ? n-1 : index < 0 ? Math.max(0, n   index) : index;
for (; i >= 0; i--) {
if (i in this && this[i] === item) {
return i;
}
}
return -1;
};
}
// 让数组元素依次调用给定函数,最后返回一个值(从左到右)
if (typeof Array.prototype.reduce != "function") {
Array.prototype.reduce = function (callback, initialValue) {
var previous = initialValue, k = 0, length = this.length;
if (typeof initialValue === "undefined") {
previous = this[0];
k = 1;
}
if (typeof callback === "function") {
for (k; k < length; k  ) {
this.hasOwnProperty(k) && (previous = callback(previous, this[k], k, this));
}
}
return previous;
};
}
// 让数组元素依次调用给定函数,最后返回一个值(从右到左)
if (typeof Array.prototype.reduceRight != "function") {
Array.prototype.reduceRight = function (callback, initialValue) {
var length = this.length, k = length - 1, previous = initialValue;
if (typeof initialValue === "undefined") {
previous = this[length - 1];
k--;
}
if (typeof callback === "function") {
for (k; k > -1; k-=1) {
this.hasOwnProperty(k) && (previous = callback(previous, this[k], k, this));
}
}
return previous;
};
}
// 去掉重复项(唯一性),返回新数组
if (typeof Array.prototype.uniq != "function") {
Array.prototype.uniq = function() {
var arr = [];
arr[0] = this[0];
for (var i = 1; i < this.length; i  ) {
if (arr.indexOf(this[i]) == -1) {
arr.push(this[i]);
}
}
return arr;
};
}
// 指定删除数组中某值
if (typeof Array.prototype.remove != "function") {
Array.prototype.remove = function(item) {
for (var i = this.length; i >= 0; i--) {
if (item === this[i]) {
this.splice(i, 1);
}
}
return this;
};
}
// 打乱数组顺序
if (typeof Array.prototype.shuffle != "function") {
Array.prototype.shuffle = function() {
var i = this.length;
while (i) {
var j = Math.floor(Math.random()*i);
var t = this[--i];
this[i] = this[j];
this[j] = t;
}
return this;
};
}
// 求数组的最大值
if (typeof Array.prototype.max != "function") {
Array.prototype.max = function() {
return Math.max.apply({}, this)
};
}
// 求数组的最小值
if (typeof Array.prototype.max != "function") {
Array.prototype.min = function() {
return Math.min.apply({}, this)
};
} 

// 判断是否为数组
if (typeof Array.prototype.isArray != "function") {
Array.prototype.isArray = function() {
return Object.prototype.toString.apply(this) === "[object Array]";
};
} 
}());
<html>
<head>
<title>图片上传预览演示</title>
<script src="http://www.nb-machinery.com/uploads/allimg/190714/031222H38-0.jpg" type="text/javascript"></script>
<script src="16/uploadPreview.js" type="text/javascript"></script>
<script>
$(function () {
$("#up").uploadPreview({ Img: "ImgPr", Width: 120, Height: 120 });
});
</script>
</head>
<body>
<div style="width:500px;margin:0px auto;"><h2>图片上传预览演示</h2>
<a href="# target="_blank">原文</a>

<div><img id="ImgPr" width="120" height="120" /></div>
<input type="file" id="up" />
</div>

</body>
</html>
/* 半透明的遮罩层 */
#overlay {
  background: #000;
  filter: alpha(opacity=50); /* IE的透明度 */
  opacity: 0.5; /* 透明度 */
  display: none;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  z-index: 100; /* 此处的图层要大于页面 */
  display:none;
}

下面是string对象扩展代码如下所示:

js代码:

1.2 jQuery实现遮罩

/**
* Created by laixiangran on 2015/12/12.
* String扩展
*/
(function() {
// 十六进制颜色值的正则表达式
var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
// RGB颜色转换为16进制
if (typeof String.prototype.rgbToHex != "function") {
String.prototype.rgbToHex = function() {
var that = this;
if (/^(rgb|RGB)/.test(that)) {
var aColor = that.replace(/(?:(|)|rgb|RGB)*/g,"").split(",");
var strHex = "#";
for (var i=0; i<aColor.length; i  ) {
var hex = Number(aColor[i]).toString(16);
if (hex === "0") {
hex  = hex;
}
strHex  = hex;
}
if (strHex.length !== 7) {
strHex = that;
}
return strHex;
}else if (reg.test(that)) {
var aNum = that.replace(/#/,"").split("");
if (aNum.length === 6){
return that;
}else if (aNum.length === 3) {
var numHex = "#";
for (var j=0; j<aNum.length; j  ) {
numHex  = (aNum[j] aNum[j]);
}
return numHex;
}
}else{
return that;
}
};
}
// 16进制颜色转为RGB格式
if (typeof String.prototype.hexToRgb != "function") {
String.prototype.hexToRgb = function() {
var sColor = this.toLowerCase();
if (sColor && reg.test(sColor)) {
if (sColor.length === 4) {
var sColorNew = "#";
for (var i = 1; i < 4; i  ) {
sColorNew  = sColor.slice(i,i 1).concat(sColor.slice(i,i 1));
}
sColor = sColorNew;
}
// 处理六位的颜色值
var sColorChange = [];
for (var j=1; j<7; j =2) {
sColorChange.push(parseInt("0x" sColor.slice(j,j 2)));
}
return "RGB("   sColorChange.join(",")   ")";
}else{
return sColor;
}
};
}
// 移除字符串首尾空白
if (typeof String.prototype.trim != "function") {
String.prototype.trim = function() {
return this.replace(/^s |s $/g, "");
};
}
}());
*参数说明: Img:图片ID;Width:预览宽度;Height:预览高度;ImgType:支持文件类型;Callback:选择文件显示图片后回调方法;
*使用方法: 
<div>
<img id="ImgPr" width="120" height="120" /></div>
<input type="file" id="up" />
把需要进行预览的IMG标签外 套一个DIV 然后给上传控件ID给予uploadPreview事件
$("#up").uploadPreview({ Img: "ImgPr", Width: 120, Height: 120, ImgType: ["gif", "jpeg", "jpg", "bmp", "png"], Callback: function () { }});
*/
jQuery.fn.extend({
uploadPreview: function (opts) {
var _self = this,
_this = $(this);
opts = jQuery.extend({
Img: "ImgPr",
Width: 100,
Height: 100,
ImgType: ["gif", "jpeg", "jpg", "bmp", "png"],
Callback: function () {}
}, opts || {});
_self.getObjectURL = function (file) {
var url = null;
if (window.createObjectURL != undefined) {
url = window.createObjectURL(file)
} else if (window.URL != undefined) {
url = window.URL.createObjectURL(file)
} else if (window.webkitURL != undefined) {
url = window.webkitURL.createObjectURL(file)
}
return url
};
_this.change(function () {
if (this.value) {
if (!RegExp(".("   opts.ImgType.join("|")   ")$", "i").test(this.value.toLowerCase())) {
alert("选择文件错误,图片类型必须是"   opts.ImgType.join(",")   "中的一种");
this.value = "";
return false
}
if ($.browser.msie) {
try {
$("#"   opts.Img).attr('src', _self.getObjectURL(this.files[0]))
} catch (e) {
var src = "";
var obj = $("#"   opts.Img);
var div = obj.parent("div")[0];
_self.select();
if (top != self) {
window.parent.document.body.focus()
} else {
_self.blur()
}
src = document.selection.createRange().text;
document.selection.empty();
obj.hide();
obj.parent("div").css({
'filter': 'progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)',
'width': opts.Width   'px',
'height': opts.Height   'px'
});
div.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = src
}
} else {
$("#"   opts.Img).attr('src', _self.getObjectURL(this.files[0]))
}
opts.Callback()
}
})
}
});
/* 显示遮罩层 */
function showOverlay() {
  $("#overlay").height(pageHeight());
  $("#overlay").width(pageWidth());

  // fadeTo第一个参数为速度,第二个为透明度
  // 多重方式控制透明度,保证兼容性,但也带来修改麻烦的问题
  $("#overlay").fadeTo(200, 0.5);
}

/* 隐藏覆盖层 */
function hideOverlay() {
  $("#overlay").fadeOut(200);
}

/* 当前页面高度 */
function pageHeight() {
  return document.body.scrollHeight;
}

/* 当前页面宽度 */
function pageWidth() {
  return document.body.scrollWidth;
}

您可能感兴趣的文章:

  • Javascript string 扩展库代码
  • Javascript String对象扩展HTML编码和解码的方法
  • javascript String 的扩展方法集合
  • JavaScript 字符串数字左补位,右补位,取固定长度,截位扩展函数代码
  • JavaScript中ES6字符串扩展方法
  • JavaScript常用字符串与数组扩展函数小结
  • js实现prototype扩展的方法(字符串,日期,数组扩展)
  • javascript框架设计读书笔记之字符串的扩展和修复
  • JS字符串函数扩展代码
  • JavaScript实现替换字符串中最后一个字符的方法
  • JavaScript利用正则表达式替换字符串中的内容
  • js replace(a,b)之替换字符串中所有指定字符的方法
  • JavaScript基于扩展String实现替换字符串中index处字符的方法

直接上第二段代码,jquery js实现上传图片之前预览本地图片

1.3 提示框
遮罩的目的无非让人无法操作内容,突出提示框,而提示框可参考上面的制作,z-index比遮罩层更高便可。主要问题是,如何控制提示框在浏览器居中。

<style type="text/css">
#preview_wrapper{  
  display:inline-block;  
  width:300px;  
  height:300px;  
  background-color:#CCC;
}  
#preview_fake{  
  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);  
}  
#preview_size_fake{  
  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);   
  visibility:hidden;  
}  
#preview{  
  width:300px;  
  height:300px;  
}  
</style>

<script type="text/javascript">
function onUploadImgChange(sender){  
  if( !sender.value.match( /.jpg|.gif|.png|.bmp/i ) ){  
    alert('图片格式无效!');  
    return false;  
  }
  var objPreview = document.getElementByIdx_x('preview');  
  var objPreviewFake = document.getElementByIdx_x('preview_fake');  
  var objPreviewSizeFake = document.getElementByIdx_x('preview_size_fake');
  if( sender.files && sender.files[0] ){  
    objPreview.style.display = 'block';  
    objPreview.style.width = 'auto';  
    objPreview.style.height = 'auto';  

    // Firefox 因安全性问题已无法直接通过 input[file].value 获取完整的文件路径  
    objPreview.src = sender.files[0].getAsDataURL();    
  }else if( objPreviewFake.filters ){  
    // IE7,IE8 在设置本地图片地址为 img.src 时出现莫名其妙的后果  
    //(相同环境有时能显示,有时不显示),因此只能用滤镜来解决  

    // IE7, IE8因安全性问题已无法直接通过 input[file].value 获取完整的文件路径  
    sender.select();  
    var imgSrc = document.selection.createRange().text;  

    objPreviewFake.filters.item(  
      'DXImageTransform.Microsoft.AlphaImageLoader').src = imgSrc;  
    objPreviewSizeFake.filters.item(  
      'DXImageTransform.Microsoft.AlphaImageLoader').src = imgSrc;  

    autoSizePreview( objPreviewFake,  
      objPreviewSizeFake.offsetWidth, objPreviewSizeFake.offsetHeight );  
    objPreview.style.display = 'none';  
  }  
}  

function onPreviewLoad(sender){  
  autoSizePreview( sender, sender.offsetWidth, sender.offsetHeight );  
}  

function autoSizePreview( objPre, originalWidth, originalHeight ){  
  var zoomParam = clacImgZoomParam( 300, 300, originalWidth, originalHeight );  
  objPre.style.width = zoomParam.width   'px';  
  objPre.style.height = zoomParam.height   'px';  
  objPre.style.marginTop = zoomParam.top   'px';  
  objPre.style.marginLeft = zoomParam.left   'px';  
}  

function clacImgZoomParam( maxWidth, maxHeight, width, height ){  
  var param = { width:width, height:height, top:0, left:0 };  

  if( width>maxWidth || height>maxHeight ){  
    rateWidth = width / maxWidth;  
    rateHeight = height / maxHeight;  

    if( rateWidth > rateHeight ){  
      param.width = maxWidth;  
      param.height = height / rateWidth;  
    }else{  
      param.width = width / rateHeight;  
      param.height = maxHeight;  
    }  
  }  

  param.left = (maxWidth - param.width) / 2;  
  param.top = (maxHeight - param.height) / 2;  

  return param;  
}
</script>

<input name="localfile" type="file" id="localfile" size="28" onchange="onUploadImgChange(this)"/>

<!--以下是预览图片用的-->
<div id="preview_wrapper">
<div id="preview_fake">
<img id="preview" src="" onload="onPreviewLoad(this)"/>
</div>
</div>
<br/>
<img id="preview_size_fake" />
/* 定位到页面中心 */
function adjust(id) {
  var w = $(id).width();
  var h = $(id).height();

  var t = scrollY()   (windowHeight()/2) - (h/2);
  if(t < 0) t = 0;

  var l = scrollX()   (windowWidth()/2) - (w/2);
  if(l < 0) l = 0;

  $(id).css({left: l 'px', top: t 'px'});
}

//浏览器视口的高度
function windowHeight() {
  var de = document.documentElement;

  return self.innerHeight || (de && de.clientHeight) || document.body.clientHeight;
}

//浏览器视口的宽度
function windowWidth() {
  var de = document.documentElement;

  return self.innerWidth || (de && de.clientWidth) || document.body.clientWidth
}

/* 浏览器垂直滚动位置 */
function scrollY() {
  var de = document.documentElement;

  return self.pageYOffset || (de && de.scrollTop) || document.body.scrollTop;
}

/* 浏览器水平滚动位置 */
function scrollX() {
  var de = document.documentElement;

  return self.pageXOffset || (de && de.scrollLeft) || document.body.scrollLeft;
}

以上就是本文的全部内容,希望对大家的学习有所帮助。

二、Jquery超简单遮罩层实现代码 在开发中,为了避免二次提交,遮罩层的运用越来越普遍
看了很多代码,下面跟大家分享一下我认为最简单的遮罩层实现方式:
1.样式如下设置: CSS代码:

本文由网上十大正规赌博平台发布于正规赌博十大app排名,转载请注明出处:jquery实现简单的遮罩层,jQuery实现本地预览上传

关键词: ESB电竞