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. RN打包的那些坑儿

    Write By lz: Lz 寄语: RN虐我千百遍, 我待RN如初恋, 坑儿爬多了也就自然了 官方文档: http://reactnative.cn/docs/0.43/signed-apk-an ...

  2. java是值传递，还是引用传递？

    原文地址:http://blog.csdn.net/zxmzfbdc/article/details/5401960  java到底是值传递,还是引用传递?以前国内的java开发者有过很多争论,由于& ...

  3. dotnetnuke7.3.3 下弹出对话框（dnnConfirm()）的使用

    今天用dnn做一个列表里边有一个删除操作,就想做个对话框确定是否删除? 正常理解马上想到js的confirm("")函数,但是发现Dnn把这个函数给重写啦,弹出的对话框竟然是英文的 ...

  4. linux+nginx+python+django环境配置

    Django是一个开放源代码的Web应用框架,由Python写成,它最初是被开发来用于管理劳伦斯出版集团旗下的一些以新闻内容为主的网站的.python+django也是web开发者最受欢迎的框架.今天 ...

  5. OpenCV、OpenCL、OpenGL、OpenPCL

    对于几个开源库的总结,作为标记,以前看过,现在开始重视起来!更详细资料请移步 开源中国社区! 涉及:OpenCV,OpenCL,OpenGL,OpenPCL 截止到目前: OpenGL的最新版本为4. ...

  6. （转）RabbitMQ学习之消息可靠性及特性

    http://blog.csdn.net/zhu_tianwei/article/details/53971296 下面主要从队列.消息发送.消息接收方面了解消息传递过的一些可靠性处理. 1.队列 消 ...

  7. dw2018修改为中文

    dw2018 英文版修改为中文, 把zh_CN文件夹内的内容复制到en_US文件夹内并替换, 或者重命名zh_CN文件夹为en_US

  8. Python基础：dict & set

    一 :dict 1:Python内置了字典:dict的支持,dict全称dictionary,在其他语言中也称为map,使用键-值(key-value)存储,具有极快的查找速度. eg: dict查找 ...

  9. Apex语言（一）开发环境

    1.注册salesforce开发者https://developer.salesforce.com/ 2.开发者登录https://login.salesforce.com/ 3.Apex开发者工具 ...

  10. U盘启动盘安装Mac OS

    1.下载macOS High Sierra正式版 http://www.pc6.com/mac/gj_715_1.htm http://www.pc6.com/mac/518996.html 下载ma ...