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. 在AndroidManifest（清单文件）中注册activity（活动）及配置主活动、更改App图标、App名称、修改隐藏标题栏

    打开app/src/main/AndroidManifest. <?xml version="1.0" encoding="utf-8"?> < ...

  2. hdu 2489 dfs枚举组合情况+最小生成树

    大家都说,搜索是算法的基础.今天最这题就有体会了.在n个顶点里选择m个顶点,求最小生成树.用到了深搜的回溯.所有情况都能枚举. #include<iostream> #include< ...

  3. Teamwork-六月上旬心得体会

    六月上旬心得体会 在五月末的时候,老师针对我们团队的状况提出了几点建议和解决方案,而这半个月里,我们尝试性地运用了其中的几件工具与方法. 1.燃尽图与每日总结 我们采用的是<构建之法>书中 ...

  4. Python Tutorial笔记

    Python Tutorial笔记 Python入门指南 中文版及官方英文链接: Python入门指南 (3.5.2) http://www.pythondoc.com/pythontutorial3 ...

  5. load 调用的顺序

    主要是依赖关系. 调用的顺序 你过去可能会听说过,对于 load 方法的调用顺序有两条规则: 父类先于子类调用 类先于分类调用 这种现象是非常符合我们的直觉的,我们来分析一下这种现象出现的原因. 第一 ...

  6. setTimeout（）传带有参数的函数

    w3cshool里的解释:setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式,语法:setTimeout(code,millisec). 也就是说,第一个参数可以是字符串形式的Ja ...

  7. jQuery，您可以实现元素的淡入淡出效果。

    fadeIn() fadeOut() fadeToggle() fadeTo() jQuery fadeIn() 用于淡入已隐藏的元素 $("button").click(func ...

  8. RHEL 7 & CentOS 7禁用IPV6（转载）

    RHEL 7 & CentOS 7下禁用IPV6的方法和之前的版本不太一样了,本文整理了一下处理方法: 首先,我们必须给出最根本的解决方法:修改grub,在引导时就不加载IPV6模块 这样修改 ...

  9. SQL Server 2017 安装问题（转）

    遇到问题 Polybase 要求安装 Oracle JRE7 更新 规则失败 安装完毕之后,登录提示:您试图连接的 SQL Server 实例未安装 安装完SQL Server 2017 后,无法启动 ...

  10. Integer Intervals POJ - 1716_查分约束_

    Code: #include<cstdio> #include<queue> #include<algorithm> using namespace std; co ...