zoukankan      html  css  js  c++  java
  • 004 JQuery (010

    [A] 放大镜练习

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

    示例代码:

      1. style样式

    <style>
            *{ margin: 0px; padding: 0px;}
            #small{  480px; height: 300px; border: solid black 1px;position: absolute;
                     left: 100px;top: 100px;}
            #small img{  100%; height: 100%;}
    
            #magnify{  100px; height: 100px; background-color: gray; border: solid black 1px;
                    opacity: 0.3; position: absolute; display: none; cursor: pointer;}
    
            #large{  400px; height: 400px; border: solid black 1px; position: absolute;
                    left: 700px; top: 100px; overflow: hidden;}
            #large img{  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{  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{  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] 购物车练习

      。。

  • 相关阅读:
    四则运算出题系统,java
    Javaweb测试
    《构建之法》 读书笔记(6)
    使用ProcDump在程序没有响应时自动收集dump
    NASA关于如何写出安全代码的10条军规
    C#和C++中的float类型
    避免在C#中使用析构函数Finalizer
    C#性能优化的一些技巧
    从bug中学习怎么写代码
    Code Smell那么多,应该先改哪一个?
  • 原文地址:https://www.cnblogs.com/carreyBlog/p/13282751.html
Copyright © 2011-2022 走看看