您现在的位置是：网站首页> 编程资料编程资料

利用HTML、CSS实现的图片预览弹出层的教程jquery+css3实现的鼠标滑过图片向上弹出放大效果纯CSS实现hover图片pop-out弹出效果的实例代码

2023-10-08 375人已围观

简介 本篇效果利用HTML、CSS和Jq实现的图片点击预览功能，在预览时也可以点击切换图片。右边为预览图片的名称以及说明的实现代码

　　本篇效果利用HTML、CSS和Jq实现的图片点击预览功能，在预览时也可以点击切换图片。图片1为整体效果，图片2是点击图片1后出现被点击图片的预览图片的名称以及说明。

图片1

图片2

　　实现的代码：

　　html代码：

XML/HTML Code复制内容到剪贴板
  1. <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>     
  2. <div id="ImageScaBg">div>     
  3. <div id="ImageSca">     
  4.    <div id="ImageContainer">     
  5.       <img id="imgCenter" src="1img3.jpg"/>     
  6.       <div id="imgLunbo"><img class="imgLunboItem" src="1img1.jpg"/>div>     
  7.    div>     
  8.    <div id="ImageInfo">     
  9.      <h3 id="imgName">h3>     
  10.      <p id="imgInfo">p>     
  11.    div>     
  12. div>    

　　css3代码：

CSS Code复制内容到剪贴板
  1. #ImageMain {     
  2.     width: 630px;     
  3.     height: 500px;     
  4.     margin: 0 auto;     
  5.     margin-top: 100px;     
  6. }     
  7. #ImageMain>img{     
  8.     width:200px;     
  9.     height:200px;     
  10.     cursor:pointer;     
  11.     float:left;     
  12.     margin-left:10px;     
  13.     margin-top:10px;     
  14. }     
  15. #ImageMain>img:hover{     
  16.     opacity:0.8;     
  17. }     
  18. #ImageScaBg{     
  19.     position:fixed;     
  20.     background-color:#000;     
  21.     top:0px;     
  22.     left:0px;     
  23.     opacity:0.6;     
  24.     width:100%;     
  25.     height:100%;     
  26.     display:none;     
  27. }     
  28. #ImageSca{     
  29. 提示： 本文由神整理自网络，如有侵权请联系本站删除！
    本站声明：
    1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
    2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！

    上一篇：扩散性百万亚瑟王学徒型SR逆合成方法攻略_手机游戏_游戏攻略_

    下一篇：css实例教程 一款纯css3实现的超炫动画背画特效css3中transform属性实现的4种功能详解CSS3.0(Cascading Style Sheet) 层叠级联样式表纯CSS3实现div按照顺序出入效果CSS3实现列表无限滚动/轮播效果css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效CSS3实现的侧滑菜单CSS3实现的3D隧道效果用CSS3画一个爱心css3 实现文字闪烁效果的三种方式示例代码六种css3实现的边框过渡效果

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网