5.14

最新推荐文章于 2023-01-19 22:56:38 发布

zxm996

最新推荐文章于 2023-01-19 22:56:38 发布

阅读量143

点赞数

本文链接：https://blog.csdn.net/zxm996/article/details/90319072

版权

图片轮播：
方法一:
通过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：
@keyframes firstAnimation{
from {background: yellow;}
to{ background: red;}
}
// safari和chrome
@-webkit-keyframes firstAnimation{
from {background: yellow;}
to{ background: red;}
} CSS3 动画
用@keyframes规则传创建动画时，需要将其(函数名)绑定到某个选择器，否则不会产生动画效果。

方法二：通过Jquery的新形式实现。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #screen{height:9999px;width:9999px;animation:myfirst 8s;}
        #screen img{float:left;}
        #main{height:300px;width:200px;overflow:hidden;}
        @keyframes myfirst {
            25%{transform:translateX(0px)}
            30%{transform:translateX(-300px)}
            50%{transform:translateX(-300px)}
            55%{transform:translateX(-600px)}
            75%{transform:translateX(-600px)}
            80%{transform:translateX(-900px)}
            100%{transform:translateX(-900px)}
        }
    </style>
</head>
<body>
<div id="main">
    <div id="screen">
        <img src="background-image/list_1.jpg" height="200"width="300">
        <img src="background-image/list_2.jpg" height="200"width="300">
        <img src="background-image/list_3.jpg" height="200"width="300">
        <img src="background-image/list_4.jpg" height="200"width="300">
 
    </div>
 
 
 
</div>
</body>
</html>

//在load()方法中callback是可选的参数，callback(回调函数)规定当load方法完成后所需要执行的
//回调函数。callback回调函数的参数设置:
// responseTxt：包含回调成功后的返回结果内容(响应类容)
//statusTxt：回调状态
//eg: 首先load()方法完成后显示一个提示框，如果load方法执行成功，则显示"外部内容加载成功"
//如果失败，显示’错误信息’
//node ：成功 ----“success” 失败-----‘error’

JQuery—AJAX 的get()和post()方法: 主要用于通过HTTP GET 或 POST请求
* 从服务器里面请求数据。
* GET: 从指定的资源请求数据，GET基本上用于从服务器获取数据
* POST: 向指定的资源提交要处理的数据，POST也可以从服务器获取数据，并且
* 常用于连同请求一起发送数据。不会缓存(cookie)数据。
* */
//ajax—> get()方法，语法： $(“selector”).get(url,callback)
// url —必须参数， callback----可选参数
//eg: 使用get()方法从服务器上的一个文件中获取数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-1.8.3.min.js"></script>
    <script>
        
        $(document).ready(function(){ 
            $("#div1").mouseover(function(){
                url = "demo1.txt"
                $("#div1").load(url)
            })
            $("#div1").mouseout(function(){
                $("#div1").html(" ")
            })
            $("#button1").click(function(){
                url = "demo1.txt"
                $("#div1").load(url)
            })
            
            $("#button2").click(function(){
                $("#div1").load("demo1.txt #p1")
            })
        
            $("#button3").click(function(){
                $("#div1").load("demo1.txt",function(responseTxt,statusTxt){
                    if(statusTxt =='success'){
                        alert("外部内容加载成功")
                    }
                    if(statusTxt =='error'){
                        alert('错误信息')
                    }
                })
            })
 
         
            $("#button4").click(function(){
                jQuery.get("demo.php",function(data,status){
                    alert("数据："+data+"\n状态："+status)
                })
            })
       
    </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>
</html>

zxm996

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
5.14

图片轮播：方法一:通过CSS3的animation属性以及 @keyframes规则实现。首先学习 CSS3当中的@keyframes和animation。@keyframes规则—用于创建动画，在@keyframes中规定某个CSS样式，就能创建由当前样式逐渐变成新样式的动画效果。浏览器支持：Internet Explorer 10 （IE10）、Firefox 、Opera 支持...
复制链接

扫一扫