苹果官网的产品展示效果

这是帮一个群里的朋友写的，基于JQuery的。可以先去http://www.apple.com.cn/mac/看下具体效果，记得用chrome看，它这个貌似是用CSS3做的，IE下就是简单的作透明切换的。

JS：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
(function($){
    $.fn.appleShow = function(opts){
        var set = $.extend({
            itemsClass:'',
            conctrolClass:'',
            arrowClass:'',
            auto:false,
            timer:3000,
            type:'click'
        },opts||{});
        var $t = $(this),$items = $('.'+set.itemsClass,$t),width = $items[0].offsetWidth,$conctrolbox = $('.'+set.conctrolClass,$t);
        var $conctrols = $conctrolbox.find('a'),$arrow = $conctrolbox.find('.'+set.arrowClass),len=$conctrols.length;
        var current = 0,timer = null,isSliding = false,P = [],m=0;
 
        $items.each(function(i){
            var $lis = $(this).find('li'),pos=[];
            $lis.each(function(i){
                pos[i] = this.offsetLeft;
            });
            P[i] = pos;
            $lis.each(function(i){
                $(this).css({'position':'absolute','top':0,'left':pos[i]});
            });
 
        });
 
        $items.hide().eq(current).show();
 
        $arrow.stop(true).animate({'left':$conctrols.eq(current).position().left+$conctrols.eq(current).outerWidth(true)/2});
         
        set.auto && auto();
 
        function auto(){
            timer = setInterval(function(){
                m = (current+1)%len;
                $conctrols.eq(m).trigger(set.type);
            },set.timer);
        };
 
        function go(items,dir,callback){
            var d = {'left':'-=','right':'+='}[dir],l = items.length,n=1;
            items.each(function(i){
                var t = $(this);
                setTimeout(function(){
                    t.animate({'left':d+width},'normal','easeOutElastic',function(){
                        if(l === n++){
                            callback && callback();
                        }
                    });
                },i*100);
            });
        };
 
        function goLeft(items,callback){
            go(items,'left',callback);
        };
        function goRight(items,callback){
            var r = [];
            items.each(function(){r.push(this)});
            r = $('').pushStack(r.reverse());
            go(r,'right',callback);
        };
 
        function setPos(items,dir){
            items.css('left',function(i,v){ v = parseInt(v,10);return dir === 'left' ? (v-width) : (v+width)});
        }
 
        $conctrols.each(function(i){
            $(this)[set.type](function(event){
                event.preventDefault();
                if(isSliding || i === current) return;
                if(timer) clearInterval(timer);
                isSliding = true;
                var go,dir;
                var pos = $(this).position(),w = this.offsetWidth;
                var C = $items.eq(current),N = $items.eq(i);
                i > current ? (go = goLeft,dir = 'right') : (go = goRight,dir = 'left');
                $arrow.stop(true).animate({'left':pos.left+w/2});
                $conctrols.removeClass('show').eq(i).addClass('show');
                go(C.find('li'),function(){
                    C.hide().find('li').each(function(i){ $(this).css('left',P[current][i]);});
                    setPos(N.find('li'),dir);
                    go(N.show().find('li'),function(){
                        current = i;
                        isSliding = false;
                        set.auto && auto();
                    });
                })
                 
            });
        });
 
    };
 
    $.extend($.easing,{
        easeOutElastic: function (x, t, b, c, d) {
            var s=1.70158;var p=0;var a=c;
            if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
            if (a < Math.abs(c)) { a=c; var s=p/4; }
            else var s = p/(2*Math.PI) * Math.asin (c/a);
            return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
        }
    })
})(jQuery);

HTML：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link href="style/zns_style.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div id="div1" class="page">
    <div class="zns_box">
            <ul class="zns_box_head">
                <li><a href=""><img src="img/1.jpg" alt=""/>iPod shuffle</a></li>
                <li><a href=""><img src="img/2.jpg" alt=""/>iPod nano</a></li>
                <li><a href=""><img src="img/3.jpg" alt=""/>iPod classic</a></li>
                <li><a href=""><img src="img/4.jpg" alt=""/>iPod touch</a></li>
                <li><a href=""><img src="img/5.jpg" alt=""/>Apple TV</a></li>
                <li><a href=""><img src="img/6.jpg" alt=""/>Accessories</a></li>
            </ul>
            <ul class="zns_box_head">
                <li><a href=""><img src="img/7.jpg" alt=""/>Download iTunes 10</a></li>
                <li><a href=""><img src="img/8.jpg" alt=""/>iTunes Gift Cards</a></li>
                <li><a href=""><img src="img/9.jpg" alt=""/>Nike + iPod</a></li>
                <li><a href=""><img src="img/10.jpg" alt=""/>(PRODUCT) RED</a></li>
                <li><a href=""><img src="img/11.jpg" alt=""/>MobileMe</a></li>
                <li><a href=""><img src="img/12.jpg" alt=""/>In-Ear Headphones</a></li>
            </ul>
            <ul class="zns_box_head">
                <li><a href=""><img src="img/1.jpg" alt=""/>iPod shuffle</a></li>
                <li><a href=""><img src="img/2.jpg" alt=""/>iPod nano</a></li>
                <li><a href=""><img src="img/3.jpg" alt=""/>iPod classic</a></li>
                <li><a href=""><img src="img/4.jpg" alt=""/>iPod touch</a></li>
                <li><a href=""><img src="img/5.jpg" alt=""/>Apple TV</a></li>
                <li><a href=""><img src="img/6.jpg" alt=""/>Accessories</a></li>
            </ul>
            <ul class="zns_box_head">
                <li><a href=""><img src="img/7.jpg" alt=""/>Download iTunes 10</a></li>
                <li><a href=""><img src="img/8.jpg" alt=""/>iTunes Gift Cards</a></li>
                <li><a href=""><img src="img/9.jpg" alt=""/>Nike + iPod</a></li>
                <li><a href=""><img src="img/10.jpg" alt=""/>(PRODUCT) RED</a></li>
                <li><a href=""><img src="img/11.jpg" alt=""/>MobileMe</a></li>
                <li><a href=""><img src="img/12.jpg" alt=""/>In-Ear Headphones</a></li>
            </ul>
    </div>
    <div class="zns_box_foot">
        <span style="left: 460px;" class="caret"></span>
        <a href="#" class="show">123</a>
        <a href="http://www.baidu.com" >456</a>
        <a href="#" >789</a>
        <a href="#" >101112</a>
    </div>
</div>
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="js/xy.js"></script>
<script type="text/javascript">
    $('.page').appleShow({
        itemsClass:'zns_box_head',
        conctrolClass:'zns_box_foot',
        arrowClass:'caret',
        auto:true
    });
</script>
</body>
</html>

CSS：

图片自己去苹果网站上下吧。

说明：这个是以插件的形式写的，调用方便，可设置是否自动切换$('xx00').appleShow({auto:true})，可设置切换事件，click,mouseover都可以，默认值为click, $('xxoo').appleShow({type:'click'})。

posted @   zjhsd2007  阅读(697)  评论(2)  编辑  收藏  举报
编辑推荐：
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
阅读排行：
· 周边上新：园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源！
· 分享 3 个 .NET 开源的文件压缩处理库，助力快速实现文件压缩解压功能！
· Ollama——大语言模型本地部署的极速利器
· DeepSeek如何颠覆传统软件测试？测试工程师会被淘汰吗？
历史上的今天：
2011-03-04 js获取客户端操作系统
点击右上角即可分享
微信分享提示
SQL AI 助手