html vr 图片插件,html基础总结4-实现点击图片弹出放大图片--不用插件

￡神魔★判官ぃ 2022-10-06 10:50 178阅读 0赞

实现点击图片弹出放大图片--不用插件

![%24%7BfhFeed.feedImageId%7D][24_7BfhFeed.feedImageId_7D]

![%24%7BfhFeed.feedImageId2%7D][24_7BfhFeed.feedImageId2_7D]

![%24%7BfhFeed.feedImageId3%7D][24_7BfhFeed.feedImageId3_7D]

![Image 1][]

js:

$(function()\{

$(".pimg").click(function()\{

var \_this = $(this);//将当前的pimg元素作为\_this传入函数

imgShow("\#outerdiv", "\#innerdiv", "\#bigimg", \_this);

\});

\});

function imgShow(outerdiv, innerdiv, bigimg, \_this)\{

var src = \_this.attr("src");//获取当前点击的pimg元素中的src属性

$(bigimg).attr("src", src);//设置\#bigimg元素的src属性

/\*获取当前点击图片的真实大小，并显示弹出层及大图\*/

$("").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\});//设置\#innerdiv的top和left属性

$(outerdiv).fadeIn("fast");//淡入显示\#outerdiv及.pimg

\});

$(outerdiv).click(function()\{//再次点击淡出消失弹出层

$(this).fadeOut("fast");

\});

\}

https://www.cnblogs.com/antis/p/7053991.html

[24_7BfhFeed.feedImageId_7D]: http://or7y3wqnj.bkt.clouddn.com/%24%7BfhFeed.feedImageId%7D
[24_7BfhFeed.feedImageId2_7D]: http://or7y3wqnj.bkt.clouddn.com/%24%7BfhFeed.feedImageId2%7D
[24_7BfhFeed.feedImageId3_7D]: http://or7y3wqnj.bkt.clouddn.com/%24%7BfhFeed.feedImageId3%7D
[Image 1]:

发表评论取消回复

表情：

评论列表（有 0 条评论，178人围观）

还没有评论，来说两句吧...

相关阅读

相关 html点击图片弹出放大（内附下载demo）

效果 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pp

刺骨的言语ヽ痛彻心扉/ 2022年12月28日 04:17/ 0 赞/ 181 阅读

相关 HTML 手机端点击图片放大

<html> <head> <style> .over \{position: fixed; left:0; top

阳光穿透心脏的1/2处/ 2022年12月10日 07:06/ 0 赞/ 129 阅读

相关 html图片全屏显示插件,jQuery全屏内容显示插件

特效描述：jQuery 全屏内容显示插件。jQuery全屏内容显示插件代码结构 1. 引入CSS 2. 引入JS 3. HTML代码 Jquery Full Co

你的名字/ 2022年10月09日 04:57/ 0 赞/ 218 阅读

相关 firefox html 插件,Firefox插件的HTML页面点击功能

Scenario: Add-on detects phone numbers on a web page and highlights it by hyperlink. Whe

﹏ヽ暗。殇╰゛Y/ 2022年10月06日 13:54/ 0 赞/ 182 阅读

相关 html按钮在屏幕中间弹出一张图片,js实现点击图片在屏幕中间弹出放大效果.pdf...

js实实现现点点击击图图片片在在屏屏幕幕中中间间弹弹出出放放大大效效果果 j s实现点击图片在屏幕中间弹出放大效果效果图点击图片后关键代码 html 1 2

布满荆棘的人生/ 2022年10月06日 11:45/ 0 赞/ 155 阅读

相关 html vr 图片插件,html基础总结4-实现点击图片弹出放大图片--不用插件

实现点击图片弹出放大图片--不用插件 ![%24%7BfhFeed.feedImageId%7D][24_7BfhFeed.feedImageId_7D] ![%24%7B

￡神魔★判官ぃ/ 2022年10月06日 10:50/ 0 赞/ 179 阅读

相关 jQuery遮罩弹出图片预览插件

[下载地址][Link 1] jQuery遮罩弹出图片预览插件是一款图片预览插件，点击缩略图遮罩弹出大图预览，支持单图、多图、文字触发图片预览查看效果代码。 ![75749

叁歲伎倆/ 2022年09月16日 11:20/ 0 赞/ 312 阅读

相关 jQuery点击图片全屏放大插件

[下载地址][Link 1]这是个灯箱LightBox插件，点击图片弹出覆盖全屏层图片放大显示效果。基于jquery.magnific-popup.js这个插件实现的弹出放大效

港控/mmm°/ 2022年09月11日 06:17/ 0 赞/ 259 阅读

相关 jQuery实现图片的放大以及点击图片，放大图片出现在弹出层。

又学习了一个小demo，并运用到了后台的管理系统中。直接上代码吧 <div class="img-list-box"> <div class="

水深无声/ 2022年05月21日 11:55/ 0 赞/ 412 阅读

相关 html页面点击图片名称查看图片------图片预览插件viewer.js使用

前言在做项目时，会遇到在前台展示附件详情，比如图片，word，pdf等。viewer.js 图片查看器，用来查看页面中的图片。基本效果： ![70][] V

太过爱你忘了你带给我的痛/ 2022年05月17日 08:47/ 0 赞/ 1026 阅读