最新赞助活动温馨提示:自愿赞助服务器费用,学生和没有工作的整站资源免费下载!
头像

jQuery响应式对话轮播插件

来源:http://www.erdangjiade.com/ 沐浴春风 2015-12-24 18:53浏览(1546)

刚开始看到的是一个轮播图片演示,当点击“查看全部”,可以看到所有的对话列表,你可以制作成说说或留言模板,还有瀑布流效果哦。

0、请不要问“在不在”之类的问题,有问题直接问!1、学生或暂时没有工作的童鞋,整站资源免费下载!2、¥9.9充值终身VIP会员,加我微信,826096331 拉你进VIP群学习!3、程序员加油,技术改变世界。在线 充值

jQuery响应式对话轮播插件
分类:图片代码 > 图片轮播 难易:高级
查看演示

加我微信,拉你进VIP群学习:

下载资源 下载积分: 30 积分

对话ul列表

<div class="cd-testimonials-wrapper cd-container"> 
    <ul class="cd-testimonials"> 
        <li> 
            <p> jQuery无限级导航菜单效果 </p> 
            <div class="cd-author"> 
                <img src="img/avatar-3.jpg" alt="jQuery无限级导航菜单效果" /> 
                <ul class="cd-author-info"> 
                    <li> 标题 </li> 
                    <li> <a href="http://www.erdangjiade.com/js/352.html" target="_blank"> jQuery无限级导航菜单效果 </a> </li> 
                </ul> 
            </div> 
        </li> 
        <li> 
            <p> jQuery紫色婚庆导航菜单 </p> 
            <div class="cd-author"> 
                <img src="img/avatar-2.jpg" alt="jQuery紫色婚庆导航菜单" /> 
                <ul class="cd-author-info"> 
                    <li> 标题 </li> 
                    <li> <a href="http://www.erdangjiade.com/js/353.html" target="_blank"> jQuery紫色婚庆导航菜单 </a> </li> 
                </ul> 
            </div> 
        </li> 
        <li> 
            <p> jQuery蓝色下拉导航菜单 </p> 
            <div class="cd-author"> 
                <img src="img/avatar-2.jpg" alt="jQuery蓝色下拉导航菜单" /> 
                <ul class="cd-author-info"> 
                    <li> 标题 </li> 
                    <li> <a href="http://www.erdangjiade.com/js/354.html" target="_blank"> jQuery蓝色下拉导航菜单 </a> </li> 
                </ul> 
            </div> 
        </li> 
        <li> <p> jQuery仿京东左侧分类导航 </p> 
            <div class="cd-author"> 
                <img src="img/avatar-1.jpg" alt="jQuery仿京东左侧分类导航" /> 
                <ul class="cd-author-info"> 
                    <li> 标题 </li> 
                    <li> <a href="http://www.erdangjiade.com/js/355.html" target="_blank"> jQuery仿京东左侧分类导航 </a> </li> 
                </ul> 
            </div> </li> 
    </ul> 
    <!-- cd-testimonials --> 
    <a href="#0" class="cd-see-all">查看全部</a> 
</div> 
<!-- cd-testimonials-wrapper --> 
<div class="cd-testimonials-all"> 
    <div class="cd-testimonials-all-wrapper"> 
        <ul> 
            <li class="cd-testimonials-item"> <p> 本文以实例演示了Thinkphp在静态缓存状态下中英文切换。国际化切换四点要求如下: </p> 
                <div class="cd-author"> 
                    <img src="img/avatar-4.jpg" alt="Thinkphp静态缓存多语言切换" /> 
                    <ul class="cd-author-info"> 
                        <li> 标题 </li> 
                        <li> <a href="http://www.erdangjiade.com/js/166.html" target="_blank"> Thinkphp静态缓存多语言切换 </a> </li> 
                    </ul> 
                </div> 
            </li> 
            <li class="cd-testimonials-item"> <p> ThinkPHP框架对URL有一定的规范,所以如果你希望定制你的URL格式的话,就需要好好了解下内置的路由功能了,它能让你的URL变得更简洁和有文化。 </p> 
                <div class="cd-author"> 
                    <img src="img/avatar-5.jpg" alt="Thinkphp路由配置和静态缓存规则" /> 
                    <ul class="cd-author-info"> 
                        <li> 标题 </li> 
                        <li> <a href="http://www.erdangjiade.com/js/167.html" target="_blank"> Thinkphp路由配置和静态缓存规则 </a> </li> 
                    </ul> 
                </div> 
            </li> 
        </ul> 
    </div> 
    <!-- cd-testimonials-all-wrapper --> 
    <a href="#0" class="close-btn">Close</a> 
</div>

main.js

jQuery(document).ready(function($) {
    //create the slider
    $('.cd-testimonials-wrapper').flexslider({
        selector: ".cd-testimonials > li",
        animation: "slide",
        controlNav: false,
        slideshow: false,
        smoothHeight: true,
        start: function() {
            $('.cd-testimonials').children('li').css({
                'opacity': 1,
                'position': 'relative'
            });
        }
    });

    //open the testimonials modal page
    $('.cd-see-all').on('click', function() {
        $('.cd-testimonials-all').addClass('is-visible');
    });

    //close the testimonials modal page
    $('.cd-testimonials-all .close-btn').on('click', function() {
        $('.cd-testimonials-all').removeClass('is-visible');
    });
    $(document).keyup(function(event) {
        //check if user has pressed 'Esc'
        if (event.which == '27') {
            $('.cd-testimonials-all').removeClass('is-visible');
        }
    });

    //build the grid for the testimonials modal page
    $('.cd-testimonials-all-wrapper').children('ul').masonry({
        itemSelector: '.cd-testimonials-item'
    });
});

对话成瀑布流

$('.cd-testimonials-all-wrapper').children('ul').masonry({
        itemSelector: '.cd-testimonials-item'
});
标签: 瀑布流对话
声明:本文为原创文章,如需转载,请注明来源erdangjiade.com并保留原文链接:https://www.erdangjiade.com/js/611.html
评论1
头像

友情提示:垃圾评论一律封号 加我微信:826096331拉你进VIP群学习群

  • 头像 沙发
    12-25 08:24
    ngu137
    特效不错哦 。。。。学习啦
1 2