您好,登錄后才能下訂單哦!
本篇內(nèi)容主要講解“如何利用HTML、CSS實現(xiàn)的圖片預(yù)覽彈出層”,感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷,實用性強。下面就讓小編來帶大家學習“如何利用HTML、CSS實現(xiàn)的圖片預(yù)覽彈出層”吧!
本篇效果利用HTML、CSS和Jq實現(xiàn)的圖片點擊預(yù)覽功能,在預(yù)覽時也可以點擊切換圖片。圖片1為整體效果,圖片2是點擊圖片1后出現(xiàn)被點擊圖片的預(yù)覽圖片的名稱以及說明。
圖片1
圖片2
實現(xiàn)的代碼:
html代碼:
XML/HTML Code復(fù)制內(nèi)容到剪貼板
<div id="ImageMain"> <img src="1img1.jpg"/><img src="1img2.jpg"/> <img src="1img3.jpg"/> <img src="1img4.jpg"/> <img src="1img5.jpg"/> <img src="1img6.jpg"/> </div>
<div id="ImageScaBg"></div>
<div id="ImageSca">
<div id="ImageContainer">
<img id="imgCenter" src="1img3.jpg"/>
<div id="imgLunbo"><img class="imgLunboItem" src="1img1.jpg"/></div>
</div>
<div id="ImageInfo">
<h4 id="imgName"></h4>
<p id="imgInfo"></p>
</div>
</div>
css3代碼:
CSS Code復(fù)制內(nèi)容到剪貼板
#ImageMain {
width: 630px;
height: 500px;
margin: 0 auto;
margin-top: 100px;
}
#ImageMain>img{
width:200px;
height:200px;
cursor:pointer;
float:left;
margin-left:10px;
margin-top:10px;
}
#ImageMain>img:hover{
opacity:0.8;
}
#ImageScaBg{
position:fixed;
background-color:#000;
top:0px;
left:0px;
opacity:0.6;
width:100%;
height:100%;
display:none;
}
#ImageSca{
position:absolute;
background-color:#333;
border:1px solid #ccc;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
display:none;
}
#ImageContainer{
float:left;
text-align:center;
}
#ImageInfo{
float:left;
width:300px;
background-color:#fff;
-webkit-border-radius:0 3px 3px 0;
-moz-border-radius:0 3px 3px 0;
border-radius:0 3px 3px 0;
}
#imgName{
font: 15px "微軟雅黑", Arial, Helvetica, sans-serif;
padding-left:10px;
font-weight:500px;
}
#imgInfo{
font: 13px "微軟雅黑", Arial, Helvetica, sans-serif;
padding-left:10px;
color:#808080;
}
#imgLunbo{
height:80px;
position:absolute;
margin-left:50px;
}
.imgLunboItem{
width:76px;
height:76px;
margin-left:10px;
}
JQ的代碼:
復(fù)制內(nèi)容到剪貼板
var ImageScaHandler={
ImageMaxWidth:800,
ImageMaxHeight:600,
ImagePathJson:[{imgName:"預(yù)覽彈出層測試圖片1",imgPath:"1img1.jpg",imgInfo:"HTML圖片預(yù)覽彈出層測試圖片-豪車圖片集錦(圖片均來自互聯(lián)網(wǎng))"},
{imgName:"預(yù)覽彈出層測試圖片2",imgPath:"1img2.jpg",imgInfo:"HTML圖片預(yù)覽彈出層測試圖片-豪車圖片集錦(圖片均來自互聯(lián)網(wǎng))"},
{imgName:"預(yù)覽彈出層測試圖片3",imgPath:"1img3.jpg",imgInfo:"HTML圖片預(yù)覽彈出層測試圖片-豪車圖片集錦(圖片均來自互聯(lián)網(wǎng))"},
{imgName:"預(yù)覽彈出層測試圖片4",imgPath:"1img4.jpg",imgInfo:"HTML圖片預(yù)覽彈出層測試圖片-豪車圖片集錦(圖片均來自互聯(lián)網(wǎng))"},
{imgName:"預(yù)覽彈出層測試圖片5",imgPath:"1img5.jpg",imgInfo:"HTML圖片預(yù)覽彈出層測試圖片-豪車圖片集錦(圖片均來自互聯(lián)網(wǎng))"},
{imgName:"預(yù)覽彈出層測試圖片6",imgPath:"1img6.jpg",imgInfo:"HTML圖片預(yù)覽彈出層測試圖片-豪車圖片集錦(圖片均來自互聯(lián)網(wǎng))"}
],
Init:function(){
$("#ImageSca").css("width",ImageScaHandler.ImageMaxWidth 200 "px");
$("#ImageSca").css("height",ImageScaHandler.ImageMaxHeight 10 "px");
$("#ImageSca").css("top",($(window).height()-$("#ImageSca").height())/2 "px");
$("#ImageSca").css("left",($(window).width()-$("#ImageSca").width())/2 "px");
$("#ImageContainer").css("width",$("#ImageSca").width()-300 "px").css("height",$("#ImageSca").height());
$("#imgLunbo").css("width",$("#ImageSca").width()-300-100 "px").css("top",$("#ImageSca").height()-90 "px");
$("#ImageInfo").css("height",$("#ImageSca").height());
$("#ImageMain>img").click(function(){
ImageScaHandler.ChangeImage($(this));
});
ImageScaHandler.GetImage();
$("#ImageSca").click(function(event){
event.stopPropagation();
});
$("#ImageScaBg").click(function(event){
ImageScaHandler.Hide();
});
},
Show:function(){
$("#ImageSca").css("display","block");
$("#ImageScaBg").css("display","block");
},
Hide:function(){
$("#ImageSca").css("display","none");
$("#ImageScaBg").css("display","none");
},
GetImage:function(){
$("#imgLunbo").children().remove();
for(var i=0;i<ImageScaHandler.ImagePathJson.length;i ){
var mImage=document.createElement("img");
mImage.className="imgLunboItem";
mImage.src=ImageScaHandler.ImagePathJson[i].imgPath;
$("#imgLunbo").append(mImage);
mImage.onclick=function(){
$(".imgLunboItem").css("border","0px solid #000");
ImageScaHandler.ChangeImage($(this));
}
}
},
ChangeImage:function(target){
$("#ImageContainer>img").attr("src",$(target).attr("src"));
$("#ImageContainer>img").css("margin-top",100 "px");
ImageScaHandler.Show();
$(".imgLunboItem").css("border","0px solid #000");
for(var i=0;i<ImageScaHandler.ImagePathJson.length;i ){
if(ImageScaHandler.ImagePathJson[i].imgPath==$(target).attr("src")){
$("#imgName").html(ImageScaHandler.ImagePathJson[i].imgName);
$("#imgInfo").html(ImageScaHandler.ImagePathJson[i].imgInfo);
$($(".imgLunboItem")[i]).css("border","2px solid #efefef");
}
}
}
}
到此,相信大家對“如何利用HTML、CSS實現(xiàn)的圖片預(yù)覽彈出層”有了更深的了解,不妨來實際操作一番吧!這里是億速云網(wǎng)站,更多相關(guān)內(nèi)容可以進入相關(guān)頻道進行查詢,關(guān)注我們,繼續(xù)學習!
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。