//图片更换还原操作,图片识别标识 如图片img.png 可换成 img2.png
function img_biaoshi(caozuo,img_id, biaoshi) {
var img_src = document.getElementById(img_id).src; //获取id图片路径
var weizhi = img_src.lastIndexOf('.');//查找最后一个出现的位置
var qian=img_src.substring(0,weizhi);//图片前部分
var hou= img_src.substring(weizhi);//图片后部分
if(caozuo=='add') return qian+biaoshi+hou;//添加图片识别标识
if(caozuo=='rm') return qian.substring(0, qian.length - biaoshi.length)+hou;//去掉图片识别标识
else return false;
}

下面调用

            //选项卡点击事件
mui('.mui-bar-tab').on('tap', 'a', function(e) {
var targetTab = this.getAttribute('href');
if(targetTab == activeTab) {
return;
}
//更换标题
//title.innerHTML = this.querySelector('.mui-tab-label').innerHTML;
//显示目标选项卡
//若为iOS平台或非首次显示,则直接显示
if(mui.os.ios || aniShow[targetTab]) {
plus.webview.show(targetTab);
} else {
//否则,使用fade-in动画,且保存变量
var temp = {};
temp[targetTab] = "true";
mui.extend(aniShow, temp);
plus.webview.show(targetTab, "pop-in", 200);
} //alert(activeTab+'是上一个,当前'+targetTab);
//console.log(document.getElementById(activeTab).src);
document.getElementById(activeTab).src = img_biaoshi('rm',activeTab, '1'); //上一个
document.getElementById(targetTab).src = img_biaoshi('add',targetTab, '1'); //当前
plus.webview.hide(activeTab); //隐藏当前;
//更改当前活跃的选项卡
activeTab = targetTab;
});

JS图片更换还原操作,通过图片识别标识的更多相关文章

  1. mui实现图片更换(暂未上传)

    页面中有默认的图片,触发type为file的input时,更换图片,这个是mui移动端的项目,算了,不多说,开码 首先,先在html页面中设置样式,样式我就不给了,贴个布局 <div class ...

  2. Atitit.论图片类型 垃圾文件的识别与清理  流程与设计原则 与api概要设计 v2 pbj

    Atitit.论图片类型 垃圾文件的识别与清理  流程与设计原则 与api概要设计 v2 pbj 1. 俩个问题::识别垃圾文件与清理策略1 2. 如何识别垃圾图片1 2.1. 体积过小文件<1 ...

  3. C#设计模式总结 C#设计模式(22)——访问者模式(Vistor Pattern) C#设计模式总结 .NET Core launch.json 简介 利用Bootstrap Paginator插件和knockout.js完成分页功能 图片在线裁剪和图片上传总结 循序渐进学.Net Core Web Api开发系列【2】:利用Swagger调试WebApi

    C#设计模式总结 一. 设计原则 使用设计模式的根本原因是适应变化,提高代码复用率,使软件更具有可维护性和可扩展性.并且,在进行设计的时候,也需要遵循以下几个原则:单一职责原则.开放封闭原则.里氏代替 ...

  4. js实现点击隐藏图片

    方法一: 把图片的display设为none,触发点击事件时,display变为block <style> img { width: 400px;height: 300px; displa ...

  5. js和jquery如何获取图片真实的宽度和高度

    按照插入的图片的尺寸来判断图片是横图还是竖图.然后判断过后给予不同的展示方式,下面为大家介绍下js和jquery如何获取图片真实的宽度和高度   1.什么时候需要获取图片真实的宽度和高度 在做pc网页 ...

  6. Sequence.js - 适合电子商务网站的图片滑块

    Sequence.js 是一个非常现代的图片滑动效果,特别适合电子商务网站或者企业产品展示功能.带有图片缩率图,能够呈现全屏图片浏览效果.结合 CSS3 Transition 实现响应式的滑块效果. ...

  7. JS实现等比例缩放图片

    JS实现等比例缩放图片 2014-01-19 21:57 by 龙恩0707, 40 阅读, 0 评论, 收藏, 编辑 JS实现等比例缩放图片 有时候我们前端页面只有500×500像素的宽和高的布局, ...

  8. js手写图片查看器(图片的缩放、旋转、拖拽)

    在做一次代码编辑任务中,要查看图片器.在时间允许的条件下,放弃了已经封装好的图片jq插件,现在自己手写js实现图片的缩放.旋转.推拽功能! 具体代码如下: <!DOCTYPE html> ...

  9. JS实现图片base64转blob对象,压缩图片,预览图片,图片旋转到正确角度

    base64转blob对象 /** 将base64转换为文件对象 * @param {String} base64 base64字符串 * */ var convertBase64ToBlob = f ...

随机推荐

  1. DBUtils-对JDBC简单封装的开源工具类库

    DBUtils 是对JDBC简单封装的开源工具类 详细介绍地址:  https://baike.baidu.com/item/Dbutils/10655914?fr=aladdin 在使用DBUtil ...

  2. Good Bye 2017 E. New Year and Entity Enumeration

    先按照绿点进行分块 第一个绿点和最后一个绿点之后很好处理不说了 两个绿点之间的讨论: 有两种方案 1:红(蓝)点和绿点顺序连接,距离为相邻绿点距离(也就是双倍绿点距离) 2:红(蓝)点和绿点的点阵中寻 ...

  3. 结合实例分析Android MVP的实现

    最近阅读项目的源码,发现项目中有MVP的痕迹,但是自己却不能很好地理解相关的代码实现逻辑.主要原因是自己对于MVP的理解过于概念话,还没有真正操作过.本文打算分析一个MVP的简单实例,帮助自己更好的理 ...

  4. 空间主页播放任意FLV格式视频方法

      把文件上传到QQ网络硬盘 打开 硬盘 的 管理 选项 然后它会打开QQ邮箱的文件中转站 找到你要的视频文件 点击下载它 这里建议你使用搜狗浏览器打开网页 来到下载按钮点击下载,在弹出的对话框中选择 ...

  5. 【BZOJ1095】捉迷藏(动态点分治)

    [BZOJ1095]捉迷藏(动态点分治) 题面 BZOJ 题解 动态点分治板子题 假设,不考虑动态点分治 我们来想怎么打暴力: \(O(n)DP\)求树的最长链 一定都会.不想解释了 所以,利用上面的 ...

  6. Luogu2973:[USACO10HOL]赶小猪

    题面 Luogu Sol 设\(f[i]\)表示炸弹到\(i\)不爆炸的期望 高斯消元即可 另外,题目中的概率\(p/q\)实际上为\(1-p/q\) 还有,谁能告诉我不加\(EPS\),为什么会输出 ...

  7. [BZOJ1008] [HNOI2008] 越狱 (数学)

    Description 监狱有连续编号为1...N的N个房间,每个房间关押一个犯人,有M种宗教,每个犯人可能信仰其中一种.如果相邻房间的犯人的宗教相同,就可能发生越狱,求有多少种状态可能发生越狱 In ...

  8. [BZOJ3000] Big Number (Stirling公式)

    Description 给你两个整数N和K,要求你输出N!的K进制的位数. Input 有多组输入数据,每组输入数据各一行,每行两个数——N,K Output 每行一个数为输出结果. Sample I ...

  9. 打造MacOS版“XShell”

    1.背景 XShell作为一个强大的安全终端模拟软件,它支持SSH1, SSH2, 以及Microsoft Windows 平台的TELNET 协议.作为server端开发,几乎是必备工具了. 很多刚 ...

  10. node.js连接MySQL操作及注意事项

    node.js作为服务端的js运行环境已经出现了有几年了,最近我有个朋友也在做这方面的开发,但是也是刚刚接触,遇到了很多坑.前几天他们在操作数据库的时候出现了点问题,后来我们一起看了看,其实都是nod ...