您好,登錄后才能下訂單哦!
這篇文章將為大家詳細(xì)講解有關(guān)JS如何實(shí)現(xiàn)點(diǎn)擊縮略圖整屏居中放大圖片效果,小編覺(jué)得挺實(shí)用的,因此分享給大家做個(gè)參考,希望大家閱讀完這篇文章后可以有所收獲。
需要實(shí)現(xiàn)的效果圖:
今天開(kāi)發(fā)的時(shí)候,遇到要點(diǎn)擊縮略圖之后居中顯示圖片的大圖查看(大致效果如上圖所示)~想了好幾種實(shí)現(xiàn)方式,最開(kāi)始的時(shí)候,是想通過(guò)animate來(lái)點(diǎn)擊圖片進(jìn)行顯示,可是后來(lái)當(dāng)我想要讓放大的圖片進(jìn)行居中顯示和點(diǎn)擊別的地方隱藏已顯示的大圖的時(shí)候,才發(fā)現(xiàn)實(shí)現(xiàn)起來(lái)有難度。
1 第一張點(diǎn)擊圖片將圖片放大
下面將這種方式也貼出來(lái),供自己參考(萬(wàn)一有需要的小伙伴正好需要這樣的功能呢):
<div> <img class="dialog" src="xxx.jpg"> <div id="dialog_large_image"></div> </div> <script type="text/javascript"> $(function () { $("img.dialog").click(function() { var large_image = '<img src= ' + $(this).attr("src") + '></img>'; $('#dialog_large_image').html($(large_image).animate({ height: '50%', width: '50%' }, 500)); }); }); </script>
上述代碼實(shí)現(xiàn)的效果如下圖所示:
這個(gè)是最基本的漸變的效果實(shí)現(xiàn)。
- 2 第二種點(diǎn)擊圖片全屏居中顯示(推薦這種實(shí)現(xiàn)方式)
HTML的樣式部分:
代碼部分用到了字符串的拼接(可以以后做參考用):
重要的是第二行var html = ...
for (var i in result_array) { var html = ''; var html = '<div id="dialog_pic"><div class="dialog-body"><img src="' + result_array[i]['photo_url'] + '?imageView2/1/w/128/h/128"></div></div> <div class="waterfall_stream_pic"><div class="item">'; if (result_array[i]['photo_url']) { html += '<img class="zoom" src="' + result_array[i]['photo_url'] + '?imageView2/1/w/128/h/128">'; } html += '<div><span>' + result_array[i]['final_score'] + '</span><span>(' + result_array[i]['baby_gender'] + '寶' + ')</span><p>' + parseInt(result_array[i]['age_in_month']/12) + '周歲'+ result_array[i]['age_in_month']%12 + '個(gè)月</p>'; html += '</div></div></div>'; $container_pics.append(html); } }
CSS 樣式部分(點(diǎn)擊縮略圖顯示的一些代碼,很重要~注意z-index: 100;這個(gè)屬性值的作用)
#dialog_pic { position: fixed; top: 0; bottom: 0; left: 0; right: 0; background: rgba(0,0,0,0.65); z-index: 100; display: none; .dialog-body { width: 100%; max-width: 250px; max-height: 300px; margin: 0 auto; padding: 10px; border-radius: 5px; background: white; overflow: auto; margin-top: 283px; img { width: 100%; } } }
這里必須使用on事件來(lái)獲取元素的點(diǎn)擊事件,onclick不產(chǎn)生作用(為什么不產(chǎn)生作用,請(qǐng)看上一篇文章的關(guān)于on 和onclick 的說(shuō)明)
// pic zoom $(function() { //獲取縮略圖的點(diǎn)擊事件,然后將大圖片展示出來(lái)(樣式里默認(rèn)顯示為```none```) $('.result_pics').on('click', 'img.zoom', function() { var $dialog = $('#dialog_pic'); //這里的dialog_pic是整個(gè)大圖的顯示區(qū)域(請(qǐng)注意,這里之只有采用變量賦值的方式是為了
下面的代碼看起來(lái)很簡(jiǎn)潔,方便自己,方便他人)
$dialog.show(); // outerHeight聲明了整個(gè)窗口的高度 // 此處的代碼通過(guò)上面的圖片,我已經(jīng)標(biāo)注出來(lái)了相應(yīng)的區(qū)域部分。整個(gè)頁(yè)面減去大圖片顯示區(qū)域從上到圖片的最底邊所產(chǎn)生的距離,然后除2就可以實(shí)現(xiàn)圖片的放大居中了。 var marginTop = ($dialog.outerHeight() - $('.dialog-body', $dialog).outerHeight()) / 2; $('.dialog-body', $dialog).css({ marginTop: marginTop }); }); // 點(diǎn)擊顯示的大圖,觸發(fā)事件,當(dāng)觸發(fā)當(dāng)前頁(yè)面內(nèi)里任何處位置,就會(huì)隱藏顯示的大圖 $('.result_pics').on('click', '#dialog_pic', function() { $(this).hide(); }); });
至此,點(diǎn)擊縮略圖顯示大圖的功能到這里基本實(shí)現(xiàn)。但是這里有一個(gè)bug就是放大的圖片有失真,不清晰(注:明天排查下是什么原因?qū)е碌膥)
解決上面存留的bug:(bug出現(xiàn)了2個(gè),一個(gè)是點(diǎn)擊放大的圖片失真,另一個(gè)是原圖放大之后圖片會(huì)旋轉(zhuǎn))
1.點(diǎn)擊放大的圖片失真(這個(gè)是我一開(kāi)始沒(méi)放原圖<img src="' + result_array[i]['photo_url'] ">即后面不帶參數(shù))
var html = '<div id="dialog_pic"><div class="dialog-body"><img src="' + result_array[i]['photo_url'] + '?imageMogr/auto-orient"></div></div> <div class="waterfall_stream_pic"><div class="item">';
2.解決旋轉(zhuǎn)的方案(這個(gè)參數(shù)一般就是為了解決客戶(hù)端IOS/Android圖片橫豎屏的問(wèn)題,當(dāng)然放在網(wǎng)頁(yè)端應(yīng)用也是OK的):
imageMogr/auto-orient
至此,點(diǎn)擊縮略圖顯示大圖的功能實(shí)現(xiàn),已全部OK ~
關(guān)于“JS如何實(shí)現(xiàn)點(diǎn)擊縮略圖整屏居中放大圖片效果”這篇文章就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,使各位可以學(xué)到更多知識(shí),如果覺(jué)得文章不錯(cuò),請(qǐng)把它分享出去讓更多的人看到。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。