首页 > 其他分享 >JS历理 foot.js的部分功能

JS历理 foot.js的部分功能

时间:2024-08-06 20:05:37浏览次数:13  
标签:function autoHeight imgWidth js var scale 历理 foot imgHeight

document.writeln("<div id=\'outerdiv\' style=\'position:fixed;top:0;left:0;background:rgba(0,0,0,0.7);z-index:2;width:100%;height:100%;display:none;\'>");
document.writeln("<div id=\'innerdiv\' style=\'position:absolute;\'>");
document.writeln("<img id=\'bigimg\' style=\'border:5px solid #fff;\' src=\'\' /></div></div>");
$(function(){
    //图片放大的方法
    $(".pimg").click(function(){
        var _this = $(this);
        imgShow("#outerdiv", "#innerdiv", "#bigimg", _this);
    });

    //列表的展开与收缩的方法
    $('#show').click(function() {
        $('.ui-content').addClass('layui-show');
    });
    $('#toggle').click(function() {
        $('.ui-content').toggleClass('layui-show');
    });

    //多行文本域的高度为其内容的高度
    $.fn.autoHeight = function(){
        function autoHeight(elem){
            elem.style.height = 'auto';
            elem.scrollTop = 0;
            elem.style.height = elem.scrollHeight + 'px';
        }
        this.each(function(){
            autoHeight(this);
            $(this).on('keyup', function(){
                autoHeight(this);
            });
        });
    }
    $('textarea[autoHeight]').autoHeight();
});

//图片放大的方法
function imgShow(outerdiv, innerdiv, bigimg, _this){
    var src = _this.attr("src");
    $(bigimg).attr("src", src);
    $("<img/>").attr("src", src).load(function(){
        var windowW = $(window).width();
        var windowH = $(window).height();
        var realWidth = this.width;
        var realHeight = this.height;
        var imgWidth, imgHeight;
        var scale = 0.9;
        if(realHeight>windowH*scale) {
            imgHeight = windowH*scale;
            imgWidth = imgHeight/realHeight*realWidth;
            if(imgWidth>windowW*scale) {
                imgWidth = windowW*scale;
            }
        } else if(realWidth>windowW*scale) {
            imgWidth = windowW*scale;
            imgHeight = imgWidth/realWidth*realHeight;
        } else {
            imgWidth = realWidth;
            imgHeight = realHeight;
        }
        $(bigimg).css("width",imgWidth);
        var w = (windowW-imgWidth)/2-5;
        var h = (windowH-imgHeight)/2-5;
        $(innerdiv).css({"top":h, "left":w});
        $(outerdiv).fadeIn("fast");
    });

    $(outerdiv).click(function(){
        $(this).fadeOut("fast");
    });
}

//删除数据的方法
function confirmDel(v,n){
    var url = window.location.href;
    var path = encodeURIComponent(url); //URL需要编码传输
    var value = window.atob(decodeURIComponent(v));
    var name = window.atob(decodeURIComponent(n));
    layer.confirm('你确定要删除'+name+'-'+value+'的这条信息吗', {
        btn: ['确定','取消']
    }, function(){
        location.href="/Z/ZZZ/delete.php?f="+v+"&t="+n+"&p="+path;
    }, function(){
        layer.msg('已取消操作!');
    });
}

标签:function,autoHeight,imgWidth,js,var,scale,历理,foot,imgHeight
From: https://www.cnblogs.com/onestopweb/p/18345904

相关文章

  • 编程深水区之并发②:JS的单线程事件循环机制
    如果某天有人问你,Node.js是单线程还是多线程,你如何回答?一、单线程并发原理我们以处理Web请求为例,来看看Node在处理并发请求时,究竟发生了什么。Node启动Web服务器后,创建主线程(只有一个)。当有一个阻塞请求过来时,主线程不会发生阻塞,而是继续处理其它代码或请求。如果阻塞......
  • jsp“云味坊”购物网站9u653
    jsp“云味坊”购物网站9u653本系统(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。系统程序文件列表项目功能用户,商品分类,商品品牌,热销商品,促销商品技术要求:   开发语言:JSP前端使用:HTML5,CSS,JSP动态网页技术后端使用Spr......
  • jsp“云课堂”在线教育系统的设计与开发87j57
    jsp“云课堂”在线教育系统的设计与开发87j57本系统(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。系统程序文件列表项目功能学生,教师,课程分类,课程信息,课程练习,问题提问,在线沟通技术要求:   开发语言:JSP前端使用:HTML......
  • jsp“永梦”无人售货机系统管理的设计与实现bt3q1
    jsp“永梦”无人售货机系统管理的设计与实现bt3q1本系统(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。系统程序文件列表项目功能商品分类,补货员,维修员,用户,商品信息,设备报修,订单信息开题报告内容一、项目背景与意义随着科......
  • SQL历理 ICbA的U11用户表
    DROPTABLEIFEXISTS`u11`;CREATETABLE`u11`(`id`int(6)NOTNULLAUTO_INCREMENTCOMMENT'编号ID',`unum`varchar(20)NOTNULLCOMMENT'会员号',`ucode`varchar(20)NOTNULLCOMMENT'会员密码',`uname`varchar(20)NOTNULL......
  • Spring Boot 中使用 JSON Schema 来校验复杂JSON数据
    JSON是我们编写API时候用于数据传递的常用格式,那么你是否知道JSONSchema呢?在数据交换领域,JSONSchema以其强大的标准化能力,为定义和规范JSON数据的结构与规则提供了有力支持。通过一系列精心设计的关键字,JSONSchema能够详尽地描述数据的各项属性。然而,仅凭JSONSchema......
  • 一个定时器的轮询,页面卸载清除轮询的定时器 ,js 接口5s轮询 轮询查询应用安装状态
    在JavaScript中,如果您使用setInterval创建了一个定时器来进行轮询,并希望在页面卸载时清除这个定时器,您可以按照以下步骤实现:示例代码://假设这是查询应用安装状态的函数functioncheckInstallationStatus(){//这里应该是发起网络请求的逻辑//例如使用fetchAPI获取......
  • jsp码头船只出行及配套货柜码放管理系统的设计与实现
    点击下载源码jsp码头船只出行及配套货柜码放管理系统的设计与实现摘要伴随着全球化的发展,码头的物流和客运增多,码头业务迎来新的高峰。然而码头业务的增加,导致了人员成本和工作量的增多。为了解决这一基本问题,码头船只出行及配套货柜码放管理系统应运而生。此次码头船只......
  • Spring Boot 中使用 JSON Schema 来校验复杂JSON数据
    JSON是我们编写API时候用于数据传递的常用格式,那么你是否知道JSONSchema呢?在数据交换领域,JSONSchema以其强大的标准化能力,为定义和规范JSON数据的结构与规则提供了有力支持。通过一系列精心设计的关键字,JSONSchema能够详尽地描述数据的各项属性。然而,仅凭JSONSchema本......
  • 使用JS的input框实现音频文件的上传与播放功能
    在网页中实现音频文件的上传和播放功能,可以通过HTML的<input>元素和JavaScript来完成。下面是一个简单的示例,展示了如何使用HTML和JavaScript实现这个功能:HTML部分<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>音频上传与播放</title>......