首页的全屏灯箱效果是怎么写出来的

html-css020

首页的全屏灯箱效果是怎么写出来的,第1张

不要看到华丽效果就以为html5 css3（在我看来这个效果也不华丽）。html4+css2用好了足以颠覆你对html的认识。你看到的这个是一个居中的div（A），它用了一张图片做背景居中div的父元素（B）是100%宽的，它的背景是一张平铺的图片。B的背景色和A的背景图片边缘颜色一致，看上去是一张图片。图片切换的淡入淡出，动态改变透明度罢了，jQuery的fadeIn fadeOut即可实现。

ColorBox是一个基于jQuery 1.3 的轻量级，自定义灯箱插件，功能非常强大，支持图片，图片组，ajax，inline和iframed内容，灯箱样式完全由用户控制，可自定义CSS样 式，不需要改写ColorBox库文件就能重写展示效果设置，支持加载预处理提示等等，效果图如下：

使用说明

1，jQuery 1.3库文件

2，colorbox 库文件

3，灯箱效果CSS样式文件

使用实例如下：

一，使用ColorBox灯箱显示一张图片和图片组

(1)js部分

$.fn.colorbox.settings.transition = "fade"

$.fn.colorbox.settings.bgOpacity = "0.9"

$.fn.colorbox.settings.contentCurrent = "image {current} of {total}"

$(".cpModal").colorbox()

transition设置ColorBox灯箱的过渡效果，如上：fade

bgOpacity设置ColorBox灯箱的背景透明度，如上：0.9

contentCurrent设置ColorBox灯箱的当前图片，如上：image {current} of {total}

(2)HTML部分

<p><a class="cpModal" href="marylou.jpg" >单张图片</a></p>

<p><a class="cpModal" href="biuuu1.jpg" >图片组1</a></p>

<p><a class="cpModal" href="biuuu2.jpg" >图片组2</a></p>

<p><a class="cpModal" href="biuuu3.jpg" >图片组3</a></p>

二，使用ColorBox灯箱显示ajax加载HTML页面

(1)js部分

$("#ajax").colorbox({contentWidth:"300px", contentHeight:"195px"})

contentWidth设置ColorBox灯箱的内容宽度，如上：300px

contentHeight设置ColorBox灯箱的内容高度，如上：195px

(2)HTML部分

<p><a id="ajax" href="ajax.html">Ajax HTML</a></p>

ajax.html表示加载的html页面，

三，使用ColorBox灯箱显示flash页面效果

(1)js部分

$("#flash").colorbox({contentAjax:"flash.html"})

(2)HTML部分

<p><a id="flash" href="http://www.youtube.com/watch?v=lBvaHZIrt0">Flash / Video</a></p>

四，使用ColorBox灯箱显示Inline HTML效果

(1)js部分

$("#inline").colorbox({contentWidth:"500px", contentInline:"#inline-content"})

contentInline设置ColorBox灯箱的inline内容

(2)HTML部分

<p><a id="inline" href="#">Inline HTML</a></p>

<div style="display:none">

<div id="inline-content">

<div style="padding:10px">

<p>必优博客</p>

<p>www.biuuu.com</p>

</div>

</div>

</div>

五，使用ColorBox灯箱显示Iframed框架内容效果

(1)js部分

$("#google").colorbox({contentWidth:"750px", contentHeight:"450px", contentIframe:true})

contentIframe设置ColorBox灯箱的内容是否为框架

(2)HTML部分

<p><a id="google" href="http://www.google.com">Iframed内容</a></p>

ColorBox灯箱配置如下：

transition 'elastic' 表示灯箱过渡效果，可选"elastic" or "fade"

transitionSpeed350 表示灯箱过渡效果展示的速度

initialWidth300 表示灯箱初始化宽度

initialHeight100 表示灯箱初始化高度

contentWidthfalse 表示是否设置一个固定的宽度

contentHeightfalse 表示是否设置一个固定的高度

contentAjaxfalse 表示是否是一个ajax加载

contentInlinefalse 表示是否是一个inline

contentIframefalse 表示是否是一个iframe

bgOpacity 0.85 表示灯箱的背景透明度

preloadingtrue 表示是否预加载

contentCurrent'{current} of {total}' 表示灯箱展示的当前图片和总数

contentPrevious'previous' 表示上一个锚，类似于rel属性

contentNext'next'表示下一个锚，类似于rel属性

modalClose'close' 锚文本关闭链接，可选Esc或close

jQuery插件ColorBox彩盒使用非常简单，可实现功能非常多，如弹出新窗口，弹出图片，弹出框架等等，值得推荐。

软件主页： http://colorpowered.com/colorbox/

下载地址： http://colorpowered.com/colorbox/colorbox.zip

可以监听滚轮事件 mousewheel 判断是点击的图片是否显示，显示的话 先屏蔽滚动事件 然后获取到你显示出来的容器 改变一下img的css的 transform ：scale属性，也可以判断下滚动方向进行放大和缩小 如果没有显示 就不采取任何处理