利用jQuery实现图片灯箱预览效果



17 67 23



特效描述:利用jQuery实现 图片灯箱 预览效果,利用jQuery实现图片灯箱预览效果

代码结构

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/style.css">

2. 引入JS

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src='js/lightBox.js'></script>

3. HTML代码

<div class='mian'>
  <h4>根据自定义属性对图片进行幻灯片效果</h4>
  <p>data-title:定义图片标题</p> 
  <p>data-group:定义图片是否为一个集合</p>
  <p>data-id:定义唯一的标记符</p>
<br/>
<br/>
  <h4>图片集合切换</h4>
  <img class='js-lightBox' data-title='picture-title-1-that so happiness time ' data-group='group-1'  src="images/1.jpg" width="150" height="100"  />
  <img class='js-lightBox' data-title='picture-title1-2-that so happiness time ' data-group='group-1'  src="images/2.jpg" width="150" height="100"  />
  <img class='js-lightBox' data-title='picture-title1-3-that so happiness time ' data-group='group-1'  src="images/3.jpg" width="150" height="100"  />
  <img class='js-lightBox' data-title='picture-title1-4-that so happiness time ' data-group='group-1'  src="images/4.jpg" width="150" height="100"  />
  <img class='js-lightBox' data-title='picture-title1-5-that so happiness time ' data-group='group-1'  src="images/5.jpg" width="150" height="100"  />
  <img class='js-lightBox' data-title='picture-title1-6-that so happiness time ' data-group='group-1'  src="images/6.jpg" width="150" height="100"  />
  <img class='js-lightBox' data-title='picture-title1-7-that so happiness time ' data-group='group-1'  src="images/7.jpg" width="150" height="100"  />
  <img class='js-lightBox' data-title='picture-title1-8-that so happiness time ' data-group='group-1'  src="images/8.jpg" width="150" height="100"  />
  <img class='js-lightBox' data-title='picture-title1-9-that so happiness time ' data-group='group-1'  src="images/9.jpg" width="150" height="100"  />
  <img class='js-lightBox' data-title='picture-title1-10-that so happiness time ' data-group='group-1'  src="images/10.jpg" width="150" height="100"  />
  <img class='js-lightBox' data-title='picture-title1-11-that so happiness time ' data-group='group-1'  src="images/11.jpg" width="150" height="100"  />
  <img class='js-lightBox' data-title='picture-title1-12-that so happiness time ' data-group='group-1'  src="images/12.jpg" width="150" height="100"  />
  <img class='js-lightBox' data-title='picture-title1-13-that so happiness time ' data-group='group-1'  src="images/13.jpg" width="150" height="100"  />
  <img class='js-lightBox' data-title='picture-title1-14-that so happiness time ' data-group='group-1'  src="images/14.jpg" width="150" height="100"  />
<br/>
<br/>
  <h4>等比例显示大图片</h4>
  <img class='js-lightBox' data-title='picture-title3-1' data-group='group-4' src="images/1-1.jpg" width="200" height="100"  />   
  <img class='js-lightBox' data-title='picture-title3-1' data-group='group-4' src="images/1-2.jpg" width="200" height="100"  />  
  <img class='js-lightBox' data-title='picture-title3-1' data-group='group-4' src="images/1-3.jpg" width="200" height="100"  />   
  <img class='js-lightBox' data-title='picture-title3-1' data-group='group-4' src="images/1-4.jpg" width="100" height="200"  />  
</div>
<script type="text/javascript">
jQuery(document).ready(function($) {
  $.LightBox({speed:500})
});
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 弹出层拖动 窗口 弹出 弹窗 弹出层 提示框 对话框 遮罩 遮罩层 弹窗插件 渐隐切换 淡出淡进 淡出 淡进 图片淡出淡进 图片淡出 图片淡进 lightbox

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到