js仿jquery插件lightBox特效代码演示
日期：2014-05-18 浏览次数：20129 次
<!DOCTYPE html>
<html lang="en-US"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<title>js仿jquery-lightBox--网页特效演示站 by js.aiyiweb.com</title>
<style>
body,ul,li,p,img{margin: 0;padding: 0}
html,body{background: #fff;}
.lightBox{margin:30px auto;width:750px;height: 80px;padding: 10px 0;border: 1px solid #ccc}
.lightBox ul{width: 750px}
.lightBox li{height: 80px;width: 140px;margin:0 5px;float: left;overflow: hidden;display: inline;}
.lightBox li img{height: 80px;width: 140px}
/**弹出层样式***/
.mask{height: 100%;width: 100%;filter:alpha(opacity:0);opacity: 0;background: #000;position: absolute;z-index: 1;left: 0;top:0;display: -none;}
.popup{background:#fff url(./lightBox_files/loading.gif) no-repeat center;border: 10px solid #fff;position: absolute;z-index: 2;;overflow:-hidden;width: 320px;height: 240px;}
.popup img{height: auto;width: auto;}
.btn{position: absolute;right: 0;top:0;height: 100%;width: 50%;cursor: pointer;}
.prev{left: 0;background: url(./lightBox_files/lightbox-btn-prev.gif) no-repeat 0 50px;}
.next{background: url(./lightBox_files/lightbox-btn-next.gif) no-repeat right 50px;}
.popupBottom{position: relative;z-index: 3;margin-top:4px}
.popupTitle{line-height: 18px;color: #543424;font-family: Arial;font-size: 12px;padding-right: 100px;}
.popupClose{margin-right:15px;height: 22px;width: 66px;background: url(./lightBox_files/lightbox-btn-close.gif) no-repeat;cursor: pointer;z-index: 4;position: absolute;top:0;right: 0;}
</style>
</head>
<body>
<div class="lightBox">
<ul>
<li><img src="http://www.webrhai.com/Public/demo/lightBox/images/11.jpg" _title="图片展示特效11" _src="http://www.webrhai.com/Public/demo/lightBox/images/1.jpg"></li>
<li><img src="http://www.webrhai.com/Public/demo/lightBox/images/22.jpg" _title="图片展示特效22" _src="http://www.webrhai.com/Public/demo/lightBox/images/2.jpg"></li>
<li><img src="http://www.webrhai.com/Public/demo/lightBox/images/33.jpg" _title="图片展示特效33" _src="http://www.webrhai.com/Public/demo/lightBox/images/3.jpg"></li>
<li><img src="http://www.webrhai.com/Public/demo/lightBox/images/44.jpg" _title="图片展示特效44" _src="http://www.webrhai.com/Public/demo/lightBox/images/4.jpg"></li>
<li><img src="http://www.webrhai.com/Public/demo/lightBox/images/55.jpg" _title="图片展示特效55" _src="http://www.webrhai.com/Public/demo/lightBox/images/5.jpg"></li>
</ul>
</div>
<script>
/*
* author:涛涛
* date:2013/8/22
*/
(function(win){
function myLightBox(elem,isZoom,src,titletxt){
this.elem=typeof elem=='object' ? elem : this.$('lightBox')[0];
this.isZoom=typeof isZoom==&#
<html lang="en-US"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<title>js仿jquery-lightBox--网页特效演示站 by js.aiyiweb.com</title>
<style>
body,ul,li,p,img{margin: 0;padding: 0}
html,body{background: #fff;}
.lightBox{margin:30px auto;width:750px;height: 80px;padding: 10px 0;border: 1px solid #ccc}
.lightBox ul{width: 750px}
.lightBox li{height: 80px;width: 140px;margin:0 5px;float: left;overflow: hidden;display: inline;}
.lightBox li img{height: 80px;width: 140px}
/**弹出层样式***/
.mask{height: 100%;width: 100%;filter:alpha(opacity:0);opacity: 0;background: #000;position: absolute;z-index: 1;left: 0;top:0;display: -none;}
.popup{background:#fff url(./lightBox_files/loading.gif) no-repeat center;border: 10px solid #fff;position: absolute;z-index: 2;;overflow:-hidden;width: 320px;height: 240px;}
.popup img{height: auto;width: auto;}
.btn{position: absolute;right: 0;top:0;height: 100%;width: 50%;cursor: pointer;}
.prev{left: 0;background: url(./lightBox_files/lightbox-btn-prev.gif) no-repeat 0 50px;}
.next{background: url(./lightBox_files/lightbox-btn-next.gif) no-repeat right 50px;}
.popupBottom{position: relative;z-index: 3;margin-top:4px}
.popupTitle{line-height: 18px;color: #543424;font-family: Arial;font-size: 12px;padding-right: 100px;}
.popupClose{margin-right:15px;height: 22px;width: 66px;background: url(./lightBox_files/lightbox-btn-close.gif) no-repeat;cursor: pointer;z-index: 4;position: absolute;top:0;right: 0;}
</style>
</head>
<body>
<div class="lightBox">
<ul>
<li><img src="http://www.webrhai.com/Public/demo/lightBox/images/11.jpg" _title="图片展示特效11" _src="http://www.webrhai.com/Public/demo/lightBox/images/1.jpg"></li>
<li><img src="http://www.webrhai.com/Public/demo/lightBox/images/22.jpg" _title="图片展示特效22" _src="http://www.webrhai.com/Public/demo/lightBox/images/2.jpg"></li>
<li><img src="http://www.webrhai.com/Public/demo/lightBox/images/33.jpg" _title="图片展示特效33" _src="http://www.webrhai.com/Public/demo/lightBox/images/3.jpg"></li>
<li><img src="http://www.webrhai.com/Public/demo/lightBox/images/44.jpg" _title="图片展示特效44" _src="http://www.webrhai.com/Public/demo/lightBox/images/4.jpg"></li>
<li><img src="http://www.webrhai.com/Public/demo/lightBox/images/55.jpg" _title="图片展示特效55" _src="http://www.webrhai.com/Public/demo/lightBox/images/5.jpg"></li>
</ul>
</div>
<script>
/*
* author:涛涛
* date:2013/8/22
*/
(function(win){
function myLightBox(elem,isZoom,src,titletxt){
this.elem=typeof elem=='object' ? elem : this.$('lightBox')[0];
this.isZoom=typeof isZoom==&#
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
