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. [转]解决C# WinForm 中 VSHOST.EXE 程序不关闭的问题

    右击“解决方案”--属性-调试栏-启用调试器部分-“启用Visual studio宿主进程”不勾选

  2. [转]Java设计模式学习心得

    http://tech.it168.com/focus/200902/java-design/index.html http://tech.it168.com/j/2007-05-17/2007051 ...

  3. Java单例模式解析（收藏）

    在GoF的23种设计模式中,单例模式是比较简单的一种.然而,有时候越是简单的东西越容易出现问题.下面就单例设计模式详细的探讨一下. 所谓单例模式,简单来说,就是在整个应用中保证只有一个类的实例存在.就 ...

  4. BZOJ3143: [Hnoi2013]游走(期望DP 高斯消元)

    Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 3597  Solved: 1618[Submit][Status][Discuss] Descript ...

  5. mysql 主从错误情况与原因

    mysql 主从错误情况1,master 上删除一条记录是从库报错 找不到该记录引起原因:master出现宕机或者从库已经删除.解决方案:stop slave;set global sql_slave ...

  6. Self-hosting Sentry With Docker and Docker-compose

    If a user encounters an error but you don't know about, did it happen at all? Sentry is one of the s ...

  7. vs2012编译boost_1_54_0

    在原文上进行了修改,我的环境是VS2012 ,在编译 注意事项:Boost 请慎用!微软太坑爹...且直接使用GitHub上的exe文件也可以,特定版本的只能自己编译了....汗!!! 原文地址:ht ...

  8. 图解HTTP——阅读笔记

    基础部分 第1章 了解Web及网络基础 重点了解HTTP协议在网络中的作用,扮演了什么角色,以及网络传输中相关的一些角色. 3项重要的web构建技术:HTML,URL,HTTP HTTP协议位于应用层 ...

  9. Django 了解

    Django是一个开放源代码的Web应用框架 Django也是一个基于 MVC 构造的框架. 但是在Django中,控制器接受用户输入的部分由框架自行处理,所以 Django 里更关注的是模型(Mod ...

  10. Teradata在大数据管理与分析领域连续18年评测排名第一

    Gartner 魔力象限介绍 Gartner(高德纳)全球最具权威的IT市场研究与顾问咨询公司,他总是不停地推出IT行业的各种报告以及著名的Gartner魔力象限. Gartner魔力象限通常从两个方 ...