图片放大镜

  • 两个div，一个小div里包这一个小小div，一个大div
  • 获取鼠标在小div里的坐标，赋给小小div，进行移动
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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box {
            width: 2000px;
            margin: 0 auto;
        }
        #smallDiv {
            float: left;
            width: 400px;
            height: 200px;
            border: 1px solid black;
            overflow: hidden;
            position: relative;
        }

        #bigDiv {
            width: 600px;
            height: 300px;
            border: 1px solid black;
            overflow: hidden;
            position: relative;
            display: none;
        }
        #move{
            /*
            w：小div宽=大div宽：大图宽
            w：400=600:1200
            w:4=6:12
            */
            width: 200px;
            /*
            w：小div宽=大div宽：大图宽
            w：400=600:800
            w:4=6:12
            */
            height: 75px;
            background-color: #3288e6;
            position: absolute;
            left: 0;
            top: 0;
            opacity: 0.6;
        }
        #bigImg{
            position: absolute;
            /* left: 10px; */
        }
    </style>
</head>

<body>
    <div id="box">
        <div id="smallDiv">
            <img src="../img/bg.png" id="smallImg">
            <div id="move"></div>
        </div>
        <div id="bigDiv">
            <img src="../img/bg1.png" id="bigImg">
        </div>
    </div>
</body>
<script>
    var sdiv = document.getElementById("smallDiv")
    var simg = document.getElementById("smallImg")
    var move = document.getElementById("move")
    var bdiv = document.getElementById("bigDiv")
    var bimg = document.getElementById("bigImg")


    sdiv.onmousemove = function(e) {
        var x = e.pageX - sdiv.offsetLeft - move.offsetLeft/2;
        var y = e.pageY - sdiv.offsetTop - move.offsetTop/2;
        if (x < 0) {
            x = 0;
        }
        else if (x >  sdiv.offsetWidth - move.offsetWidth) {
            x = sdiv.offsetLeft - move.offsetLeft
        }
        if (y < 0) {
            y = 0;
        }
        else if (y > sdiv.offsetHeight - move.offsetHeight) {
            y = sdiv.offsetHeight - move.offsetHeight
        }
        move.style.left = x + "px"
        move.style.top = y + "px"

        bimg.style.left = -x * (bimg.offsetWidth/simg.offsetWidth) + "px"
        bimg.style.top = -y * (bimg.offsetHeight / simg.offsetHeight) + "px"
    }
    sdiv.onmouseover = function() {
        bdiv.style.display = "block"
    }
    sdiv.onmouseout = function() {
        bdiv.style.display = "none"
    }

</script>
</html>

手风琴动画

  • 写两个样式，一个是普通样式，一个是变化后的样式
  • 获取鼠标经过的样式
    • 给这个div加上变化后的样式
    • 把其他的样式都取消了
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
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            background-color: #f6f6f6;
        }
        .box ul li {
            position: relative;
            float:left;
            list-style: none;
            width: 180px;
            height: 296px;
            background-color: #fff;
            box-shadow: 3px 2px 30px rgba(0, 0, 0, 0.1);
            transition: all 1s;
        }
        .box ul li .title {
            width: 100%;
            height: 30px;
            text-align: center;
            margin-top: 30px;
            font-size: 16px;
            color: #333;
        }
        .box ul li .sub {
            width: 100%;
            height: 30px;
            text-align: center;
            font-size: 14px;
            color: #666;
        }
        .box ul li img {
            width: 170px;
            height: 170px;
            transition: all 1s ease-out;
            position: absolute;
            right: 20px;
            bottom: 40px;
        }
        .box ul li a {
            text-decoration: none;
        }
        .box ul li .go {
            display: none;
        }
        .box ul .on {
            
            background-color: rgb(25, 160, 255);
            width: 370px;
            padding-left: 20px;
        }
        .box ul .on .title {
            text-align: left;
            color: white;
        }
        .box ul .on .sub {
            text-align: left;
            color: white;
        }
        .box ul .on img {
            position: absolute;
            width: 270px;
            height: 270px;
            right: 0;
            bottom: 0;
        }
        .box ul .on .go {
            display: block;
            margin-top: 30px;
            border: 2px solid white;
            width: 75px;
            height: 34px;
            line-height: 34px;
            text-align: center;
            color: white;
            border-radius: 19px;
        }
    </style>
</head>

<body>
    <div class="box">
        <ul>
            <li>
                <a href="#">
                    <div class="title">新机首发</div>
                    <div class="sub">新机更有范</div>
                    <div class="go">GO</div>
                    <img src="../img/phone.jpg" alt="">
                </a>
            </li>
            <li class="on">
                <a href="#">
                    <div class="title">新机首发</div>
                    <div class="sub">新机更有范</div>
                    <div class="go">GO</div>
                    <img src="../img/phone.jpg" alt="">
                </a>
            </li>
            <li>
                <a href="#">
                    <div class="title">新机首发</div>
                    <div class="sub">新机更有范</div>
                    <div class="go">GO</div>
                    <img src="../img/phone.jpg" alt="">
                </a>
            </li>
            <li>
                <a href="#">
                    <div class="title">新机首发</div>
                    <div class="sub">新机更有范</div>
                    <div class="go">GO</div>
                    <img src="../img/phone.jpg" alt="">
                </a>
            </li>
            <li>
                <a href="#">
                    <div class="title">新机首发</div>
                    <div class="sub">新机更有范</div>
                    <div class="go">GO</div>
                    <img src="../img/phone.jpg" alt="">
                </a>
            </li>
        </ul>
    </div>
</body>
<script src="../jquery.min.js"></script>
<script>
    $(".box ul li").hover(function(){
        $(this).addClass("on").siblings().removeClass("on");
    })
</script>
</html>

五星好评

  • 相当于上下叠了两张图片，一张亮，一张暗
  • 右边的文字，通过点击，获取其index中对应的数组进行动态显示
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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 1600px;
            margin: 100 auto;
        }
        .box ul {
            list-style: none;
        }
        .box ul li{
            float: left;
            width: 80px;
            height: 80px;
            line-height: 80px;
            position: relative;
        }
        .box ul li span {
            width: 80px;
            height: 80px;
            display: block;
            position: absolute
        }
        .box ul li .star1 {
            background: url('../img/star-dark.png');
        }
        .box ul li .star2 {
            background: url('../img/star-light.png');
        }
        .box ul .text {
            width: 300px;
        }
    </style>
</head>

<body>
    <div class="box">
        <ul>
            <li>
                <span class="star2"></span>
                <span class="star1"></span>
            </li>
            <li>
                <span class="star2"></span>
                <span class="star1"></span>
            </li>
            <li>
                <span class="star2"></span>
                <span class="star1"></span>
            </li>
            <li>
                <span class="star2"></span>
                <span class="star1"></span>
            </li>
            <li>
                <span class="star2"></span>
                <span class="star1"></span>
            </li>
            <li class="text">
                非常好
            </li>
        </ul>
    </div>
</body>
<script src="../jquery.min.js"></script>
<script>
    $(".box ul li").hover(function() {
        var txt = ['too bad', 'bad', 'normal', 'good', 'very good!']
        $(this).find(".star1").css("display","none")
        $(this).prevAll().find(".star1").css("display", "none")
        $(this).nextAll().find(".star1").css("display", "block")
        $(".box ul .text").html(txt[$(this).index()])
    })
</script>

</html>