web网页设计实训——05.14

最新推荐文章于 2024-06-18 10:27:38 发布

你啊李阿7

最新推荐文章于 2024-06-18 10:27:38 发布

阅读量458

点赞数

本文链接：https://blog.csdn.net/weixin_44762531/article/details/90319887

版权

jQuery AJAX

AJAX=异步（asynchronous）异步JavaScript和XML（json）

简单地说在不重载整个网页的情况下，AJAX通过后台加载数据，并在网页上进行显示。

使用案例;谷歌地图，优酷视频，人人网等
jQuery-AJAX.losd（URL，data，callback）
必须的URL参数规定加载的地址

eg：

<script src="jquery-1.8.3.min.js"></script>
    <script>
        //1.在webstorm的相同文件夹下创建 index.html文件、和demo1.txt文件、jquery1.8.3包
        $(document).ready(function(){ //入口函数
            $("#div1").mouseover(function(){
                url = "demo1.txt"
                $("#div1").load(url) //ajax加载函数
            })
            $("#div1").mouseout(function(){
                $("#div1").html(" ")
            })
            $("#button1").click(function(){
                url = "demo1.txt"
                $("#div1").load(url)
            })
            //获取id="p1"的元素内容，然后加载到指定的div里面
            $("#button2").click(function(){
                $("#div1").load("demo1.txt #p1")//在文件名后面，拼接一个该元素的id即可
            })
            //在load()方法中callback是可选的参数，callback(回调函数)规定当load方法完成后所需要执行的
            //回调函数。callback回调函数的参数设置:
            // responseTxt：包含回调成功后的返回结果内容(响应类容)
            //statusTxt：回调状态
            //eg: 首先load()方法完成后显示一个提示框，如果load方法执行成功，则显示"外部内容加载成功"
            //如果失败，显示'错误信息'
            //node ： 成功 ----"success"   失败-----‘error’
            $("#button3").click(function(){
                $("#div1").load("demo1.txt",function(responseTxt,statusTxt){
                    if(statusTxt =='success'){
                        alert("外部内容加载成功")
                    }
                    if(statusTxt =='error'){
                        alert('错误信息')
                    }
                })
            })

            /*JQuery---AJAX 的get()和post()方法: 主要用于通过HTTP GET 或 POST请求
            * 从服务器里面请求数据。
            * GET: 从指定的资源请求数据，GET基本上用于从服务器获取数据
            * POST: 向指定的资源提交要处理的数据，POST也可以从服务器获取数据，并且
            * 常用于连同请求一起发送数据。不会缓存(cookie)数据。
            * */
            //ajax---> get()方法，  语法： $("selector").get(url,callback)
            // url ---必须参数，   callback----可选参数
            //eg: 使用get()方法从服务器上的一个文件中获取数据
            $("#button4").click(function(){
                jQuery.get("demo.php",function(data,status){
                    alert("数据："+data+"\n状态："+status)
                })
            })
            /* $ === JQuery--全局函数
            总结：
            * jquery ajax中的load方法将返回的数据放在指定的元素中，不是全局函数。
            * get()同样是jquery的ajax的函数，它的作用把返回的数据交给用户处理，是全局函数
            *
            * load 的实现几乎等同于get的实现，在ajax获取机制上没有区别。
            * load方法的另一个和get 的重要区别：load可以指定要插入文档的某个部分。
            * */    </script>
</head>
<body>
<div id="div1" style="background-color: rgb(204,204,153);
width: 200px;height:400px;overflow: scroll"></div>
<button id="button1">获取外部信息</button>
<button id="button2">获取指定外部信息</button>
<button id="button3">获取外部信息有回调函数</button>
<button id="button4">发送HTTP get请求并获取返回结果</button>
</body>

代码实现：

图片轮播

方法一: 通过CSS3的animation属性以及 @keyframes规则实现

首先学习 CSS3当中的@keyframes和animation

@keyframes规则---用于创建动画，在@keyframes中规定某个CSS样式，就能创建由当前样式逐渐变成新样式的动画效果。

浏览器支持：Internet Explorer 10 （IE10）、Firefox 、Opera 支持 animation属性以及 @keyframes规则

chrome、Safari 需要加前缀 "-webkit-"

注：IE9 以及更早的版本，不支持 animation属性以及 @keyframes规则

@keyframes 语法：
                          @keyframes 函数名(自定义){
                                   内容
                           }

eg：

<style type="text/css">
        /*@keyframes myFirstAnimate {
            from{background: yellow}
            to{background: red}
        }*/
        @keyframes myFirstAnimate{
            0%{background: green}
            50%{background: yellow}
            100%{background: red}
        }
        div{
            animation: myFirstAnimate 5s;
            height: 100px;
            width: 100px;
        }
    </style>
</head>
<body>
<div>

</div>
</body>

代码实现：

eg“”

<style type="text/css">
        #screen{
            height: 9999px;
            width: 9999px;
            animation:myfirst 15s;
        }
        #screen img{
            float: left;
        }
        #main{
            height: 300px;
            width: 300px;
            overflow: hidden;
        }
        @keyframes myfirst {
            25%{transform: translateX(0px)}
            30%{transform: translateX(0px)}
            50%{transform: translateX(-300px)}
            55%{transform: translateX(-300px)}
            75%{transform: translateX(-600px)}
            80%{transform: translateX(-600px)}
            100%{transform: translateX(-900px)}
        }
    </style>

</head>
<body>
<div id="main">
    <div id="screen">
        <img src="list_1.jpg" height="300px"width="300px">
        <img src="list_2.jpg" height="300px"width="300px">
        <img src="list_3.jpg" height="300px"width="300px">
        <img src="list_4.jpg" height="300px"width="300px">
    </div>
</div>
</body>
</html>

代码实现：

你啊李阿7

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
web网页设计实训——05.14

jQueryAJAXAJAX=异步（asynchronous）异步JavaScript和XML（json）简单地说在不重载整个网页的情况下，AJAX通过后台加载数据，并在网页上进行显示。使用案例;谷歌地图，优酷视频，人人网等jQuery-AJAX.losd（URL，data，callback）必须的URL参数规定加载的地址eg：<script src="jq...
复制链接

扫一扫