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. css中max-width和min-width的应用

    max-width:从字面意思可以看出,是规定元素本身最大宽度,元素本身宽度应小于等于最大宽度值. min-width:从字面意思可以看出,是规定元素本身最小宽度,元素本身宽度应大于等于最小宽度值. ...

  2. hiho一下 第174周

    题目1 : Dice Possibility 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 What is possibility of rolling N dice ...

  3. Android--XML页面的编写

           五个页面  代码如下:    图片资源链接: https://pan.baidu.com/s/1jIoTDGE //  第一个 <RelativeLayout xmlns:andr ...

  4. Kafka学习笔记（4）----Kafka的Leader Election

    1. Zookeeper的基本操作 zookeeper中的节点可以持久化/有序的两个维度分为四种类型: PERSIST:持久化无序(保存在磁盘中) PERSIST_SEQUENTIAL:持久化有序递增 ...

  5. PhotoZoom Classic 7有什么用？高品质的放大模糊图片！

    PhotoZoom Classic 7专门用于放大照片,同时保持质量.该软件配备了BenVista独特的S-Spline技术,可轻松超越Photoshop的双三次插值等替代解决方案. PhotoZoo ...

  6. Linux 中文件名颜色所代表的属性

    1. 白色:表示一般文件 2. 蓝色:表示目录 3. 绿色:表示可执行的文件或程序 4. 浅蓝色:表示链接文件 5. 黄色:表示设备文件 6. 灰色:表示其他类型文件 7. 红色:表示压缩文件或者包文 ...

  7. 使用jquery获取css的top和left属性

    使用jquery获取css的top和left属性 因为left和top也都是普通的css属性所以可以使用如下代码来获取 var left = $('#test').css('left'); var t ...

  8. mysql出错ERROR 2003 (HY000): Can't connect to MySQL server on 'localhost' (10061)

    其他的贴会教你 1.键盘上win+r 2.输入cmd 3.输入net  start mysql 但是还是没用 你可以试试 1.右击开始菜单 2.点击windows PowerShell(i) 3.输入 ...

  9. Python笔记21-------浅复制和深复制、赋值

    上面图表示浅复制和深复制,针对顶层对象来说,赋值为引用,浅复制和深复制都是复制一个新的对象. 针对子对象来说,浅复制为引用.深复制就是复制两个一样的. 1.赋值 A= [ 1,2,3, [ 'a',' ...

  10. flask_sqlalchemy和sqlalchemy联系区别及其使用方式

    ### 使用SQLAlchemy去连接数据库: 1.使用SQLALchemy去连接数据库,需要使用一些配置信息,然后将他们组合成满足条件的字符串:HOSTNAME = '127.0.0.1'PORT ...