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

时间：2022-09-02 23:00:38

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&plus;C&plus;V就可以用

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

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

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

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

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

  6. js&plus;jquery&plus;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. Linux htop工具使用详解

    一．Htop的使用简介 大家可能对top监控软件比较熟悉,今天我为大家介绍另外一个监控软件Htop,姑且称之为top的增强版,相比top其有着很多自身的优势.如下: 两者相比起来,top比较繁琐 默认 ...

  2. Weblogic 所有BEA错误代码详细信息列表

    范围 子系统 类别 BEA-000001 – BEA-009999 ConsensusLeasing DatabaseLessLeasing DatabaseLessLeasing BEA-00010 ...

  3. Android eclipse下数据开源框架GreenDao的配置

    1.前言 ORM(Object-RelationMapping,对象关系映射),是一种为了解决面向对象与数据库存在的互一匹配的现象的技术,通过描述对象和关系数据库之间的映射,将程序中的对象自动持久化到 ...

  4. 数据库建表的时候报 &OpenCurlyDoubleQuote;1215 Cannot add foreign key constraint”

    很大原因是因为: 引用表中的字段类型和被引用的主键的类型不统一. 比如说学生表中有一个班级ID字段引用班级表. 班级表的ID是int类型,学生表中的班级ID是Varchar类型. 肯定会提示上述121 ...

  5. Python学习过程中各个难点---数据类型篇

    ---恢复内容开始--- 当时在学习python的基本数据类型时,对于可变与不可变类型不是了解的很透彻,这篇是回过头来自己的一些理解. 可变的数据类型有列表,不可变的数据类型有字符串,数字和元组   ...

  6. 遇到的一个移动端从下往上过渡的弹框，在Android下过渡动画的优化问题。

    优化之前: /* 分享弹框样式 */ .popUpDiv { width: 100vw; height: 100vh; transition: all 0.5s ease; position: fix ...

  7. 执行webpack-dev-server时，提示端口被占用。

    执行webpack-dev-server时总出错,提示端口被占用.百度了很多答案都不能解决,最后找到了解决方案,如下: webpack-dev-server  --port 8088 使用以上命令修改 ...

  8. 【Jupyter notebook】access remotly

    http://jupyter-notebook.readthedocs.io/en/latest/public_server.html

  9. scrapy框架（2）

    一.使用scrapy框架发送post请求 1.需求一:使用scrapy发送百度翻译中的ajax请求 创建一个项目,如下目录,修改settings.py文件中的 "ROBOTSTXT_OBEY ...

  10. 在编写JSP的时候出现XXX cannot be resolved to a type

    今天遇到这个情况,却发现是eclipse抽风,说javax.servlet.http.Cookie找不到定义,但是经过浏览器测试,可以运行,而JSP源文件中eclipse死活要报错.表示无语. 关于e ...

相关文章