-
这种效应使得使用HTML，CSS，和JQ点击图片的预览功能，你也可以点击预览切换图片。图1是一个整体的效果，图2是名称和一个点击图片预览图片描述后点击图片1。
图片1
图片2
实现代码：
HTML代码：
xml代码将内容复制到剪贴板。
CSS3代码：
CSS代码将内容复制到剪贴板。
{ # imagemain
宽度：630px；
身高：500px；
保证金：0汽车；
边距：100px；
}
# imagemain > img {
宽度：200px；
身高：200px；
光标：指针；
浮点数：左；
左：10px保证金；
边距：10px；
}
# imagemain > IMG：悬停{
不透明性：0.8；
}
# imagescabg {
位置：固定；
背景颜色：# 000；
上图：0px；
左：0px；
不透明性：0.6；
宽度：100%；
身高：100%；
显示：无；
}
# imagesca {
位置：绝对；
背景颜色：# 333；
边境：1px solid # CCC；
WebKit的边界半径：5px；
-moz边界半径：5px；
边界半径：5px；
显示：无；
}
# imagecontainer {
浮点数：左；
文本对齐：中心；
}
# ImageInfo {
浮点数：左；
宽度：300px；
背景颜色：# FFF；
WebKit的边界半径：0 3px 3px 0；
-moz边界半径：0 3px 3px 0；
边界半径：0 3px 3px 0；
}
# imgname {
微软雅黑字体：15px
左：10px填充；
字体重量：500px；
}
# imginfo {
微软雅黑字体：13px
左：10px填充；
颜色：# 808080；
}
# imglunbo {
身高：80px；
位置：绝对；
左：50px保证金；
}
imglunboitem {。
宽度：76px；
身高：76px；
左：10px保证金；
}
JQ的代码：
将内容复制到剪贴板
Var ImageScaHandler = {
imagemaxwidth：800，
imagemaxheight：600，
imagepathjson：{ { imgname：预览弹出层，测试图片1
{ imgname：预览弹出层，测试图片2
{ imgname：预览弹出层，测试图片3
{ imgname：预览弹出层，测试图片4
{ imgname：预览弹出层，测试图片5
{ imgname：预览弹出层，测试图片6
}，
init：函数（）{
$（# imagesca ）Css（宽。
$（# imagesca）。Css（高
$（# imagesca）。Css（顶（$（窗口）（的高度）$（# imagesca ）（的高度）） / 2 PX）；
$（# imagesca）。Css（左（$（窗口）（宽度）$（# imagesca ）（宽度）） / 2 PX）；
$（# imagecontainer ）Css（宽。
$（# imglunbo ）Css（宽。
$(#ImageInfo).Css (height
$（# imagemain > IMG）。Click（function（）{）
imagescahandler.changeimage（$（this））；
}）；
imagescahandler.getimage（）；
$（# imagesca）。Click（函数（事件）{
event.stoppropagation（）；
}）；
$（# imagescabg）。Click（函数（事件）{
imagescahandler隐藏（）；
}）；
}，
显示：函数（）{
$（# imagesca）。Css（显示
$（# imagescabg）。Css（显示
}，
隐藏：函数（）{
$（# imagesca）。Css（显示
$（# imagescabg）。Css（显示
}，
图像：函数（）{
$（# imglunbo）。儿童（）删除（）；
对于（var i = 0；i < imagescahandler.imagepathjson.length；我）{
无功mimage = document.createelement（IMG）；
mimage。类名=imglunboitem ；
mimage。src= imagescahandler。imagepathjson {我}。imgpath；
$（# imglunbo）。追加（mimage）；
mimage。onclick =函数（）{
$（。imglunboitem）。Css（边界
imagescahandler.changeimage（$（this））；
}
}
}，
常欸玛格：功能（目标）{
$（# imagecontainer > IMG）。Attr（src
$（# imagecontainer > IMG）。Css（边缘上
imagescahandler表明（）；
$（。imglunboitem）。Css（边界
对于（var i = 0；i < imagescahandler.imagepathjson.length；我）{
如果（imagescahandler。imagepathjson {我}。imgpath = = $（目标），Attr（src））{
$（# imgname）。Html（imagescahandler。imagepathjson {我}。imgname）；
$（# imginfo）。Html（imagescahandler。imagepathjson {我}。imginfo）；
$（$（。imglunboitem ）{我}）。Css（边界
}
}
}
}
以上是单击图像预览功能实现的HTML，CSS和JQ。谢谢你的阅读。我们希望能帮助你。请注意它。我们将努力分享更多的优秀文章。