使用jQuery仿苹果官网焦点图特效


Posted in Javascript onDecember 23, 2014

这次我们要分享的这款jQuery焦点图非常特别,它的外观特别简单,但是又相当大气。焦点图的整体样式是仿苹果样式的,由于jQuery的运用,我们只要点击图片下方的缩略图即可达到图片切换的焦点图特效,这款jQuery焦点图插件非常适合在产片展示的网页上使用。

使用jQuery仿苹果官网焦点图特效

接下来我们一起分享一下实现这款苹果焦点图的过程及源码。

HTML代码:

<div id="gallery">

    <div id="slides" style="width: 3680px; margin-left: 0px;">

    <div class="slide"><img width="920" height="400" alt="side" src="img/sample_slides/macbook.jpg"></div>

    <div class="slide"><img width="920" height="400" alt="side" src="img/sample_slides/iphone.jpg"></div>

    <div class="slide"><img width="920" height="400" alt="side" src="img/sample_slides/imac.jpg"></div>

    <div class="slide"><a target="_blank" href="http://tutorialzine.com/2009/10/beautiful-apple-gallery-slideshow/"><img width="920" height="400" alt="side" src="img/sample_slides/info.jpg"></a></div>

    </div>

    <div id="menu">

    <ul>

        <li class="fbar inact"> </li><li class="menuItem inact act"><a href=""><img alt="thumbnail" src="img/sample_slides/thumb_macbook.png"></a></li><li class="menuItem inact"><a href=""><img alt="thumbnail" src="img/sample_slides/thumb_iphone.png"></a></li><li class="menuItem inact"><a href=""><img alt="thumbnail" src="img/sample_slides/thumb_imac.png"></a></li><li class="menuItem inact"><a href=""><img alt="thumbnail" src="img/sample_slides/thumb_about.png"></a></li>

    </ul>

    </div>

  </div>

从以上HTML代码可以看出,整个焦点图由一些div构成图片容器,用ul li列表构成下面的缩略图。

CSS代码:

#gallery{

    /* CSS3 Box Shadow */

    -moz-box-shadow:0 0 3px #AAAAAA;

    -webkit-box-shadow:0 0 3px #AAAAAA;

    box-shadow:0 0 3px #AAAAAA;

    /* CSS3 Rounded Corners */

    -moz-border-radius-bottomleft:4px;

    -webkit-border-bottom-left-radius:4px;

    border-bottom-left-radius:4px;

    -moz-border-radius-bottomright:4px;

    -webkit-border-bottom-right-radius:4px;

    border-bottom-right-radius:4px;

    border:1px solid white;

    background:url(img/panel.jpg) repeat-x bottom center #ffffff;

    /* The width of the gallery */

    width:920px;

    overflow:hidden;

}

#slides{

    /* This is the slide area */

    height:400px;

    /* jQuery changes the width later on to the sum of the widths of all the slides. */

    width:920px;

    overflow:hidden;

}

.slide{

    float:left;

}

#menu{

    /* This is the container for the thumbnails */

    height:45px;

}

ul{

    margin:0px;

    padding:0px;

}

li{

    /* Every thumbnail is a li element */

    width:60px;

    display:inline-block;

    list-style:none;

    height:45px;

    overflow:hidden;

}

li.inact:hover{

    /* The inactive state, highlighted on mouse over */

    background:url(img/pic_bg.png) repeat;

}

li.act,li.act:hover{

    /* The active state of the thumb */

    background:url(img/active_bg.png) no-repeat;

}

li.act a{

    cursor:default;

}

.fbar{

    /* The left-most vertical bar, next to the first thumbnail */

    width:2px;

    background:url(img/divider.png) no-repeat right;

}

li a{

    display:block;

    background:url(img/divider.png) no-repeat right;

    height:35px;

    padding-top:10px;

}

a img{

    border:none;

}

CSS代码也非常简单,都是一些简单设置而已。

jQuery代码:

$(document).ready(function(){

    /* This code is executed after the DOM has been completely loaded */

    var totWidth=0;

    var positions = new Array();

    $('#slides .slide').each(function(i){

        /* Traverse through all the slides and store their accumulative widths in totWidth */

        positions[i]= totWidth;

        totWidth += $(this).width();

        /* The positions array contains each slide's commulutative offset from the left part of the container */

        if(!$(this).width())

        {

            alert("Please, fill in width & height for all your images!");

            return false;

        }

    });

    $('#slides').width(totWidth);

    /* Change the cotnainer div's width to the exact width of all the slides combined */

    $('#menu ul li a').click(function(e,keepScroll){

            /* On a thumbnail click */

            $('li.menuItem').removeClass('act').addClass('inact');

            $(this).parent().addClass('act');

            var pos = $(this).parent().prevAll('.menuItem').length;

            $('#slides').stop().animate({marginLeft:-positions[pos]+'px'},450);

            /* Start the sliding animation */

            e.preventDefault();

            /* Prevent the default action of the link */

            // Stopping the auto-advance if an icon has been clicked:

            if(!keepScroll) clearInterval(itvl);

    });

    $('#menu ul li.menuItem:first').addClass('act').siblings().addClass('inact');

    /* On page load, mark the first thumbnail as active */

    /*****

     *

     *    Enabling auto-advance.

     *

     ****/

    var current=1;

    function autoAdvance()

    {

        if(current==-1) return false;

        $('#menu ul li a').eq(current%$('#menu ul li a').length).trigger('click',[true]);    // [true] will be passed as the keepScroll parameter of the click function on line 28

        current++;

    }

    // The number of seconds that the slider will auto-advance in:

    var changeEvery = 10;

    var itvl = setInterval(function(){autoAdvance()},changeEvery*1000);

    /* End of customizations */

});

这是焦点图的重点,完成了图片滑块的动画逻辑,点击缩略图即可切换图片。

Javascript 相关文章推荐
jQuery插件Slider Revolution实现响应动画滑动图片切换效果
Jun 05 Javascript
jQuery实现的图片轮播效果完整示例
Sep 12 Javascript
详解jQuery uploadify文件上传插件的使用方法
Dec 16 Javascript
常用的javascript设计模式
Jan 11 Javascript
100行代码理解和分析vue2.0响应式架构
Mar 09 Javascript
使用vue框架 Ajax获取数据列表并用BootStrap显示出来
Apr 24 Javascript
JQuery 封装 Ajax 常用方法(推荐)
May 21 jQuery
vue axios 二次封装的示例代码
Dec 08 Javascript
简单介绍react redux的中间件的使用
Apr 06 Javascript
基于vue-cli npm run build之后vendor.js文件过大的解决方法
Sep 27 Javascript
微信小程序如何访问公众号文章
Jul 08 Javascript
JavaScript实现文件下载并重命名代码实例
Dec 12 Javascript
jQuery分组选择器用法实例
Dec 23 #Javascript
常用的JS验证和函数汇总
Dec 23 #Javascript
jQuery后代选择器用法实例
Dec 23 #Javascript
浅析Javascript中“==”与“===”的区别
Dec 23 #Javascript
javascript实现微信分享
Dec 23 #Javascript
JSON取值前判断
Dec 23 #Javascript
jQuery基础语法实例入门
Dec 23 #Javascript
You might like
PHP HTML JavaScript MySQL代码如何互相传值的方法分享
2012/09/30 PHP
phpphp图片采集后按原路径保存图片示例
2014/02/18 PHP
PHP strtotime函数用法、实现原理和源码分析
2015/02/04 PHP
Symfony2安装的方法(2种方法)
2016/02/04 PHP
php 获取xml接口数据的处理方法
2018/05/31 PHP
[对联广告] JS脚本类
2006/08/27 Javascript
基于jQuery的弹出消息插件 DivAlert之旅(一)
2010/04/01 Javascript
jQuery探测位置的提示弹窗(toolTip box)详细解析
2013/11/14 Javascript
AngularJS基础知识
2014/12/21 Javascript
JavaScript中检查对象property的存在性方法介绍
2014/12/30 Javascript
对Web开发中前端框架与前端类库的一些思考
2015/03/27 Javascript
浅谈jquery事件处理
2015/04/24 Javascript
jQuery选择器及jquery案例详解(必看)
2016/05/20 Javascript
常用Javascript函数与原型功能收藏(必看篇)
2016/10/09 Javascript
原生js实现键盘控制div移动且解决停顿问题
2016/12/05 Javascript
EasyUI学习之Combobox下拉列表(1)
2016/12/29 Javascript
jQuery插件开发发送短信倒计时功能代码
2017/05/09 jQuery
Vue2单一事件管理组件通信
2017/05/09 Javascript
详解Vue.js基于$.ajax获取数据并与组件的data绑定
2017/05/26 Javascript
基于js中style.width与offsetWidth的区别(详解)
2017/11/12 Javascript
详解IWinter 一个路由转控制器的 Nodejs 库
2017/11/15 NodeJs
vue 1.0 结合animate.css定义动画效果
2018/07/11 Javascript
中级前端工程师必须要掌握的27个JavaScript 技巧(干货总结)
2019/09/23 Javascript
浅谈vue异步数据影响页面渲染
2019/10/29 Javascript
谈谈JavaScript中的函数
2020/09/08 Javascript
[01:01:14]完美世界DOTA2联赛PWL S2 SZ vs Rebirth 第一场 11.21
2020/11/23 DOTA
python高并发异步服务器核心库forkcore使用方法
2013/11/26 Python
Python实现截屏的函数
2015/07/25 Python
pytorch构建网络模型的4种方法
2018/04/13 Python
Python实现的爬取百度贴吧图片功能完整示例
2019/05/10 Python
Python 批量读取文件中指定字符的实现
2020/03/06 Python
数学国培研修感言
2014/02/13 职场文书
2014年“四风”问题个人整改措施
2014/09/17 职场文书
个人房屋转让协议书范本
2014/10/26 职场文书
校友会致辞
2015/07/30 职场文书
导游词之上海东方明珠塔
2019/09/25 职场文书