原生Js實(shí)現(xiàn)的畫(huà)廊功能
原生Js實(shí)現(xiàn)畫(huà)廊功能，點(diǎn)擊圖片，在下方出現(xiàn)相應(yīng)放大圖片。給a標(biāo)簽綁定onclick點(diǎn)擊事件。這里上方的小圖和下方將要展示大圖，都是同一張圖片，只是上下兩個(gè)img的style中設(shè)置了不同的width和heigth。（如果不想設(shè)置width、height，另一種方法就是將a標(biāo)簽里src的圖片存成大圖，img展示的是小圖。）通過(guò)Js點(diǎn)擊事件結(jié)合css實(shí)現(xiàn)大圖顯示或隱藏，切換圖片
具體如下圖，代碼附上
第一種<html lang='en'><head> <meta charset='UTF-8'> <meta name='viewport' content='width=device-width, initial-scale=1.0'> <title>Document</title> <style>*{ margin: 0; padding: 0;}img{ width: 200px; height: 100px;}#showimg{ width: 500px; height: 240px; /* background-color: pink;*/}.hide{ display: none;}.show{ display: block;} </style></head><body> <div id = 'imagegallery'><a href='http://www.aoyou183.cn/imgs/1.jpg' rel='external nofollow' > <img src='http://www.aoyou183.cn/imgs/1.jpg' alt='1'></a><a href='http://www.aoyou183.cn/imgs/2.jpg' rel='external nofollow' > <img src='http://www.aoyou183.cn/imgs/2.jpg' alt='2'></a><a href='http://www.aoyou183.cn/imgs/3.jpg' rel='external nofollow' > <img src='http://www.aoyou183.cn/imgs/3.jpg' alt='3'></a><a href='http://www.aoyou183.cn/imgs/4.jpg' rel='external nofollow' > <img src='http://www.aoyou183.cn/imgs/4.jpg' alt='4'></a> </div> <!-- 清除浮動(dòng)的 --> <div style='clear: both'></div><!--利用空白的一個(gè)圖占一個(gè)位置 --> <!-- <img src='http://www.aoyou183.cn/bcjs/14025.html' alt='' width='450px'> --><img src='http://www.aoyou183.cn/bcjs/14025.html' alt=''> <p id='desc'></p><script>var imagegallery = document.getElementById('imagegallery');var link = document.getElementsByTagName('a');var showimg = document.getElementById('showimg');var desc = document.getElementById('desc');//for循環(huán)內(nèi)部添加的綁定事件，在觸發(fā)時(shí)，所有的批量添加的事件已經(jīng)成功，觸發(fā)事件時(shí)都是在循環(huán)結(jié)束之后//批量綁定的事件的事件函數(shù)內(nèi)部如果有變量i，要注意，函數(shù)執(zhí)行時(shí)已經(jīng)是在循環(huán)結(jié)束后 //循環(huán)內(nèi)部定義的變量是一個(gè)全局變量，在循環(huán)后執(zhí)行的i變量的值是i跳出循環(huán)時(shí)的值 image.src = links[i].href; // for(var i = 0;i < link.length;i++){// link[i].onclick = function(){// // alert('123');// // 更改image內(nèi)部的src屬性值// showimg.src = link[i].href;// // 更改desc內(nèi)部文字描述// return false;//取消a標(biāo)簽的默認(rèn)跳轉(zhuǎn)// }// } for(var i = 0;i < link.length;i++){ link[i].onclick = function(){// alert('123');// 更改image內(nèi)部的src屬性值showimg.src = this.href;//this. 關(guān)鍵字指代的是觸發(fā)事件的真正事件源//更改img顯示showimg.className = 'show';// 更改desc內(nèi)部文字描述desc.innerText = this.title;return false;//取消a標(biāo)簽的默認(rèn)跳轉(zhuǎn) }} </script></body></html>
<!DOCTYPE html><html><head><meta charset='utf-8'><title>簡(jiǎn)易燈箱畫(huà)廊設(shè)計(jì)</title><style>*{margin: 0;}#total{width:100%;background-color: green;height:1000px;}#fpic{margin-left: 15%;}.pic{margin : 50px;width: 100px;height: 100px;}#show-bigger{margin: auto;width: 600px;height: 450px;background-color: red;}</style></head><body ><div id='total'><h3 style='color: white;text-align:center;'>簡(jiǎn)易畫(huà)廊設(shè)計(jì)</h3><hr color='red'><img id='fpic'src='http://www.aoyou183.cn/bcjs/trees/t1.jpg' onclick='myfunction(this)' tabIndex=1 onblur='myfunction1(this)'><img src='http://www.aoyou183.cn/bcjs/trees/t2.jpg' onclick='myfunction(this)' tabIndex=1 onblur='myfunction1(this)'><img src='http://www.aoyou183.cn/bcjs/trees/t3.jpg' onclick='myfunction(this)' tabIndex=1 onblur='myfunction1(this)'><img src='http://www.aoyou183.cn/bcjs/trees/t4.jpg' onclick='myfunction(this)' tabIndex=1 onblur='myfunction1(this)'><img src='http://www.aoyou183.cn/bcjs/trees/t5.jpg' onclick='myfunction(this)' tabIndex=1 onblur='myfunction1(this)'><img src='http://www.aoyou183.cn/bcjs/trees/t6.jpg' onclick='myfunction(this)' tabIndex=1 onblur='myfunction1(this)'><div id='show-bigger'><img src='http://www.aoyou183.cn/bcjs/trees/t1.jpg' style='width: 100%;height: 100%'></div></div></body><script type='text/javascript'>function myfunction(x){ //改變展示框的圖片和被選中展示圖片的邊框document.getElementById('spic').src=x.src;x.style.borderBottom='5px solid red';}function myfunction1(x){ //消除未選擇的邊框?qū)傩詘.style.border='none';}</script></html>
以上就是原生Js實(shí)現(xiàn)的畫(huà)廊功能的詳細(xì)內(nèi)容，更多關(guān)于Js實(shí)現(xiàn)畫(huà)廊功能的資料請(qǐng)關(guān)注好吧啦網(wǎng)其它相關(guān)文章！
相關(guān)文章：
1. 淺談python出錯(cuò)時(shí)traceback的解讀2. Python importlib動(dòng)態(tài)導(dǎo)入模塊實(shí)現(xiàn)代碼3. 在Android中使用WebSocket實(shí)現(xiàn)消息通信的方法詳解4. JSP數(shù)據(jù)交互實(shí)現(xiàn)過(guò)程解析5. Nginx+php配置文件及原理解析6. JavaMail 1.4 發(fā)布7. android studio 打包自動(dòng)生成版本號(hào)與日期,apk輸入路徑詳解8. vue使用webSocket更新實(shí)時(shí)天氣的方法9. Yii2.0引入CSS,JS文件方法10. python matplotlib:plt.scatter() 大小和顏色參數(shù)詳解
網(wǎng)公網(wǎng)安備