基于jQuery图片翻转特效代码

基于jQuery图片翻转特效代码

基于jQuery的JS图片卷帘效果,当打开页面没有鼠标动作的时候,图片上面像一个门帘一样被遮挡。

使用方法
在页面引入相关CSS样式文件

1
2
<link href="css/style.css" rel="stylesheet" type="text/css">
<link href="css/animation.css" rel="stylesheet" media="screen" type="text/css">

JS代码

1
2
<script type="text/javascript" src="js/public.js"></script>
<script type="text/javascript" src="js/main.js"></script>

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
64
65
66
67
68
69
70
<div class="index_hd">
    <div class="fr hd_r major-list-outer">
        <ul class="major-list">
            <li class="major-item">
                <a href="http://www.51qianduan.com//">
                    <span class="txt-hide front-face">
                        <img src="images/1413775760-7544.jpg" width="294" height="267">
                    </span>
                    <span class="back-face to-left"></span>
                </a>
            </li>
            <li class="major-item">
                <a href="http://www.51qianduan.com//">
                    <span class="txt-hide front-face">
                        <img src="images/1400684346-4329.jpg" width="294" height="267">
                    </span>
                    <span class="back-face to-right"></span>
                </a>
            </li>
            <li class="major-item">
                <a href="http://www.51qianduan.com//">
                    <span class="txt-hide front-face">
                        <img src="images/1413775714-2418.jpg" width="294" height="267">
                    </span>
                    <span class="back-face to-top"></span>
                </a>
            </li>
            <li class="major-item">
                <a href="http://www.51qianduan.com//">
                    <span class="txt-hide front-face">
                        <img src="images/1411890878-8918.jpg" width="294" height="267">
                    </span>
                    <span class="back-face to-top"></span>
                </a>
            </li>
            <li class="major-item">
                <a href="http://www.51qianduan.com//">
                    <span class="txt-hide front-face">
                        <img src="images/1413775714-2418.jpg" width="294" height="267">
                    </span>
                    <span class="back-face to-top"></span>
                </a>
            </li>
            <li class="major-item">
                <a href="http://www.51qianduan.com//">
                    <span class="txt-hide front-face">
                        <img src="images/1400684434-4609.jpg" width="294" height="267">
                    </span>
                    <span class="back-face to-top"></span>
                </a>
            </li>
            <li class="major-item">
                <a href="http://www.51qianduan.com//">
                    <span class="txt-hide front-face">
                        <img src="images/1428032296-8158.jpg" width="294" height="267">
                    </span>
                    <span class="back-face to-top"></span>
                </a>
            </li>
            <li class="major-item">
                <a href="http://www.51qianduan.com//">
                    <span class="txt-hide front-face">
                        <img src="images/1405250374-3685.jpg" width="294" height="267">
                    </span>
                    <span class="back-face to-top"></span>
                </a>
            </li>
        </ul>
    </div>
</div>
当前内容只有登录了才能查看,如果您已经注册,请登录
0

发表评论