jQuery如何实现图片点击放大缩小功能

  介绍

这篇文章将为大家详细讲解有关jQuery如何实现图片点击放大缩小功能,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

本文实例讲述了jQuery实现的图片点击放大缩小功能。分享给大家供大家参考,具体如下:

我们不废话,直接上例子。首先利用dom的垂直分层实现图片的点击放大和缩小(手机上使用的效果较好),在图片放大的时候同时禁止页面的滑动,如果在网页端的话可以不禁止屏幕的滚动(因为图片放大是将图片的宽度变成100%,在web上长度可能会超出屏幕的高度)。

来看css部分代码:

& lt; style>/*才能全屏显示大图*/.opacityBottom{才能   ,,,宽度:,100%;   ,,,身高:,100%;   ,,,位置:,固定;   ,,,背景:rgba (0, 0, 0, 0.8);   ,,,z - index: 1000;   ,,,:,0;   ,,,左:0   ,,}   .none-scroll{才能   ,,,溢出:,隐藏;   ,,,身高:,80%;   ,,}   .bigImg{才能   ,,,宽度:80%;   ,,,身高:,80%;   ,,,左:10%;   ,,,:10%;   ,,,位置:固定;   ,,,z - index:, 10001;   ,,}   & lt;/style>

咱们再来看下js部分的代码:

美元(“.image_click") .click (function  (), {   var 才能;imgsrc =,(这).attr美元(“src");   var 才能;opacityBottom =, & # 39; & lt; div  id=皁pacityBottom",祝辞& lt; img 类=癶ttps://www.yisu.com/zixun/bigImg", src=" + imgsrc +”>
';   $ (document.body) .append (opacityBottom);   toBigImg();//变大函数   });   函数toBigImg () {   $ (" # opacityBottom ") .addClass (“opacityBottom”);   $ (" # opacityBottom "),告诉();   $ (html、身体).addClass (none-scroll ");//下层不可滑动   $ (" .bigImg ") .addClass (“bigImg”);/*隐藏*/$ (" # opacityBottom ") .bind(“点击”,clickToSmallImg);   $ (" .bigImg ") .bind(“点击”,clickToSmallImg);   var imgHeight=$ (“.bigImg”) .prop(“高度”);   如果(imgHeight

image_click是绑定图片的类值,这个案例非常简单,还可以通过修改css来展示不同的样式的图片,大家有时间可以研究下,今天有点懒,直接贴的代码。

jquery是什么

jquery是一个简洁而快速的JavaScript库,它具有独特的链式语法和短小清晰的多功能接口、高效灵活的css选择器,并且可对css选择器进行扩展,拥有便捷的插件扩展机制和丰富的插件,是继原型之后又一个优秀的JavaScript代码库,能够用于简化事件处理,HTML文档遍历,Ajax交互和动画,以便快速开发网站。

关于“jquery如何实现图片点击放大缩小功能”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看的到。

jQuery如何实现图片点击放大缩小功能