首页 >web前端 >js教程 >js如何操作来实现点击小图展示出大图的效果?(代码示例)

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

藏色散人
藏色散人原创
2018-08-11 16:20:4510633浏览

本篇文章主要给大家介绍如何实现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 = &#39;<img src= &#39; + $(this).attr("src") + &#39;</img>&#39;;
            $(&#39;#dialog_large_image&#39;).html($(large_image).animate({ height: &#39;50%&#39;, width: &#39;50%&#39; }, 500));
        });
    });
</script>

0df1f70c2c7dfe407f3cb5c627f9500.png

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

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

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

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

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

【相关文章推荐】

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

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

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

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


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

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn