jQuery图片特效插件——mosaic

作者:人气:来源:2015-03-23

广告载入中...

在前端开发中,经常要碰到图片、文字的一些排版或特效处理来突显效果。常用的当然是图片PS或者FLASH动画效果来凸显,但随着浏览器的发展,JS处理都越来越强,很多效果都可以直接使用JS或者jQuery来实现很多让你意想不到又很实用的效果!

今天为大家推荐一款简单实用的图片特效jQuery插件——mosaic

这款插件很多网站都有推荐,但你在前端开发中是否有用过呢??使用得当能很好的提升你网站的用户体验!

效果截图:

项目首页:http://www.buildinternet.com/project/mosaic/

点击查看示例

完整示例代码

<!DOCTYPE html>

<html lang="zh-cn">
<head>

    <title>Mosaic - Sliding Boxes and Captions jQuery Plugin</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" href="css/mosaic.css" type="text/css" media="screen" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="js/mosaic.1.0.1.js"></script>
    <script type="text/javascript">

        jQuery(function ($) {
            $('.bar').mosaic({
                animation: 'slide'
            });
        });

		</script>
    <style type="text/css">
        /*Demo Styles*/
        body { background: #e9e8e4 url('img/bg-grid.png');; }
        .mosaic-block { left: 50%; top: 50%; margin-left: -200px; margin-top: -125px; position: absolute; }
        .clearfix { display: block; height: 0; clear: both; visibility: hidden; }

        .details { margin: 15px 20px; }
        h4 { font: 300 16px 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 160%; letter-spacing: 0.15em; color: #fff; text-shadow: 1px 1px 0 rgb(0,0,0); }
        p { font: 300 12px 'Lucida Grande', Tahoma, Verdana, sans-serif; color: #aaa; text-shadow: 1px 1px 0 rgb(0,0,0); }
        a { text-decoration: none; }
    </style>

</head>

<body>

    <div id="content">

        <!--Bar-->
        <div class="mosaic-block bar">
            <a href="http://buildinternet.com/project/mosaic" target="_blank" class="mosaic-overlay">
                <div class="details">
                    <h4>WEB前端资源网——专业的前端资源站点!</h4>
                    <p>by:www.58img.com</p>
                </div>
            </a>
            <div class="mosaic-backdrop">
                <img src="img/mosaic.jpg" /></div>
        </div>
        <div class="clearfix"></div>
    </div>

</body>
</html>

继续阅读:页面特效

分享吧:

手机移动