004 JQuery (010 - 016)

[A] 放大镜练习

　　准备工作：一张 960 * 600 的图片，并命名为 timg.jpg 

示例代码：

　　1. style样式

<style>
        *{ margin: 0px; padding: 0px;}
        #small{ width: 480px; height: 300px; border: solid black 1px;position: absolute;
                 left: 100px;top: 100px;}
        #small img{ width: 100%; height: 100%;}

        #magnify{ width: 100px; height: 100px; background-color: gray; border: solid black 1px;
                opacity: 0.3; position: absolute; display: none; cursor: pointer;}

        #large{ width: 400px; height: 400px; border: solid black 1px; position: absolute;
                left: 700px; top: 100px; overflow: hidden;}
        #large img{ width: 1920px; height: 1200px; position: absolute;}
</style>
View Code

 

　　2. js行为

<script src="jquery1102/jquery-1.10.2.min.js"></script>
    <script>
        $(function(){
            $("#small").mouseover(function(ev){
                $("#magnify").show();
                $(document).mousemove(function(ev){
                    var oL = ev.clientX - $("#small").offset().left;
                    var oT = ev.clientY - $("#small").offset().top;
                    oL = oL < 50 ? 50 : oL;
                    oL = oL > 430 ? 430 : oL;
                    oT = oT < 50 ? 50 : oT;
                    oT = oT > 250 ? 250 : oT;

                    $("#magnify").css({
                        left: oL - 50,
                        top: oT - 50
                    });
                    $("#disp").css({
                        left: -4 * $("#magnify").position().left,
                        top: -4 * $("#magnify").position().top
                    })
                })
            })
            $("#small").mouseout(function(){
                $("#magnify").hide();
            })
        })
</script>
View Code

 

　　3. html布局

<body>
    <div id="small">
        <img src="timg.jpg">
        <div id="magnify"></div>
    </div>
    <div id="large">
        <img src="timg.jpg" id="disp">
    </div>
</body>
View Code

 

[B] banner图练习

　　准备工作：准备五张图片，大小可自定，但是要求五张图片尺寸相同，分别命名为111.jpg，222.jpg，333.jpg，444.jpg，555.jpg。

 

示例代码：

　　1. css样式

<style>
        *{ margin: 0px; padding: 0px;}
        #container{ width: 1000px; height: 400px; border: solid black 1px; margin-top: 100px; 
                    margin-left: 300px; position: relative; overflow: hidden;}
        #container ol{ list-style: none;position: absolute; left: 700px; top:350px; z-index: 10;}
        #container ol li{ width: 25px; height: 25px; float: left; margin-right: 30px; text-align: center;
                    line-height: 25px; border: solid gainsboro 1px; cursor: pointer;}
        .active{ background-color: moccasin;}

        #box{ position: absolute;}
        #box img{ vertical-align: bottom;}
</style>
View Code

 

　　2. js行为

<script src="jquery1102/jquery-1.10.2.min.js"></script>
    <script>
        $(function(){
            var flag = 0;
            var timer = null;

            function slider(user){
                $("ol li").eq(flag).attr("class", "active").siblings().attr("class", "");
                $("#box").animate({
                    top: flag * -400
                }, 500, function(){
                    if(flag == 5 & user == null){
                        $("#box").css("top", 0);
                        $("ol li").eq(0).attr("class", "active").siblings().attr("class", "");
                        flag = 0;
                    }
                })
            }

            timer = setInterval(() => {
                flag++;
                flag = flag % 6;
                slider();
            }, 1000);

            $("#box").mouseenter(function(){
                clearInterval(timer);
            }).mouseleave(function(){
                timer = setInterval(() => {
                    flag++;
                    flag = flag % 6;
                    slider();
                }, 1000);
            })

            $("ol li").mouseover(function(){
                clearInterval(timer);
                flag = $(this).index();
                slider("yes");
            })
        })
        
</script>
View Code

 

　　3. html布局

<body>
    <div id="container">
        <ol>
            <li class="active">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ol>
        <div id="box">
            <a href="#"><img src="111.jpg"></a>
            <a href="#"><img src="222.jpg"></a>
            <a href="#"><img src="333.jpg"></a>
            <a href="#"><img src="444.jpg"></a>
            <a href="#"><img src="555.jpg"></a>
            <a href="#"><img src="111.jpg"></a>
        </div>
    </div>
</body>
View Code

 

[C] 购物车练习

　　。。

 

posted @ 2020-07-17 10:46  CarreyB  阅读(156)  评论(0)    收藏  举报