js 点击图片实现查看大图

这篇具有很好参考价值的文章主要介绍了js 点击图片实现查看大图。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

js 点击图片实现查看大图

  • 点击图片放大缩小(遮罩)

截图:点击放大,并显示ico放大镜

js 点击图片实现查看大图文章来源地址https://www.toymoban.com/news/detail-450231.html


代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>点击图片放大缩小(遮罩)</title>
<style type="text/css">
<style type="text/css">
	.min {
		max-height:25px;
	}
	.showImg{cursor: zoom-in;}
	#bigImg{cursor: zoom-out;}
</style>

</style>
</head>
<body>
<!-- 我图片是放在一个td里面的(当然还有其它内容...)-->
<table>

	<td>
		<img id="showImg" class="showImg min" src="phpcms问题统计/QQ截图20210609140112.png" width="200"/>
	</td>
	<td>
		<img id="showImg" class="showImg min" src="phpcms问题统计/QQ截图20210609140342.png" width="200"/>
	</td>
	<td>
		<img id="showImg" class="showImg min" src="phpcms问题统计/QQ截图20210609142248.png" width="200"/>
	</td>
	<td>
		<img id="showImg" class="showImg min" src="phpcms问题统计/QQ截图20210609160600.png" width="200"/>
	</td>
	<td>
		<img id="showImg" class="showImg min" src="phpcms问题统计/QQ截图20210609160901.png" width="200"/>
	</td>

</table>
<!-- 遮罩区域(先将div隐藏)-->
<div id="back-curtain" style="position:fixed;top:0;left:0;background:rgba(0,0,0,0.5);z-index:998;width:100%;display:none;">
	<!--放大后的图片-->
	<div id="imgDiv" style="position:absolute;">
		<img id="bigImg" src="" />
	</div>
</div>




<script src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
// 图片点击放大
$('.showImg').on('click', function(){
	imgShow("#imgDiv", "#bigImg", $(this), "#back-curtain");
});

function imgShow(imgDiv, bigImg, _this, curtain) {
	// 图片路径
	var src = _this.attr("src");
	$(bigImg).attr("src", src);
	// 加载图片,获取当前点击图片的真实大小
	$("<img/>").attr("src", src).load(function(){
		var windowWidth = $(window).width();
		var windowHeight = $(window).height();
		var realWidth = this.width;
		var realHeight = this.height;
		var imgWidth, imgHeight;
		var scale = 0.8;
		if (realHeight > windowHeight * scale) {
			imgHeight = windowHeight * scale;
			imgWidth = imgHeight / realHeight * realWidth;
			if (imgWidth > windowWidth * scale) {
				imgWidth = windowWidth * scale;
			}
		} else if (realWidth > windowWidth * scale) {
			imgWidth = windowWidth * scale;
			imgHeight = imgWidth / realWidth * realHeight;
		} else {
			imgWidth = realWidth;
			imgHeight = realHeight;
		}
		$(bigImg).css({'width':imgWidth});
		//计算图片与窗口左边距
		var left = (windowWidth - imgWidth) / 2;
		//计算图片与窗口上边距 
		var top = (windowHeight - imgHeight) / 2;
		// 图片位置
		$(imgDiv).css({'top':top, 'left':left});
		// 图片淡入
		$(curtain).fadeIn("fast");
		// 遮罩效果
		$(curtain).css({
	        'position':'fixed',
	        'overflow-y':'auto',
	        'width':'100%',
	        'height':'100%',
	  		'z-index':'998'
        }).show();
	});
	// 点击图片或遮罩,图片淡出
	$(curtain).on('click', function(){
		$(this).fadeOut("fast");
	});
}

</script>
</body>
</html>

到了这里,关于js 点击图片实现查看大图的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • js实现点击查看全部/收起功能

    在上一篇文章实现用js截取文本后,我的另一个需求也迎刃而解了。需求就是一段长文本需要溢出隐藏,然后点击全部时显示全部文本,点击收起又回到溢出隐藏的状态。实现的效果如下图: 实现的思路时点击全部时使用这条数据的原文本,点击收起时使用截取后的文本。而

    2024年02月10日
    浏览(63)
  • Android 点击图片,放大查看,实现缩放拖动等功能

    实现方法:点击图片时,把图片url传到另一个activity中实现放大拖动, 图片点击事件触发: Intent intent = new Intent(); intent.setClass(mContext, PictureActivity.class); intent.putExtra(“url”,R.drawable.ic_logo); mContext.startActivity(intent); 然后创建一个activity的内容如下: public class PictureActivity extend

    2024年02月11日
    浏览(54)
  • 用JS实现点击按钮切换图片

    啥也不说,上代码 效果:

    2024年02月11日
    浏览(58)
  • uni-app+uView实现点击查看大图片的效果

    参数说明

    2024年02月10日
    浏览(49)
  • elementUi 通过点击预览按钮实现 预览大图previewSrcList(两种方式)

    第一种:(使用elementUi官网文档中的组件)一般项目中需要点击触发事件才进行查看大图,elementUi组件库中并没有写触发需要执行的代码,这里在触发的方法中加this.$refs.preview.clickHandler()触发查看大图功能   第二种:( 使用el-image-viewer组件,是elementUi自带的但官网文档中可

    2024年02月12日
    浏览(39)
  • 基于html+js实现轮播图(自动轮播、左右按钮、小圆点点击及切换图片)

    使用html和js实现的一个简单小练习轮播图。大概功能主要是: 1、使用时间函数自动切换图片; 2、在图片及按钮及小圆点的父节点身上绑定事件代理,添加mouseenter及mouseleave事件类型,让鼠标移入,图片暂停,移出,图片恢复轮播; 3、在按钮的父节点身上绑定事件代理,事

    2024年02月11日
    浏览(44)
  • vue3+element-plus+el-image实现点击按钮预览大图

    需求:点击某个按钮实现el-image中预览大图的效果 官方文档:以下是官方的写法,并不能达到我们的要求,官方实现的功能是点击图片达到预览大图的效果。如果你的按钮就是图片,也可以达到目前的功能 el-image-viewer组件是element官方的组件,只是文档中没有写出来,这个组

    2024年02月12日
    浏览(58)
  • React Native 点击图片变大,查看图片

    Index.js: 参考链接: https://www.npmjs.com/package/react-native-image-zoom-viewer https://chat.xutongbao.top/

    2024年02月14日
    浏览(36)
  • 帝国CMS内容页分割图集图片大图小图输出真实地址的实现方法

    帝国CMS内容页分割图集图片大图小图输出真实地址,图集站展示需要用得到 \\\';$showno.=\\\'\\\';//小图:\\\'.$mp[0].\\\'//大图:\\\'.$mp[1].\\\'//图片说明:\\\'.$mp[2].\\\'}? 调用代码: =$showpic;? =$showno? 默认支持数字输出调用: \\\'.$mpi.\\\' 从0开始 \\\'.$mpi+1.\\\' 从1开始 以此类推 具体的大家可以根据需要自行调整。

    2024年02月03日
    浏览(51)
  • vue点击单张图片放大(纯js)

    vue点击单张图片放大 点击图片以后-》 在 vue 项目中,实现点击图片放大功能可以使用图片预览组件,如 vue-preview,或者使用 JavaScript 编写放大预览的代码。 步骤如下: 在 HTML 中加入图片元素,并给其绑定 click 事件。 在 vue 组件的 methods 选项中,定义图片点击事件的回调函

    2024年02月12日
    浏览(56)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包