分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 前端开发

JS图片放大1

发布时间:2023-09-06 02:17责任编辑:郭大石关键词:暂无标签

$(function () {
???????????????//$(".pimg").click(function () {
???????????????$(".layer-photos-demo img").click(function () {
???????????????????var _this = $(this);//将当前的pimg元素作为_this传入函数
???????????????????imgShow("#outerdiv", "#innerdiv", "#bigimg", _this);
???????????????});
???????????});

function imgShow(outerdiv, innerdiv, bigimg, _this) {
???????????var src = _this.attr("src");
???????????$(bigimg).attr("src", src);

???????????/*获取当前点击图片的真实大小,并显示弹出层及大图*/
???????????$("<img/>").attr("src", src).load(function () {
???????????????var windowW = $(window).width();
???????????????var windowH = $(window).height();
???????????????var realWidth = this.width;
???????????????var realHeight = this.height;
???????????????var imgWidth, imgHeight;
???????????????var scale = 0.8;

???????????????if (realHeight > windowH * scale) {
???????????????????imgHeight = windowH * scale;
???????????????????imgWidth = imgHeight / realHeight * realWidth;
???????????????????if (imgWidth > windowW * scale) {
???????????????????????imgWidth = windowW * scale;
???????????????????}
???????????????} else if (realWidth > windowW * scale) {
???????????????????imgWidth = windowW * scale;
???????????????????imgHeight = imgWidth / realWidth * realHeight;
???????????????} else {
???????????????????imgWidth = realWidth;
???????????????????imgHeight = realHeight;
???????????????}
???????????????$(bigimg).css("width", imgWidth);

???????????????var w = (windowW - imgWidth) / 2;
???????????????var h = (windowH - imgHeight) / 2;
???????????????$(innerdiv).css({ "top": h, "left": w });
???????????????$(outerdiv).fadeIn("fast");
???????????});
???????????$(outerdiv).click(function () {
???????????????$(this).fadeOut("fast");
???????????});
???????}

JS图片放大1

原文地址:https://www.cnblogs.com/Ly426/p/9768613.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved