使用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 相关文章推荐
关于javascript function对象那些迷惑分析
Oct 24 Javascript
js将当前时间格式转换成时间搓(自写)
Sep 26 Javascript
浅谈移动端之js touch事件 手势滑动事件
Nov 07 Javascript
Bootstrap popover用法详解
Dec 22 Javascript
AngularJS中run方法的巧妙运用
Jan 04 Javascript
JavaScript自定义分页样式
Jan 17 Javascript
js实现城市级联菜单的2种方法
Jun 23 Javascript
js断点调试心得分享(必看篇)
Dec 08 Javascript
Angular5给组件本身的标签添加样式class的方法
Apr 07 Javascript
ant-design-vue 快速避坑指南(推荐)
Jan 21 Javascript
JavaScript实现打砖块游戏
Feb 25 Javascript
vuex Module将 store 分割成模块的操作
Dec 07 Vue.js
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实现快钱支付功能(涉及到接口)
2013/07/01 PHP
浅谈Coreseek、Sphinx-for-chinaese、Sphinx+Scws的区别
2016/12/15 PHP
PHP中使用CURL发送get/post请求上传图片批处理功能
2018/10/15 PHP
使用PHP开发留言板功能
2019/11/19 PHP
javascript实现的listview效果
2007/04/28 Javascript
解析jquery获取父窗口的元素
2013/06/26 Javascript
JS之Date对象和获取系统当前时间详解
2014/01/13 Javascript
angularjs中的e2e测试实例
2014/12/06 Javascript
详解AngularJS中的表格使用
2015/06/16 Javascript
iPhone手机上搭建nodejs服务器步骤方法
2015/07/06 NodeJs
jQuery验证插件validate使用方法详解
2020/09/13 Javascript
jQuery实现点击弹出背景变暗遮罩效果实例代码
2016/06/24 Javascript
Kendo Grid editing 自定义验证报错提示的解决方法
2016/11/18 Javascript
Vue.JS入门教程之自定义指令
2016/12/08 Javascript
Angular2学习教程之ng中变更检测问题详解
2017/05/28 Javascript
JS实现批量上传文件并显示进度功能
2017/06/27 Javascript
JavaScript 中的 this 简单规则
2017/09/19 Javascript
JavaScript实现QQ列表展开收缩扩展功能
2017/10/30 Javascript
JavaScript数组排序reverse()和sort()方法详解
2017/12/24 Javascript
nodejs 如何手动实现服务器
2018/08/20 NodeJs
vue 界面刷新数据被清除 localStorage的使用详解
2018/09/16 Javascript
Vue+ElementUI 中级联选择器Bug问题的解决
2020/07/31 Javascript
Vue实现导航栏菜单
2020/08/19 Javascript
[02:40]2018年度DOTA2最佳新人-完美盛典
2018/12/16 DOTA
Python搭建代理IP池实现存储IP的方法
2019/10/27 Python
使用Pyhton集合set()实现成果查漏的例子
2019/11/24 Python
pygame实现弹球游戏
2020/04/14 Python
python导入库的具体方法
2020/06/18 Python
CSS3网格的三个新特性详解
2014/04/04 HTML / CSS
Omio波兰:全欧洲低价大巴、火车和航班搜索和比价
2018/02/16 全球购物
美国时尚假发购物网站:Wigsbuy
2019/04/06 全球购物
阿里巴巴英国:Alibaba英国
2019/12/11 全球购物
班组长安全生产职责
2013/12/16 职场文书
电脑销售顾问自荐信
2014/01/29 职场文书
2014年社团工作总结范文
2014/11/27 职场文书
同意离婚答辩状
2015/05/22 职场文书