首页 > js教程 > 正文

js如何操作来实现点击小图展示出大图的效果?(代码示例)

原创 2018-08-11 16:20:45 0 185
赞助会员专享特权
本篇文章主要给大家介绍如何实现js点击小图片显示大图即js点击小图预览大图,这种功能实现在网站建设过程中,难免会遇到这样的要求。特别对于多图的网站来说,缩略图的展示至关重要,那么要是能直接点击小图预览大图那更是高效率的展现。js点击图片放大并不是一件难操作的事。下面给大家带来具体代码演示。

js点击小图弹出大图的具体代码示例如下:

<div>
    <img class="dialog" src="1.png">
    <div id="dialog_large_image"></div>
</div>
<script type="text/javascript">
    $(function () {
        $("img.dialog").click(function() {
            var large_image = '<img src= ' + $(this).attr("src") + '</img>';
            $('#dialog_large_image').html($(large_image).animate({ height: '50%', width: '50%' }, 500));
        });
    });
</script>

0df1f70c2c7dfe407f3cb5c627f9500.png

这里要了解的知识点是:jQuery 事件 - click() 方法。

当点击元素时,会发生 click 事件。

当鼠标指针停留在元素上方,然后按下并松开鼠标左键时,就会发生一次 click。

click() 方法触发 click 事件,或规定当发生 click 事件时运行的函数。

本篇文章关于js点击缩略图切换大图的相关知识介绍,希望对有需要的朋友有所帮助。

【相关文章推荐】

利用JS实现点击按钮后图片自动切换的简单方法

jquery实现移动端点击图片查看大图特效_jquery

JS点击小图片关联显示大图片

使用JS实现点击循环切换图片(附代码)

以上就是js如何操作来实现点击小图展示出大图的效果?(代码示例)的详细内容,更多请关注php中文网其它相关文章!

  • 相关标签:js点击小图弹出大图
  • 本文原创发布php中文网 ,转载请注明出处,感谢您的尊重!
  • 相关文章


  • 原生javascript实现分享到朋友圈功能 支持ios和android_javascript技巧
  • jQuery链式调用与show知识浅析_jquery
  • JS实现登录页面记住密码和enter键登录方法推荐_javascript技巧
  • BootstrapTable与KnockoutJS相结合实现增删改查功能【一】_javascript技巧
  • 网友评论

    文明上网理性发言,请遵守 新闻评论服务协议

    我要评论
    独孤九贱(4)_PHP视频教程

    独孤九贱(4)_PHP视频教程

    江湖传言:PHP是世界上最好的编程语言。真的是这样吗?这个梗究竟是从哪来的?学会本课程,你就会明白了。 PHP中文网出品的PHP入门系统教学视频,完全从初学者的角度出发,绝不玩虚的,一切以实用、有用...

    独孤九贱(5)_ThinkPHP5视频教程

    独孤九贱(5)_ThinkPHP5视频教程

    ThinkPHP是国内最流行的中文PHP开发框架,也是您Web项目的最佳选择。《php.cn独孤九贱(5)-ThinkPHP5视频教程》课程以ThinkPHP5最新版本为例,从最基本的框架常识开始,将...

    独孤九贱(1)_HTML5视频教程

    独孤九贱(1)_HTML5视频教程

    《php.cn原创html5视频教程》课程特色:php中文网原创幽默段子系列课程,以恶搞,段子为主题风格的php视频教程!轻松的教学风格,简短的教学模式,让同学们在不知不觉中,学会了HTML知识。 ...

    ThinkPHP5实战之[教学管理系统]

    ThinkPHP5实战之[教学管理系统]

    本套教程,以一个真实的学校教学管理系统为案例,手把手教会您如何在一张白纸上,从零开始,一步一步的用ThinkPHP5框架快速开发出一个商业项目。

    PHP入门视频教程之一周学会PHP

    PHP入门视频教程之一周学会PHP

    所有计算机语言的学习都要从基础开始,《PHP入门视频教程之一周学会PHP》不仅是PHP的基础部分更主要的是PHP语言的核心技术,是学习PHP必须掌握的内容,任何PHP项目的实现都离不开这部分的内容,通...

    相关视频教程

  • javascript初级视频教程 javascript初级视频教程
  • jquery 基础视频教程 jquery 基础视频教程
  • javascript三级联动视频教程 javascript三级联动视频教程
  • 独孤九贱(3)_JavaScript视频教程 独孤九贱(3)_JavaScript视频教程
  • 独孤九贱(6)_jQuery视频教程 独孤九贱(6)_jQuery视频教程
  • 相关视频章节