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. 在windows系统下虚拟机和ubuntu系统的安装和卸载

    一.安装 之前有装过双系统,但是吧,一直用ubuntu系统,很久没进windows之后的某一天,自己再进windows,发现windows系统崩了,我也不知道为什么,找了很多方法没有解决,最后只好重装 ...

  2. 6) 十分钟学会android--Activity的生命周期之启动与销毁

    当用户导航.退出和返回您的应用时,应用中的 Activity 实例将在其生命周期中转换不同状态. 例如,当您的Activity初次开始时,它将出现在系统前台并接收用户焦点. 在这个过程中,Androi ...

  3. 微信小程序开发之animation动画实现

    1. 创建动画实例 wx.createAnimation(OBJECT) 创建一个动画实例animation.调用实例的方法来描述动画.最后通过动画实例的export方法导出动画数据传递给组件的ani ...

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

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

  5. 提示“CD/DVD找不到媒体所需的驱动”

    最近在帮我姐安装win7系统时提 示“CD/DVD找不到媒体所需的驱动”,我用的是U盘安装方式,觉得奇怪,那个镜像文件我已经安装过几十次都没有出错,显然是不会有错的.但是新买的电 脑又不会太大的问题, ...

  6. ORACLE 11g 导出数据

    ORACLE 11g 导出 表的时候 不会导出空表 导出空表操作步骤 :(使用PLSQL) 1.打开SQL window 执行下面的 SQL Select 'alter table '||table_ ...

  7. (转)RabbitMQ学习之安装

    http://blog.csdn.net/zhu_tianwei/article/details/40832185 RabbitMQ是一个开源的AMQP实现,服务器端用Erlang语言编写,支持多种客 ...

  8. better-scroll的使用方法,动态创建dom使用better-scroll

    移动端经常会用页面高度超过了手机屏幕的高度,但是有没有滚动条的出现这时候就用 better-scroll 这个插件, iscroll 是常用的但是这个组件没有人在维护了,导致很多的问题没有办法解决. ...

  9. MongoDB经典入门(2)--shell命令

    MongoDB是MongoDB自带的交互式Javascript shell,用来对MongoDB进行操作和管理的交互式环境. 使用 "./mongo --help" 可查看相关连接 ...

  10. jquery-ui实现拖拽功能

    https://www.runoob.com/jqueryui/jqueryui-tutorial.html