一款很实用的jQuery鼠标悬浮有动画效果的响应式瀑布流插件

2016-11-17 12:35:30来源:cnblogs.com作者:285267128人点击

一款很实用的jQuery鼠标悬浮有动画效果的响应式瀑布流插件



 

在线预览

下载地址

实例代码

<!doctype html><html lang="zh">    <head>        <meta charset="UTF-8">        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">        <meta name="viewport" content="width=device-width, initial-scale=1.0">        <title>jQuery鼠标悬浮有动画效果的响应式瀑布流插件</title>        <link rel="stylesheet" type="text/css" href="/api/jq/5733e3532625a/css/normalize.css" />        <link rel="stylesheet" type="text/css" href="/api/jq/5733e3532625a/css/default.css">        <link rel="stylesheet" type="text/css" href="/api/jq/5733e3532625a/css/styles.css">        <article class="sucaihuo-container">            <div class="wall">                <div class="article">                    <a href='#'>                        <img src='/api/jq/5733e3532625a/img/4.jpg' alt='jQuery网页雪花插件' />                    </a>                    <h2>                        <a href='#' target='_blank'>                            jQuery网页雪花插件                        </a>                    </h2>                </div>                <div class="article">                    <a href='#'>                        <img src='/api/jq/5733e3532625a/img/4.jpg' alt='jQuery网页雪花插件' />                    </a>                    <h2>                        <a href='#' target='_blank'>                            jQuery仿京东登录弹出层                        </a>                    </h2>                </div>                <div class="article">                    <a href='#'>                        <img src='/api/jq/5733e3532625a/img/15.jpg' alt='jQuery菜单滑动' />                    </a>                    <h2>                        <a href='#' target='_blank'>                            jQuery菜单滑动                        </a>                    </h2>                </div>                <div class="article">                    <a href='#'>                        <img src='/api/jq/5733e3532625a/img/12.jpg' alt='jQuery圣诞照片墙放大效果' />                    </a>                    <h2>                        <a href='#' target='_blank'>                            jQuery圣诞照片墙放大效果                        </a>                    </h2>                </div>                <div class="article">                    <a href='#'>                        <img src='/api/jq/5733e3532625a/img/13.jpg' alt='PHP+jQuery年会在线拍照抽奖' />                    </a>                    <h2>                        <a href='#' target='_blank'>                            PHP+jQuery年会在线拍照抽奖                        </a>                    </h2>                </div>                <div class="article">                    <a href='#'>                        <img src='/api/jq/5733e3532625a/img/3.jpg' alt='PHP强大的中文水印类' />                    </a>                    <h2>                        <a href='#' target='_blank'>                            PHP强大的中文水印类                        </a>                    </h2>                </div>                <div class="article">                    <a href='#'>                        <img src='/api/jq/5733e3532625a/img/15.jpg' alt='PHP自定义图片水印类并且支持中文' />                    </a>                    <h2>                        <a href='#' target='_blank'>                            PHP自定义图片水印类并且支持中文                        </a>                    </h2>                </div>                <div class="article">                    <a href='#'>                        <img src='/api/jq/5733e3532625a/img/10.jpg' alt='PHP以星号隐藏用户名手机和邮箱' />                    </a>                    <h2>                        <a href='#' target='_blank'>                            PHP以星号隐藏用户名手机和邮箱                        </a>                    </h2>                </div>                <div class="article">                    <a href='#'>                        <img src='/api/jq/5733e3532625a/img/10.jpg' alt='js网页标题消息提醒' />                    </a>                    <h2>                        <a href='#' target='_blank'>                            js网页标题消息提醒                        </a>                    </h2>                </div>                <div class="article">                    <a href='#'>                        <img src='/api/jq/5733e3532625a/img/1.jpg' alt='PHP检测中文验证码实例演示' />                    </a>                    <h2>                        <a href='#' target='_blank'>                            PHP检测中文验证码实例演示                        </a>                    </h2>                </div>                <div class="article">                    <a href='#'>                        <img src='/api/jq/5733e3532625a/img/14.jpg' alt='jQuery仿京东检测验密码强度' />                    </a>                    <h2>                        <a href='#' target='_blank'>                            jQuery仿京东检测验密码强度                        </a>                    </h2>                </div>                <div class="article">                    <a href='#'>                        <img src='/api/jq/5733e3532625a/img/15.jpg' alt='jQuery放烟花插件' />                    </a>                    <h2>                        <a href='#' target='_blank'>                            jQuery放烟花插件                        </a>                    </h2>                </div>                <div class="article">                    <a href='#'>                        <img src='/api/jq/5733e3532625a/img/15.jpg' alt='html5响应式触屏移动端音频播放器' />                    </a>                    <h2>                        <a href='#' target='_blank'>                            html5响应式触屏移动端音频播放器                        </a>                    </h2>                </div>                <div class="article">                    <a href='#'>                        <img src='/api/jq/5733e3532625a/img/7.jpg' alt='jquery背景移动插件' />                    </a>                    <h2>                        <a href='#' target='_blank'>                            jquery背景移动插件                        </a>                    </h2>                </div>                <div class="article">                    <a href='#'>                        <img src='/api/jq/5733e3532625a/img/9.jpg' alt='jQuery自定义下拉框插件' />                    </a>                    <h2>                        <a href='#' target='_blank'>                            jQuery自定义下拉框插件                        </a>                    </h2>                </div>                <div class="article">                    <a href='#'>                        <img src='/api/jq/5733e3532625a/img/2.jpg' alt='jQuery懒加载图片的瀑布流插件' />                    </a>                    <h2>                        <a href='#' target='_blank'>                            jQuery懒加载图片的瀑布流插件                        </a>                    </h2>                </div>                <div class="article">                    <a href='#'>                        <img src='/api/jq/5733e3532625a/img/10.jpg' alt='Thinkphp带表情的无限评论回复' />                    </a>                    <h2>                        <a href='#' target='_blank'>                            Thinkphp带表情的无限评论回复                        </a>                    </h2>                </div>                <div class="article">                    <a href='#'>                        <img src='/api/jq/5733e3532625a/img/2.jpg' alt='jQuery10种不同的水球效果' />                    </a>                    <h2>                        <a href='#' target='_blank'>                            jQuery10种不同的水球效果                        </a>                    </h2>                </div>                <div class="article">                    <a href='#'>                        <img src='/api/jq/5733e3532625a/img/11.jpg' alt='jQuery自动输入email、时间和域名' />                    </a>                    <h2>                        <a href='#' target='_blank'>                            jQuery自动输入email、时间和域名                        </a>                    </h2>                </div>            </div>        </article>        <script src="http://libs.useso.com/js/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>        <script>window.jQuery || document.write('<script src="/api/jq/5733e3532625a/js/jquery-2.1.1.min.js"><//script>')</script>        <script type="text/javascript" src="/api/jq/5733e3532625a/js/jaliswall.js"></script>        <script type="text/javascript">        $(function() {            $('.wall').jaliswall({item: '.article'});        });        </script>    </body></html>

  

 

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台