使用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 自动增长的文本输入框实现代码
Apr 02 Javascript
js中有关IE版本检测
Jan 04 Javascript
js 浏览本地文件夹系统示例代码
Oct 24 Javascript
获得Javascript对象属性个数的示例代码
Nov 21 Javascript
javascript实现图片上传前台页面
Aug 18 Javascript
瀑布流的实现方式(原生js+jquery+css3)
Jun 28 Javascript
浅谈vue,angular,react数据双向绑定原理分析
Nov 28 Javascript
vue 修改 data 数据问题并实时显示的方法
Aug 27 Javascript
详解nuxt路由鉴权(express模板)
Nov 21 Javascript
vue搜索和vue模糊搜索代码实例
May 07 Javascript
js和jquery判断数据类型的4种方法总结
Aug 28 jQuery
JavaScript中如何调用Java方法
Sep 16 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
东方红 - 来复式再生机的修复
2021/03/02 无线电
法国:浪漫之都的咖啡文化
2021/03/03 咖啡文化
PHP file_get_contents 函数超时的几种解决方法
2009/07/30 PHP
php中利用post传递字符串重定向的实现代码
2011/04/21 PHP
javascript 面向对象编程  function是方法(函数)
2009/09/17 Javascript
JQuery 获得绝对,相对位置的坐标方法
2010/02/09 Javascript
一些实用的jQuery代码片段收集
2011/07/12 Javascript
JavaScript改变HTML元素的样式改变CSS及元素属性
2013/11/12 Javascript
jQuery hover事件简单实现同时绑定2个方法
2016/06/07 Javascript
AngularJS基础 ng-selected 指令简单示例
2016/08/03 Javascript
JS for...in 遍历语句用法实例分析
2016/08/24 Javascript
bootstrap-datetimepicker实现只显示到日期的方法
2016/11/25 Javascript
JS检测数组类型的方法小结
2017/03/14 Javascript
JS动态修改网页body的背景色实例代码
2017/10/07 Javascript
关于Google发布的JavaScript代码规范你要知道哪些
2018/04/04 Javascript
JavaScript实现身份证验证代码实例
2019/08/26 Javascript
javascript严格模式详解(含严格模式与非严格模式的区别)
2019/11/12 Javascript
jquery实现垂直手风琴菜单
2020/03/04 jQuery
[02:54]DOTA2英雄基础教程 撼地者
2014/01/14 DOTA
使用PDB模式调试Python程序介绍
2015/04/05 Python
python 实现调用子文件下的模块方法
2018/12/07 Python
使用Python 正则匹配两个特定字符之间的字符方法
2018/12/24 Python
Pytorch之保存读取模型实例
2019/12/30 Python
Python爬虫爬取杭州24时温度并展示操作示例
2020/03/27 Python
Python Tornado之跨域请求与Options请求方式
2020/03/28 Python
Linux安装Python3如何和系统自带的Python2并存
2020/07/23 Python
css3实现input输入框颜色渐变发光效果代码
2014/04/02 HTML / CSS
基于canvas的骨骼动画的示例代码
2018/06/12 HTML / CSS
美国名牌太阳镜折扣网站:Eyedictive
2017/05/15 全球购物
2015年元旦活动总结
2014/05/09 职场文书
大学生应聘求职信
2014/05/26 职场文书
机械专业技术员求职信
2014/06/14 职场文书
电影小兵张嘎观后感
2015/06/03 职场文书
Python内置数据结构列表与元组示例详解
2021/08/04 Python
Apache Linkis 中间件架构及快速安装步骤
2022/03/16 Servers
win10系统xps文件怎么打开?win10打开xps文件的两种操作方法
2022/07/23 数码科技