1. 程式人生 > >div中新增多張img圖片,點選img跳轉頁面檢視大圖

div中新增多張img圖片,點選img跳轉頁面檢視大圖

var imgList = $.trim(that.find("td").eq(10).text()).split(";");
var myDiv = document.getElementById("imgShow");
for(var i=0; i < imgList.length; i++){
   var img = document.createElement("img");
img.setAttribute("class", "newImg");
img.width =460;
img.src = imgList[i];
img.onclick=function()
   {
      
var _this = $(this);//將當前的pimg元素作為_this傳入函式
imgShow("#outerdiv", "#innerdiv", "#bigimg", _this);
/*if(this.width == 460){
   this.width+=200;
} else {
   this.width = 460;
}*/
/*this.style.zoom= 2;
window.open(this.src);*/
}
   myDiv.appendChild(img);
}
function imgShow(outerdiv, innerdiv, bigimg, _this){
   var 
src = _this.attr("src");//獲取當前點選的pimg元素中的src屬性 $(bigimg).attr("src", src);//設定#bigimg元素的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});//設定#innerdiv的top和left屬性 $(outerdiv).fadeIn("fast");//淡入顯示#outerdiv及.pimg }); $(outerdiv).click(function(){//再次點選淡出消失彈出層 $(this).fadeOut("fast"); }); }

<div id="outerdiv" style="position:fixed;top:0;left:0;background:rgba(0,0,0,0.7);z-index:2000;width:100%;height:100%;display:none;">
   <div id="innerdiv" style="position:absolute;">
      <img id="bigimg" style="border:5px solid #fff;" src="" />
   </div>
</div>

相關推薦

div增多img圖片img頁面檢視

var imgList = $.trim(that.find("td").eq(10).text()).split(";"); var myDiv = document.getElementById(

字串包含連結連結指定位置

有時候一個String字串中包含有連結,我們需要設定下劃線以及高亮顯示,這時候需要使用 Android:autoLink=”web” 這個屬性,但是這個連結點選只能到瀏覽器中,這時需要我們在程式碼中進行設定! XML檔案內容: <TextVie

iOS UITextView 設定 NSLinkAttributeName 屬性連結

@interface ViewController ()<UITextViewDelegate>- (void)viewDidLoad{    [super viewDidLoad];    NSMutableAttributedString *str = [[NSMutableAttribu

封裝List按鈕傳值並優化

package com.example.yinchenglong1229; import android.annotation.SuppressLint; import android.content.Intent; import android.os.AsyncTask; import android.s

萬彩影像大師教程 | 在輪播坑位增多圖片

在輪播坑位中,可以新增多張圖片輪播呈現,營造唯美的視覺體驗。萬彩影像大師支援三種方式批量多張圖片,操作簡單。具體步驟如下: 方法一:直接拖拽資料夾素材庫中的圖片至輪播坑位中 方法二:點選輪播坑位中的 製作照片視訊的軟體 輪播坑位, 新增多張圖片 圖示->在彈出的新視窗中單

CSS3 同時增多背景圖片 (螢幕適配)

demo.html:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title&g

fragment的ImagView+Text多條目ImageView二次取樣切換相簿圖片

##Fragmentd的 XML: <?xml version="1.0" encoding="utf-8"?> <android.support.constraint.ConstraintLayout xmlns:android=“http://schemas.and

IOS自定義圖片瀏覽器支援瀏覽多圖片雙擊兩手指縮放操作並顯示載入進度條

圖片瀏覽器Controller的主要思路是:新建一個 JZAlbumViewController,在這個controller裡主要顯示一個UIScrollView,這個UIScrollView用來顯

vue擊tab頁面擊的tab添加樣式且解決刷以後擊的tab樣式消失問題

解決 clas col 跳轉頁面 turn body outer cti 問題 <ul class="nij"> <li v-for="item in nav" @click="selectNav(item.title)">

在servlet實現彈出提示框確認後其他頁面

PrintWriter out = response.getWriter();如果成功彈出登陸成功並跳到下一個頁面out.print("<script>alert('登入成功!');window.location.href='跳到登陸成功後的頁面'</sc

swiper一組圖片圖片出現中間看效果

好兄弟先看看效果是這樣的麼 點選哪個頭像,頭像移動到中間,然後放大,demo上寫了五條資料 廢話不多說 直接上程式碼 1.引入swiper.css, swiper.js 2.HTML(小弟做的是移動端的,所以meta-viewport要引入哦) <div class="i

實現ssm加layui資料表格展示資料搜尋編輯分頁(後臺用pagehelper)排序檢視圖片 檢視(彈出層)

之前的方法檢視大圖有bug現在換了個方法,修改後就可以了,有問題請留言 先上圖 整個頁面用的都是layui外掛。 頁面有資料展示(帶分頁),顯示圖片,檢視圖片大圖,編輯資料實時更新。搜尋功能帶分頁。 引入layui.css,layui.js 2個檔案,檔案自行到官網下

Android瀏覽圖片放大至全屏效果

最近做一個專案類似於QQ空間,做到照片瀏覽的功能,對於QQ空間中點選圖片放大至全屏,感覺效果很贊,於是也做了個類似的效果。如下。 我不知道QQ那個是怎麼做的,我的思路如下: 首先,從圖片縮略介面跳轉到圖片詳情頁面,應該是從一個Activit

Android在xml設定元件風格(圓角效果selector邊框進度條風格動畫)TextView文字透明度

在標題中寫到的元件的特效,都是在xml中為元件定義的 步驟: 1.在drawable下建立“Drawable resource file”,命名為:btn_corners(表示功能:圓角button) 2.在btn_corners.xml檔案中寫入程式碼如下 3.TextV

IOS tabbaritem到一個介面且隱藏tabbar

先自定義一個UITabbarController,用於Storyboard中 再在MyTabbarController中實現protocol @interface MyTabbarController : UITabBarController <UITabBar

Android在fragment A裡面button到fragment B實現方法

方法一:直接getActivity,使用activity的fragmenttransation的replace方法替換 假設 class OneFragment extends Fragment{ private Button btn; @Override p

排他佈局導航顯示不同頁面內容。自定義屬性應用於索引。

排他佈局,點選不同導航,會顯示不同的內容。關鍵在於給導航標籤span設定自定義屬性index用於索引。這樣不同的導航索引對應下面不同內容。如:當點選產品:則顯示對應的產品模組。obj.setAttribute("index",i);  var numb=obj.getAttr

layer彈出層的內容頁按鈕頁面問題

在參與的一個專案中,有一個這樣的需求,匯入基礎資料成功後,預設彈出一個管理員登入頁,點選登入按鈕,需要跳到管理頁面。 匯入頁按鈕: <button type="button" id="start" class="layui-btn layui-b

form表單提交批量上傳檔案不重新整理不頁面

jsp: <form action="inImg.do" method="post" enctype="multipart/form-data" target="nm_iframe"> <table> <tr>

echarts-圖例但圖例不被關閉

myChart.setOption(option_science); var triggerAction = function(action, selected) {