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

jQuery响应式对话轮播插件

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

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

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

jQuery响应式对话轮播插件
分类:图片代码 > 图片轮播 难易:高级
查看演示 下载资源 下载积分: 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