js最简单的-点击小图放大

标签（空格分隔）： js

<html>

<body>

    <img  class="imgview" src="{$v1}" width="20px" height="20px" alt="">

</body>

<script src="/layer/layer.js"></script>

<script src="/js/jquery.js"></script>

<script>

    $("body").on("click", ".imgview", function (e) {

        layer.photos({photos: {"data": [{"src": e.target.src}]}});

    });

</script>

</html>

js最简单的-点击小图放大的更多相关文章

  1. 实现类似于QQ空间相册的点击图片放大，再点后缩小回原来位置

    前几天看到了有人在android5.0上实现了如下图一样的效果,我自己就去搜了下.参考了国外一篇文章和国内的一篇文章,最终实现了想要的效果.具体参考的网址我已经贴到文章末尾,大家可以去英文的那个网站看 ...

  2. Android 实现类似于QQ空间相册的点击图片放大，再点后缩小回原来位置

    前几天看到了有人在android5.0上实现了如下图一样的效果,我自己就去搜了下.参考了国外一篇文章和国内的一篇文章,最终实现了想要的效果.具体参考的网址我已经贴到文章末尾,大家可以去英文的那个网站看 ...

  3. JS点击img图片放大再次点击缩小JS实现 简单实用Ctrl+C+V就可以用

    业务需要,从后台获取的图片列表,用img标签展示,用户需要查看大图.记录下来以便学习和参考.示例图如下: 放大之前: 放大之后: 点击后放大(由于图片高度超出了页面,需要通过overflow:auto ...

  4. vue项目 一行js代码搞定点击图片放大缩小

    一行js代码搞定xue项目需要点击图片放大缩小,其实主要用的是用到了vue:class的动态切换,内容比较简单.一开始我把维护的需求想得太复杂了,和测试小姐姐聊了一下才反应过来. 两个月不到跟了四个项 ...

  5. JS实现小图放大轮播效果

    JS实现小图放大轮播页面效果入下(图片为优行商旅页面照片): 实现效果:图片自动轮播,鼠标移入停止,移出继续轮播点击下方小图可以实现切换 步骤一:建立HTML布局,具体如下: <body> ...

  6. js+jquery+html实现在三种不通的情况下，点击图片放大的效果

    js+jquery+html实现在三种不通的情况下,点击图片放大的效果. 三种情况分别是:图片的父元素宽高固定;  图片的宽高固定;  图片的父元素宽固定,高度不固定 第一种情况:图片的父元素宽高固定 ...

  7. 推荐两款简单好用的图片放大jquery插件

    一.zoomfiy.js 推荐可以从这里下载 使用说明: 使用该jquery 插件引入该插件的js:zoomfiy.js 或 min引入该插件的css:zoomfiy.css 或 min前后顺序都可j ...

  8. 模拟app上商品详情点击图片放大并且可以切换大图

    主要使用swiper插件,这里使用各小技巧,就是用两个swiper容器,点击一个小图容器,去让大图容器展示出来 小图容器 <div class="q_banner"> ...

  9. JavaScript 实现用户点击图片放大

    JavaScript 实现用户点击图片放大 一.契机 情况是这样的,之前推荐朋友去建站.后面他专门写了一篇文章说如何实现 "用户点击图片实现放大效果",俺就好好 "拜读& ...

随机推荐

  1. 3.ThinkPHP入门---视图

    视图:MVC三大组成部分,负责信息的展示和输出 1.视图的创建 创建的位置需要是在分组目录下的view目录下余控制器同名的目录中. 2.视图的展示 在smarty和tinkphp都是使用diaplay ...

  2. king枚举帮助类

    可以方便的实现枚举 枚举 public enum DeptType { [Description("科室1")] Professional = , [Description(&qu ...

  3. 全面改造升级内部OA系统

    项目功能集团的OA办公系统,分别是销售管理系统.财务付款系统.原料采购系统.成品采购系统.担保系统和库房管理系统业务现状成品采购系统.库房管理系统.销售管理系统是Access开发的C/S系统,采用本地 ...

  4. javascript中构造函数的三种方式

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. hdu 3729 最大匹配

    此题是我AC的HDU的201道题目.泪流满面啊! 字典序最大(最小)真是个烦人的东西. 学生i与其对应的分数区间的每个点连一条边.字典序最大,编号最大的学生开始匹配. HK无法AC啊,试了很久.我不会 ...

  6. 07 --C语言字符串函数

    1)字符串操作  复制 strcpy(p, p1)      复制字符串 strncpy(p, p1, n)  复制指定长度字符串 strdup(char *str)      将串拷贝到新建的位置处 ...

  7. 【转】【Oracle 集群】11G RAC 知识图文详细教程之RAC在LINUX上使用NFS安装前准备（六）

    原文地址:http://www.cnblogs.com/baiboy/p/orc6.html 阅读目录 目录 介绍 下载软件 操作系统安装 Oracle安装先决条件 创建共享磁盘 参考文献 相关文章 ...

  8. 【JavaScript框架封装】在实现一个自己定义类似于JQuery的append()函数的时候遇到的问题及解决方案

    主要问题: 在刚开始创建了这个函数之后,使用的时候,总是会出现一个问题,就是按照正常步骤给一个ID选择器添加子节点的时候正常,但是到了给一个class选择器的元素添加的时候始终只能添加一个. 下面是我 ...

  9. [51nod1074] 约瑟夫问题 V2

    毫无思路,Orz了一下大佬的思路%%%. 大概就是因为k比n小的多,我们知道约瑟夫环有个公式是fn=(fn-1+k) mod n 可以改一下,改成fn+p=(fn+pk) mod (n+p) 但是这样 ...

  10. python_格式化拼接、format，编码、解码

    一.格式化拼接.format 1.字符串拼接 name = "Monica", age = 16 print("姓名"+name+“年龄”+age+" ...