弹出图片层

最近很容易可以看到这个效果,也就是当您点选网页中的图片或链接时,背景会立即变暗并且出现 Loading… 然后跳出一个美美的方框显示图片或网页,这种效果就叫做 Lightbox,底下收集了一些许多人开发或修改的 Lightbox,通常都会有 Demo,看个人喜好选择

http://www.huddletogether.com/projects/lightbox2/

Lightbox JS
典型也是最常见的一个,目前也出了 2.0 版,不过似乎只能显示图片而已。

ThickBox
这个也是很常见,可以显示图片、网页,并且可指定方框的大小,推荐。

Greased Lightbox
提供装在浏览器的扩充套件,平常看图片时就会有 Lightbox 效果。

GreyBox
这个就厉害了,除了可以用于图片和网页外、连 flash、影片都可以显示在 Lightbox 弹出的方框里面。

Lightbox Gone Wild!
也是可以显示网页、图片,效果还不错。

 
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
可以使用CSS中的flex布局来实现弹出中文字和图片的左右布局。以下是示例代码: HTML代码: ``` <button id="myBtn">点击打开弹出</button> <div id="myModal" class="modal"> <div class="modal-content"> <span class="close">×</span> <div class="modal-body"> <div class="modal-text"> <h2>标题</h2> <p>这里是弹出中的文字内容。</p> </div> <div class="modal-image"> <img src="图片地址" alt="图片描述"> </div> </div> </div> </div> ``` CSS代码: ``` /* 弹出背景 */ .modal { display: none; position: fixed; z-index: 1; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.4); } /* 弹出内容 */ .modal-content { background-color: #fefefe; margin: 15% auto; padding: 20px; border: 1px solid #888; width: 80%; box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.75); /* 添加阴影效果 */ } /* 关闭按钮 */ .close { color: #aaa; float: right; font-size: 28px; font-weight: bold; } .close:hover, .close:focus { color: black; text-decoration: none; cursor: pointer; } /* 弹出主体 */ .modal-body { display: flex; /* 使用flex布局 */ } /* 左边文本 */ .modal-text { flex-basis: 70%; /* 左边占70%的宽度 */ } /* 右边图片 */ .modal-image { flex-basis: 30%; /* 右边占30%的宽度 */ text-align: center; /* 图片居中 */ } /* 图片样式 */ .modal-image img { max-width: 100%; /* 图片宽度最大为容器的100% */ height: auto; /* 高度自适应 */ } ``` 这样就可以实现弹出中文字和图片的左右布局了。可以根据需要调整左右两部分的宽度比例和样式。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值