点击图片放大至原始图片大小
生活随笔
收集整理的這篇文章主要介紹了
点击图片放大至原始图片大小
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
有些時候為了排版的整潔,頁面展示的圖片不得不都是限定寬高的,如果想要點擊圖片放大至原始大小進行預覽,再次點擊回到原來樣子,就要用到下面的代碼了:
var _w = parseInt($(window).width());//獲取瀏覽器的寬度$("#abc img").each(function(i){var img = this;var realWidth;//真實的寬度var realHeight;//真實的高度$("<img/>").attr("src", $(img).attr("src")).load(function() {realWidth = this.width;realHeight = this.height;})var flag = 1;$(img).on("click",function () {if (flag == 1) {if(realWidth>=_w){$(img).css({"width": "100%","height": "auto","position": "fixed","top": "50%","left": "50%","margin-top": "-30%","margin-left": "-50%"});}else{$(img).css({"width": realWidth,"height": realHeight,"position": "fixed","top": "50%","left": "50%","margin-top": -realHeight / 2,"margin-left": -realWidth / 2});}flag = 0;} else {$(img).css({"width": 500,"height": 400,});flag = 1;}});});以上代碼獲取圖片原始寬高為轉載,進行加工后如上。親測有效,但是對于圖片上傳后,點擊方法后,貌似并不能獲取到原始寬高,我想應該是load的原因,還請懂的大神多多指點,如何實現上傳的圖片文件,點擊縮略圖,放大至原始大小!!!
更多專業前端知識,請上 【猿2048】www.mk2048.com 創作挑戰賽新人創作獎勵來咯,堅持創作打卡瓜分現金大獎
總結
以上是生活随笔為你收集整理的点击图片放大至原始图片大小的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 301、404、200、304、500H
- 下一篇: 自定义滚动条样式