站长资源
全栈工程师站点

js百叶窗效果插件-blindify

js百叶窗效果插件-blindify

使用

首先,你必须包括blindify的CSS文件(或只是代码复制并粘贴到你自己的页面),包括一个版本的jQuery库和完全或简化版的blindify。比如:

<link rel="stylesheet" href="blindify.css" media="all" />
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="jquery.blindify.js"></script>

之后,你需要一个图像列表,包在一个独特的ID。容器单元例:

<div id="blindify">
    <ul>
        <li><img src="photo_1.jpg" alt="" /></li>
        <li><img src="photo_2.jpg" alt="" /></li>
        <li><img src="photo_3.jpg" alt="" /></li>
        <li><img src="photo_4.jpg" alt="" /></li>
    </ul>
</div>

你可以让整个幻灯片是一个链接到一个特定的页面,通过使用一个锚点元素的容器,例如:

<a href="#" id="blindify">
    <ul>
        <li><img src="photo_1.jpg" alt="" /></li>
        <li><img src="photo_2.jpg" alt="" /></li>
        <li><img src="photo_3.jpg" alt="" /></li>
        <li><img src="photo_4.jpg" alt="" /></li>
    </ul>
</a>

如果你希望每个图像指向一个唯一的URL,你只需要指定一个选项在初始化插件,和格式化你的代码如下:

<div id="blindify">
    <ul>
        <li><a href="#"><img src="photo_1.jpg" alt="" /></a></li>
        <li><a href="#"><img src="photo_2.jpg" alt="" /></a></li>
        <li><a href="#"><img src="photo_3.jpg" alt="" /></a></li>
        <li><a href="#"><img src="photo_4.jpg" alt="" /></a></li>
    </ul>
</div>

最后,应用blindify到您的HTML代码,你只需要初始化它并将它附加到元素作为容器,例如:

<script type="text/javascript">
    $(document).ready(function(){
        $('#blindify').blindify();
    });
</script>

您可以重写插件的默认选项,这样:

<script type="text/javascript">
    $(document).ready(function(){
        $('#blindify').blindify({
            numberOfBlinds: 10,
            animationSpeed: 600,
            delayBetweenSlides: 200
        });
    });
</script>


免费下载  在线演示  
×

站长资源极速下载通道: js百叶窗效果插件-blindify

本文出处:来自互联网信息共享,请勿相信收费信息站长资源 » js百叶窗效果插件-blindify

评论 抢沙发

评论前必须登录!