王新阳

简要教程

这是一款轻量级的纯JavaScript炫酷鼠标滑过图片放大特效插件。该插件有两种显示形式：鼠标点击和鼠标滑过。两种方式都可以制作出图片放大镜效果，并且还可以将这两种放大镜效果结合在一起使用。

安装

可以通过NPM或Bower来安装Drift插件。

npm install drift-zoom
bower install drift                

使用方法

Luminous鼠标点击放大镜效果

下载压缩包，在页面中引入Luminous.js和luminous-basic.css文件。

<link rel="stylesheet" media="screen, projection" href="dist/luminous-basic.css">              
<script src="dist/Luminous.js"></script>                

Luminous放大镜效果的HTML结构是使用一个超链接元素来包裹一张图片，超链接的地址是高清大图的地址，图片指向的是缩略图。

<a class="demo-trigger" href="img/wristwatch.jpg">
  <img src="img/wristwatch-thumb.jpg">
</a>                

完成上面的操作之后，可以通过下面的JS代码来进行初始化。

var demoTrigger = document.querySelector('.demo-trigger');
new Luminous(demoTrigger);                

Drift鼠标滑过放大镜效果

下载压缩包，在页面中引入Drift.js和drift-basic.css文件。

<link rel="stylesheet" media="screen, projection" href="dist/drift-basic.css">              
<script src="dist/Drift.js"></script>                

Drift图片放大镜的HTML结果和Luminous放大镜的区别是它使用data-zoom属性来作为高清大图。

<img class="demo-trigger"
     src="img/wristwatch-thumb.jpg"
     data-zoom="img/wristwatch-hd.jpg">                

初始化Drift图片放大镜插件。

var demoTrigger = document.querySelector('.demo-trigger');
new Drift(demoTrigger);               

结合使用Luminous和Drift

Luminous和Drift图片放大镜效果可以结合在一起使用。例如DEMO3的HTML结构如下：

<div class="wrapper">
  <a class="demo-trigger" href="img/vintagecameras-hd.jpg">
    <img src="img/vintagecameras-thumb.jpg">
  </a>
 
  <div class="detail">
    <section>
      <h1>......</h1>
      <p>......</p>
    </section>
  </div>
</div>                

初始化的方法如下：

var demoTrigger = document.querySelector('.demo-trigger');
new Drift(demoTrigger, {
    paneContainer: document.querySelector('.detail'),
    inlinePane: 900,
    inlineOffsetY: -85,
    containInline: true,
    sourceAttribute: 'href'
});
new Luminous(demoTrigger);                

配置参数

namespace：生成元素的class名称前缀。默认值：null。
showWhitespaceAtEdges：当接近边部时ZoomPane是否显示白边，默认值是false。
containInline：内部的ZoomPane是否在内部。默认值为false。
inlineOffsetX，inlineOffsetY：How much to offset the ZoomPane from the interaction point when inline.
sourceAttribute：用于指向大图的属性，默认值为：data-zoom。
zoomFactor：图片放大倍数。默认值为3。
paneContainer：添加到非内部放大镜上面的DOM元素。默认值为：document.body。
inlinePane：合适切换到内部放大镜模式。这个取值可以是一个布尔值或一个整数。如果为true，将一直是内部放大镜模式，如果为false，将在`windowWidth <= inlinePane时切换到内部放大镜模式。默认值为375。
handleTouch：如果为true，touch事件将被启用。
onShow：ZoomPane显示时触发。
onHide：ZoomPane隐藏时触发。
injectBaseStyles：在页面中添加基本的样式。

2020-03-21

回应

修改style样式：
1. 通过document.styleSheets[n] // n表示期望修改的样式表序号，从0开始计数来获取到期望修改的样式表，通过cssRules[0]获取到该样式表的css内容，通过style修改特定样式；
2. 修改特定元素节点的style内容cssText可以一次性修改多个css属性style.attrName 修改单个属性 attrName的值
3. 通过setAttribute 修改style属性值

<style>
.test {font-size: 30px;color: blue;background-color: blueviolet}
</style>
// html
<div class="test" style="height: 100px;">TEST</div>
<button class="cssText">cssText</button>
<button class="setAttribute">setAttribute</button>
<button class="stylesheet ">stylesheet </button>
// js
var testNode = document.getElementsByClassName("test")[0];
var cssTextBtn = document.getElementsByClassName("cssText")[0];
var attributeBtn = document.getElementsByClassName("setAttribute")[0];
var stylesheetBtn = document.getElementsByClassName("stylesheet")[0];
// 1. 修改style样式: 
stylesheetBtn.addEventListener('click', function(e) {
    var stylesheet = document.styleSheets[0];
    stylesheet.cssRules[0].style.backgroundColor = "green";
}, false);
// 2. 修改特定元素节点的style内容
cssTextBtn.addEventListener('click', function(e) {
    testNode.style.cssText = "width: 300px; background-color: red; height: 200px;"
    testNode.style.border = "1px solid black"
}, true);
// 3. 通过setAttribute 修改style属性值
attributeBtn.addEventListener('click', function(e) {
    testNode.setAttribute('style', 'width: 400px; background-color: yellow; height: 300px;')
}, false);

2019-10-15

回应

ajax上传-基于html5 FormData的批量文件上传

参考：https://www.cnblogs.com/imwtr/p/5924042.html
转自：https://blog.csdn.net/sinat_34492035/article/details/80477858

不使用FormData，直接用 <input type="file" name="file" multiple> 也可以实现批量上传。本例是ajax方式多个文件同时上传，也可以基于FormData采用ajax循环上传多个文件。更多功能可通过理解下面的原理自行扩展。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{margin:0;padding:0;}
        ul{
            list-style:none;
        }
        ul{
            width:700px;
            border:2px solid red;
            padding:10px;
        }
        .clearfix:after{
            display: block;
            content:'';
            overflow: hidden;
            visibility: hidden;
            clear: both;
            height:0;
        }
        .content ul li{
            float:left;
            width:100px;
            height:100px;
            margin:0 10px;
            border:1px solid #ccc;
        }
        .addFile{
            background:url("../img/icon12.png") no-repeat;
            background-position: center center;
        }
        #attach{
            width:100%;
            height:100%;
            opacity:0;
        }
    </style>
</head>

<body>
    <form action="formData_test.php" id="form">
        <div class="content">
            <ul class="clearfix ul-box">
                <li class="addFile">
                    <input type="file" id="attach"  multiple require />
                </li>
            </ul>
        </div>
        <input type="text" name="name"/>
        <input type="text" name="age"/>
        <input type="text" name="sex"/>
        <input type="button" value="上传" class="subBtn"/>
    </form>
</body>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
    //定义一个数组 把文件数组的值给新数组  对新数组进行操作  然后把新数组传递给后台
    var curFiles = [];
    $("#attach").change(function(){
        var fileArr = $(this)[0].files;
        Array.prototype.push.apply(curFiles, fileArr);
//      var fileArr = this.files;
        console.log(fileArr);
        //这里展示的话  还是用fileArr
        for(var i=0;i<fileArr.length;i++){
            console.log(fileArr[i]);
            var item = fileArr[i];
            var abc=$("<li class='showf'><p style='overflow:hidden;text-overflow:ellipsis; '>文件名:"+item.name+"</p>"+
                    "<p>大小："+(item.size/1024).toFixed(2)+"KB</p></li>");
            $(".ul-box").prepend(abc);
        }
//      fileArr.map(function(item,index,arr){
//          var abc=$("<li><p>文件名:"+item.name+"</p>"+
//                  "<p>大小："+parseInt(item.size/1024)+"KB</p></li>");
//          $(".ul-box").prepend(abc);
//      })

})  
$(".ul-box").on("click",".showf",function(){
    var index = $(".showf").index($(this));
    alert(index);
    var name = $(this).find("p").eq(0).html();
    console.log(curFiles);
//  curFiles = curFiles.filter(function(file) {
//      return file.name != name;
//  });
    curFiles.splice(index,1)
    console.log(curFiles);

    $(this).remove();
})
$(".subBtn").click(function(){
    // 构建FormData对象
    var fd = new FormData($('#form')[0]);
    for (var i = 0, j = curFiles.length; i < j; ++i) {
        fd.append('attach[]', curFiles[i]);
    }

    for(var pair of fd.entries()) {
       console.log(pair[0]+ ', '+ pair[1]); 
    }

    $.ajax({
        url: 'formData_test.php',
        type: 'post',
        data: fd,
        processData: false,
        contentType: false,
        success: function(rs) {
            console.log(rs);
        },
        error: function(err) {
        }
    });
})
</script>

</html>

formData_test.php源码：

<?php
$files = $_FILES['attach'];
var_dump($files);
?>

2019-10-08

回应

上传前图片预览

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<input type="file">
<script>
$('input[type=file]').change(function(){
    var file=this.files[0];
    var reader=new FileReader();
    reader.onload=function(){
        // 通过 reader.result 来访问生成的 DataURL
        var url=reader.result;
        setImageURL(url);
    };
    reader.readAsDataURL(file);
});

var image=new Image();
function setImageURL(url){
    image.src=url;
}
$(image).appendTo($('body'));
</script>

2019-10-08

回应

vue学习路线

https://cn.vuejs.org/

新手：Vue 2.0 的建议学习顺序 https://zhuanlan.zhihu.com/p/23134551

Vue技术内幕 http://hcysun.me/vue-design/

Vue.js技术揭秘 https://ustbhuangyi.github.io/vue-analysis/

Vue 3.0 动态核心概述 https://msd.misuland.com/pd/3255817963235705746

2019-09-10

回应

电子相册

电子书、电子杂志参考
官网 https://www.fliphtml5.com/

云展网企业宣传册制作：https://www.yunzhan365.com/
https://book.yunzhan365.com/pteyi/dckd/mobile/index.html
https://book.yunzhan365.com/rvdk/vggc/mobile/index.html

photoswipe兼容手机版，支持拖动、缩放

https://photoswipe.com/

https://github.com/dimsemenov/photoswipe

fancybox 不支持拖动、缩放

2019-06-15

回应

使用jquery.qrcode.js生成二维码-支持中英文混合输入

官网：https://larsjung.de/jquery-qrcode/
github：https://github.com/lrsjng/jquery-qrcode
演示：https://larsjung.de/jquery-qrcode/latest/demo/

<div id="qrcodeTable"></div>
<img id="logoimg" src="logo.png">
<script>
$('#qrcodeTable').qrcode({
    // render method: 'canvas', 'image' or 'div'
    render: 'image',

    // version range somewhere in 1 .. 40
    minVersion: 1,
    maxVersion: 40,

    // error correction level: 'L', 'M', 'Q' or 'H'
    ecLevel: 'L',

    // offset in pixel if drawn onto existing canvas
    left: 0,
    top: 0,

    // size in pixel
    size: 200, //二维码尺寸

    // code color or image element
    fill: '#000', //二维码颜色

    // background color or image element, null for transparent background
    background: '#fff', //背景色

    // content
    text: '汉a字',

    // corner radius relative to module width: 0.0 .. 0.5
    radius: 0,

    // quiet zone in modules
    quiet: 2, //可理解为css的padding，大小为quiet*6像素

    // modes
    // 0: normal 无文字、无logo
    // 1: label strip
    // 2: label box 显示文字
    // 3: image strip
    // 4: image box 显示logo
    mode: 4,

    mSize: 0.1, //logo尺寸
    mPosX: 0.5, //logo位置
    mPosY: 0.5,

    label: 'hello', //使用文字代替logo
    fontname: 'sans',
    fontcolor: '#000',

    image: null, //$('#logoimg')[0]
});
</script>

<script>
$('#qrcodeTable').qrcode({
    render: 'image', //canvas|image|div
    size: 200, //二维码尺寸
    text: '汉a字',
    quiet: 2, //可理解为css的padding，大小为quiet*6像素
});
</script>

2019-06-07

回应(1)

encodeURI、encodeURIComponent、escape

encodeURI(string) 把字符串作为 URI 进行编码，编码后为utf-8格式

decodeURI() 函数可对 encodeURI() 函数编码过的 URI 进行解码

在使用url进行参数传递时，经常会传递一些中文名的参数或URL地址，在后台处理时会发生转换错误。在有些传递页面使用GB2312，而在接收页面使用UTF8，这样接收到的参数就可能会与原来发生不一致。使用服务器端的urlEncode函数编码的URL，与使用客户端javascript的encodeURI函数编码的URL，结果就不一样。

javaScript中的编码方法：

escape() 方法：

采用ISO Latin字符集对指定的字符串进行编码。所有的空格符、标点符号、特殊字符以及其他非ASCII字符都将被转化成%xx格式的字符编码（xx等于该字符在字符集表里面的编码的16进制数字）。比如，空格符对应的编码是%20。unescape方法与此相反。不会被此方法编码的字符： @ * / +

encodeURI() 方法：

把URI字符串采用UTF-8编码格式转化成escape格式的字符串。不会被此方法编码的字符：! @ # $& * ( ) = : / ; ? + '

encodeURIComponent() 方法：

把URI字符串采用UTF-8编码格式转化成escape格式的字符串。与encodeURI()相比，这个方法将对更多的字符进行编码，比如 / 等字符。所以如果字符串里面包含了URI的几个部分的话，不能用这个方法来进行编码，否则 / 字符被编码之后URL将显示错误。不会被此方法编码的字符：! * ( )

因此，对于中文字符串来说，如果不希望把字符串编码格式转化成UTF-8格式的（比如原页面和目标页面的charset是一致的时候），只需要使用escape。如果你的页面是GB2312或者其他的编码，而接受参数的页面是UTF-8编码的，就要采用encodeURI或者encodeURIComponent。

另外，encodeURI/encodeURIComponent是在javascript1.5之后引进的，escape则在javascript1.0版本就有。

decodeURIComponent -- 解码encodeURIComponent函数编码的字符串

2019-06-06

回应

王新阳

图片放大镜 - drift.js

简要教程

安装

使用方法

Luminous鼠标点击放大镜效果

Drift鼠标滑过放大镜效果

结合使用Luminous和Drift

配置参数

什么是反向代理？如何预防被反向代理？

禁止网站被别人通过iframe引用嵌套套入

解决方案一：js方法

解决方案二：Meta标签方法

解决方案三：PHP方法

解决方案四：Apache主机方法

解决方案五：Nginx主机方法

配置 IIS 发送 X-Frame-Options 响应头

解决方案六：.htaccess方法

使用原生JS修改css属性