JQuery+各种动画样式

于 2020-03-07 22:39:28 发布
阅读量149 收藏
点赞数
分类专栏： 前端 文章标签： js jquery html java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44734751/article/details/104724274
版权

01初体验JQuery.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--引入jquery-->
		<script src="https://code.jquery.com/jquery-1.12.4.js"integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU="crossorigin="anonymous"></script>>
		<script>
			//原生js代码固定写法
			window.onload=function(){}
			
			//Jquert代码固定写法
			$(document).ready(function(){
				alert("a");
			});
			
		</script>
	
	
	
	</head>
	<body>
	</body>
</html>
01初体验JQuery.html

02Jquery和Js加载区别.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="https://code.jquery.com/jquery-1.12.4.js"integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU="crossorigin="anonymous"></script>>
		<script>
			/*
			 	区别1：
			 		-js会等待html页面全部加载完 包括远程图片 在执行
			 		-jquery会等待html页面全部加载完 但包括远程图片 在执行
			 		
			 	区别2：
			 		js的window.οnlοad=function() 如果有多个 后面的会覆盖前面的
			 		jquery的$(document).ready(function(){}); 如果又多个 会依次执行
			 * */
			window.onload=function(){
				alert("aa");
			}
			
			window.onload=function(){
				alert("bb");
			}
				
			//Jquert代码固定写法
			$(document).ready(function(){
				alert("a");
			});
			
			
			$(document).ready(function(){
				alert("b");
			});
			
		</script>
	</head>
	<body>
	</body>
</html>

03jquery入口函数的其他写法.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="https://code.jquery.com/jquery-1.12.4.js"integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU="crossorigin="anonymous"></script>>

	<script>
		//第一种
		$(document).ready(function(){
			alert("aa");
		})
		//第二种
		jQuery(document).ready(function(){
			alert("aa");
		})
		//第三种  企业用的最多
		$(function(){
			alert("aa");
		})
		
		
		//第四种 
		Jquery(function(){
			alert("aa");
		})
		
	</script>
	</head>
	<body>
	</body>
</html>

05核心函数.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="https://code.jquery.com/jquery-1.12.4.js"integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU="crossorigin="anonymous"></script>

		<script>
			//$() 代表JQuery的核心函数
			
			//接受一个函数 
			$(function(){
				
				
				//接受一个字符串选择器 
				 var $box1 = $(".box1")
				 var $box2 = $("#box1")
				 console.log($box1);
				 console.log($box2);
				 
				//接受一个字符串代码片段
				var $p = $("<p>我是段落</p>");
				$box1.append($p)
				
				//接受一个DOM元素
				var span = document.getElementsByTagName("span")[0];
				console.log(span);
				var $span =  $(span);
				console.log($span);
			})
			
		</script>
	</head>
	
	<body>
		<div class="box1"></div>
		<div id="box2"></div>
		<span> span</span>
	</body>
</html>

06JQuery对象的本质.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--
			什么是JQuery对象？
				-JQuery对象是一个伪数组 
			什么叫伪数组 ？
				-有0-length-1的属性 并且有length属性 
		-->
	</head>
	<body>
	</body>
</html>

07静态方法和实例方法.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
		//1定义一个类
			function Aclass(){
				
			}
		//2给这个类添加一个静态方法
			//直接添加给类的就是静态方法
			Aclass.staticMethod=function(){
				alert("aa");
			}
		//3静态方法通过类名调用
			Aclass.staticMethod();
			
			
			
		//4给这个类添加一个实例方法
			Aclass.prototype.instanceMethod = function(){
				alert("bb");
			} 
			
		//5 实例方法通过实例调用 就是对象调用
			//创建对象
			var a = new Aclass();
			a.instanceMethod();
		</script>
	</head>
	<body>
	</body>
</html>

08静态方法each方法.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>08静态方法each方法.html</title>
				<script src="https://code.jquery.com/jquery-1.12.4.js"integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU="crossorigin="anonymous"></script>
		<script type="text/javascript">
			
			
		//原生数组遍历方式
		/*第一个参数 遍历的值
		    第二个参数 数组下标索引
		    原生数组遍历  只能遍历数组 不能遍历伪数组
		  */
		   
		var arr = [1,2,3,4];
	/*	arr.forEach(function(value,index){
			console.log(index,value)
		})*/
		
		//使用jquery遍历数组
		  //第一个参数 数组下标索引
			//第二个参数 遍历的值
		 	
		/*$.each(arr, function(index,value) {
			console.log(index,value)
		});*/
		
		
		//jquery遍历伪数组
		var obj = {0:1,1:2,2:3,3:12,length:4};
		
		
		$.each(obj, function(index,value) {
			console.log(index,value)
		});
		
		</script>
	</head>
	<body>
	</body>
</html>

09静态方法map方法.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	<script src="https://code.jquery.com/jquery-1.12.4.js"integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU="crossorigin="anonymous"></script>
<script type="text/javascript">
	var obj = {0:1,1:2,2:3,3:12,length:4};
		
		
	var r1 =	$.each(obj, function(index,value) {
			console.log(index,value)
		});
		
	var r2=	$.map(obj, function(value,index) {
			console.log(index,value)
		});
		
		
		console.log(r1);
		console.log(r2);
</script>
	</head>
	<body>
	</body>
</html>

10其他静态方法.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	<script src="https://code.jquery.com/jquery-1.12.4.js"integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU="crossorigin="anonymous"></script>

		<script>
			var str ="    a    ";
			//去掉字符串俩端空格
				//-参数 :需要去掉空格的字符串
				//返回去除之后的字符串
			
			var res = $.trim(str)
			console.log("---"+res+"----")
			
			/*isWindow()
				-参数 :判断是否是window对象
				返回值boolean*/
			
			/*isArray()
			 * -参数：判断传入对象是不是真数组
			 * 返回boolean
			 */
			
			/*isFunction()
			 * -参数 ：判断是否是函数
			 * 返回Boolean
			 */
			
		</script>
	</head>
	<body>
	</body>
</html>

11holdReady.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--
			当html所有的元素加载完毕之后 JQuery入口函数的内容就会立即执行
			有些情况我们 我们不想让他立即执行 就需要一个函数
			holdReady（）
				-参数：true 不让JQuery函数立即执行
						false 让JQuery执行
		-->
	</head>
	<body>
	</body>
</html>

14JQuery内容选择器.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 50px;
            height: 50px;
            background: red;
            margin-top: 5px;
        }
    </style>
<script src="https://code.jquery.com/jquery-1.12.4.js"integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU="crossorigin="anonymous"></script>
	<script>
		$(function(){
        //empty: 代表既没有内容也没有子元素的
		/*var $div = $("div:empty")
            console.log($div);

        });*/

        //找有子元素或有文本内容的元素
       /* var $div = $("div:parent")
          console.log($div);
        });*/

        //contains(text) 选择包含指定文本的
        var $div = $("div:contains('我是div')");
            console.log($div);
        });
            //has(element) 选择包含指定元素的
       /* var $div = $("div:has('span')");
          console.log($div)
        })*/
	</script>

</head>
<body>
    <div></div>
    <div>我是div</div>
    <div>我是div123</div>
    <div><p></p></div>
    <div><span></span></div>
</body>
</html>

15属性和属性节点.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://code.jquery.com/jquery-1.12.4.js"integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU="crossorigin="anonymous"></script>
    	<script>
    		$(function(){
        /*
            1什么是属性
                -对象身上保存的变量就是属性
            2如何操作属性
                -对象.属性名
                -对象.属性名=值
                -对象[“对象名”]=值
                -对象[“对象名”]
            3什么是属性节点
                -<span name ="it"></span>
                在标签中添加的属性就是属性节点
            4如何操作属性节点
                - var a = document.getElementsByTagName("span")[0];
                -a.setAttribute("name","cc"); 改变属性节点
                -a.getAttribute("name") 获取属性节点
             5属性节点和属性有什么区别
                 -任何对象都有属性 只有节点有属性节点
         */

            var a = document.getElementsByTagName("span")[0];
            a.setAttribute("name","cc");
            a.getAttribute("name")
    		});



    	</script>
</head>
<body>
<span name ="it"></span>
</body>
</html>

16-attr方法.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://code.jquery.com/jquery-1.12.4.js"integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU="crossorigin="anonymous"></script>
    	<script>

    		$(function(){
                /*
                atter(name|pro|key,val|fun)
                    -获取或设置属性节点的值
                    传一个参数代表获取属性节点的值
                    传俩个参数代表设置属性节点的值

                */
                //无论找到多少个元素 都只会返回第一个
                //console.log($("span").attr("class"));
                //找到多少个设置多少个
                //console.log($("span").attr("class","box"));

                //删除节点属性
               //    console.log($("span").removeAttr("class"));
                //删除多个节点属性  空格隔开
               // console.log($("span").removeAttr("class name"));

            });

    	</script>
</head>
<body>
<span class="nam1" name="it666"></span>
<span class="nam2" name="it777"></span>
</body>
</html>

17-prop方法.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://code.jquery.com/jquery-1.12.4.js"integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU="crossorigin="anonymous"></script>
    	<script>
    		$(function(){

    		/*
    		1prop*/
    		//特点和attr一样
    		//找到所有span的第一个
    		$("span").eq(0).prop("class","it666");


    		/*2removeProp
    		和attr一样
    		$("span").eq(0).prop("dome");
    		 */


    		/*
    		什么时候用prop？什么时候用attr
    		    -返回值是boolean的时候用prop否则用attr
    		 */
    		});
    	</script>
</head>
<body>
<span class="nam1" name="it666"></span>
<span class="nam2" name="it777"></span>
</body>
</html>

18操作类相关方法.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div1{
            width: 100px;
            height: 100px;
            background-color: red;
        }

        .div2{
            width: 150px;
            height: 150px;
            background-color: blueviolet;
        }


    </style>
    <script src="https://code.jquery.com/jquery-1.12.4.js"integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU="crossorigin="anonymous"></script>
    	<script>
    		$(function(){
    		    var bt = document.getElementsByTagName("button");
    		    bt[0].onclick=function () {
    		        // 上面定义好了几个样式 然后给节点添加class
                    $("div").addClass("div1")
                }
                bt[1].onclick=function () {
                    //然后给节点添加class
                    $("div").removeClass("div1 div2")
                }
                bt[2].onclick=function () {
                    //切换 切换就是有就删除 没有就添加
                    $("div").toggleClass("div1")
                }

    		});
    	</script>
</head>
<body>
    <div></div>
    <button>添加样式</button>
    <button>取消样式</button>
    <button>切换样式</button>
</body>
</html>

19文本值相关操作.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://code.jquery.com/jquery-1.12.4.js"integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU="crossorigin="anonymous"></script>
    	<script>
    		$(function(){
                /*
                1html()
                    -和原生innerHTML一摸一样
                2text()
                    -和原生innerText一摸一样
                3val()
                    -获取input的值
                 */
    		//代码

    		});
    	</script>
</head>
<body>
<button>设置html</button>
<button>获取html</button>
<button>设置text</button>
<button>获取text</button>
<button>设置val</button>
<button>获取val</button>
<div></div>
<input type="text">
</body>
</html>

20操作样式.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://code.jquery.com/jquery-1.12.4.js"integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU="crossorigin="anonymous"></script>
    	<script>
    		$(function(){

    		//css()方法设置样式 逐个设置
            $("div").css("width","50px")
            $("div").css("height","50px")
            $("div").css("background","red")

            //css()方法设置样式 链式变成
            //$("div").css("width","50px").css("height","50px").css("background","blue")

    	    //批量设置 传一个对象
            $("div").css({
                width:"50px",
                height:"50px",
                background:"yellow"
            })

             //4获取样式
             console.log($("div").css("width"));


            });
    	</script>
</head>
<body>
    <div></div>
</body>
</html>

22事件.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://code.jquery.com/jquery-1.12.4.js"integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU="crossorigin="anonymous"></script>
    	<script>
    		$(function(){

    		//JQuery有俩种绑定事件的方式
             //  1 eventName(fn)
                //特点：俩个事件不会覆盖 也可以绑定不同事件
                $("button").click(function () {
                    alert("aa")
                });

                $("button").click(function () {
                    alert("aa")
                });

                /*移除事件
                    -无参数:移除所有事件
                    -可以传一个参数：会移除指定类型的事件
                    -可以传俩个参数：会移除指定类型的指定事件
                    */
                $("button").off();

    		});
    	</script>
</head>
<body>
<button></button>
</body>
</html>

23事件冒泡和默认行为.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{/*紧贴页面*/
            margin: 0;
            padding: 0;
        }
        .father{
            width: 200px;
            height: 200px;
            background-color: red;
        }
        .son{
            width: 100px;
            height: 100px;
            background-color:blueviolet;
        }
    </style>
    <script src="https://code.jquery.com/jquery-1.12.4.js"integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU="crossorigin="anonymous"></script>
    	<script>
    		$(function(){

    		/*
    		* 1什么是事件冒泡
    		*   -父子元素都绑定事件之后 子元素事件触发 父元素事件也会触发
    		* 2如何阻止事件冒泡
    		*   -子元素 返回 false即可
    		*   -调用event.stopPropagation()
    		* 3什么是默认行为
    		*   -a标签一点就会跳转 这就是默认事件
    		* 4如何阻止默认行为
    		*   -写一个事件 并在事件中阻止冒泡
    		* */

    		$(".son").click(function () {
                alert("son");
                return false;
            })
            $(".father").click(function () {
                alert("father");
            })



    		});
    	</script>
</head>
<body>
<div class="father" id="father1">
    <div class="son"></div>
</div>
<a href="http://baidu.com">我是百度</a>
<form action="http://www.taobao.com">
    <input type="text">
    <input type="submit">
</form>
</body>
</html>

24事件的自动触发.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{/*紧贴页面*/
            margin: 0;
            padding: 0;
        }
        .father{
            width: 200px;
            height: 200px;
            background-color: red;
        }
        .son{
            width: 100px;
            height: 100px;
            background-color:blueviolet;
        }
    </style>
    <script src="https://code.jquery.com/jquery-1.12.4.js"integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU="crossorigin="anonymous"></script>
    <script>
        $(function(){


            $(".son").click(function () {
                alert("son");
            })
            $(".father").click(function () {
                alert("father");
            })


            //方式1：为class为son的标签开启自动触a发 一进页面就执行 该方式会触发冒泡行为并且会取消默认行为

            //方式2  为class为son的标签开启自动触发 一进页面就执行 该方式不会触发冒泡行为并且会取消默认行为
              //  $(".son").triggerHandler("click")

            //我们已经知道 立即触发都会取消默认行为 如果想a标签自动触发和并且有默认行为怎么办？
            //  --我们在a中添加span标签 给span设置自动触发（trigger）利用冒泡 会触发a

            $("span").click(function () {
                alert("span")
            })
            $("span").trigger("click")
        });
    </script>
</head>
<body>
<div class="father" id="father1">
    <div class="son"></div>
</div>
<a href="http://baidu.com"><span>我是百度</span></a>
<form action="http://www.taobao.com">
    <input type="text">
    <input type="submit">
</form>
</body>
</html>

25自定义事件.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{/*紧贴页面*/
            margin: 0;
            padding: 0;
        }
        .father{
            width: 200px;
            height: 200px;
            background-color: red;
        }
        .son{
            width: 100px;
            height: 100px;
            background-color:blueviolet;
        }
    </style>
    <script src="https://code.jquery.com/jquery-1.12.4.js"integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU="crossorigin="anonymous"></script>
    	<script>
    		$(function(){

    		//click mousemove 都是事件
            //如何自定义事件
            // 以前我们这样做 此处的click事件必须是API定义好的 所以得换一种写法
                /*$(".son").click(function () {

                })*/

                //自定义事件必须写在On里 第二个参数是回调函数
             $(".son").on("myClick",function () {
                    alert("a")
             })
                //虽然自定义了对象 单系统不知道如何才能触发 所以利用自动触发
                $(".son").trigger("myClick");
    		});
    	</script>
</head>
<body>
<div class="father" id="father1">
    <div class="son"></div>
</div>
<a href="http://baidu.com"><span>我是百度</span></a>
<form action="http://www.taobao.com">
    <input type="text">
    <input type="submit">
</form>
</body>
</html>

27事件委托.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://code.jquery.com/jquery-1.12.4.js"integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU="crossorigin="anonymous"></script>
    	<script>
    		$(function(){

    		$("button").click(function () {
                $("ul").append("<li>我是新增的li</li>")
            })
                //为li绑定点击事件 但是后加的li没有绑定 因为页面加载完才添加的li如何解决
         /*   $("ul>li").click(function () {
                console.log($(this).html());
            })*/
            //利用冒泡 给父元素添加点击事件 这样子元素时候会传递给父元素
            $("ul").delegate("li","click",function () {
                console.log($(this).html());
            })
    		});
    	</script>
</head>
<body>
<ul>
    <li>我是第1个li</li>
    <li>我是第2个li</li>
    <li>我是第3个li</li>
</ul>
<button>增加一个li</button>
</body>
</html>

28鼠标移入移出事件.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{/*紧贴页面*/
            margin: 0;
            padding: 0;
        }
        .son{
            width: 50px;
            height: 50px;
            background-color: red;
        }
        .father{
            width: 111px;
            height: 110px;
            background-color: black;
        }
    </style>
    <script src="https://code.jquery.com/jquery-1.12.4.js"integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU="crossorigin="anonymous"></script>
    	<script>
    		$(function(){

              /*  $(".son").mouseover(function () {
                    console.log("鼠标移入了");
                })
                $(".son").mouseout(function () {
                    console.log("鼠标移出了");
                })*/
              //当把鼠标移动到子元素的时候会触发父元素的鼠标移出 我们不想这样怎么办？
              /*  $(".father").mouseover(function () {
                    console.log("鼠标移入了");
                })
                $(".father").mouseout(function () {
                    console.log("鼠标移出了");
                })*/

                //子元素移入移出不会触发父元素
              /*  $(".father").mouseenter(function () {
                    console.log("鼠标移入了");
                })
                $(".father").mouseleave(function () {
                    console.log("鼠标移出了");
                })*/


              //一个方法可以同时监听移入移出
                $(".father").hover(function () {
                    console.log("鼠标移入了");
                },function () {
                    console.log("鼠标移出了");
                })

            });
    	</script>
</head>
<body>
<div class="father">
    <div class="son"></div>
</div>
</body>
</html>

29显示隐藏动画.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;

        }
        div{
            width: 500px;
            height: 500px;
            display: none;
            background-color: red;
        }

    </style>
    <script src="https://code.jquery.com/jquery-1.12.4.js"integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU="crossorigin="anonymous"></script>
    	<script>
    		$(function(){

    		     $("button").eq(0).click(function () {
                    //$("div").css("display","block");
                    $("div").show(1000);
                 })
                 $("button").eq(1).click(function () {
                     //$("div").css("display","none");
                     $("div").hide(1000);
                 })
                $("button").eq(2).click(function () {
                    $("div").toggle(1000);
                })


    		});
    	</script>
</head>
<body>
    <button>显示</button>
    <button>隐藏</button>
    <button>切换</button>
<div></div>
</body>
</html>

30对联广告.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;

        }
        .left{
            float: left;
            position: fixed;
            left: 0;
            top: 200px;
        }
        .right{
            float: right;
            position: fixed;
            right: 0;
            top: 200px;
        }
        img{
            display: none;
        }
    </style>
    <script src="https://code.jquery.com/jquery-1.12.4.js"integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU="crossorigin="anonymous"></script>
    	<script>
    		$(function(){

    		//监听网页滚动
                $(window).scroll(function () {
                    //获取滚动偏移量
                    var offscroll = $("html,body").scrollTop();
                    console.log("a");
                    if(offscroll>=200){
                        $("img").show(1000);
                    }else if(offscroll<200){
                        $("img").hide(1000);
                    }


                })

    		});
    	</script>
</head>
<body>
<img src="img/a.png" class="left" >
<img src="img/a.png" class="right">

</body>
</html>

31展开和收起动画.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        div{
            width: 100px;
            height: 100px;
            background-color: red;
            display: none;
        }
    </style>
    <script src="https://code.jquery.com/jquery-1.12.4.js"integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU="crossorigin="anonymous"></script>
    	<script>
    		$(function(){

    		$("button").eq(0).click(function () {
    		    $("div").eq(0).slideDown(1000);

            })
            $("button").eq(1).click(function () {
                $("div").eq(0).slideUp(1000);
            })
            $("button").eq(2).click(function () {
                $("div").eq(0).slideToggle(1000);
            })

    		});
    	</script>
</head>
<body>
<button>显示</button>
<button>隐藏</button>
<button>切换</button>
<div></div>
</body>
</html>

32折叠菜单.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .nav{
            /*去掉 列表前的点*/
            list-style: none;
            width: 300px;
            margin: 100px auto;
        }
        .nav>li{
            /*设置边框*/
            border: 1px solid #000;
            line-height: 35px;
            border-bottom: none;
            text-indent: 2em;

        }
        .nav>li:last-child{
            border: 1px solid #000;
            border-bottom-left-radius: 10px;
            border-bottom-right-radius: 10px;

        }
        .nav>li:first-child{

            border-top-left-radius: 10px;
            border-top-right-radius: 10px;

        }
        .sub>li{
            list-style: none;
            background: blueviolet;
            border-bottom: 1px solid white;
        }
        .sub>li:hover{
            background: yellowgreen;
        }
        .sub{
            display: none;
            display: ;
        }

    </style>
    <script src="https://code.jquery.com/jquery-1.12.4.js"integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU="crossorigin="anonymous"></script>
    	<script>
    		$(function(){

    		$(".nav>li").click(function () {
    		    //当前元素展开
                $(this).children(".sub").slideDown(1000);
                //其他元素关闭
                //拿到其他一级菜单的叫sub儿子 并关闭
                $(this).siblings().children(".sub").slideUp(1000);
            })

    		});
    	</script>
</head>
<body>
<ul class="nav">
    <li>一级菜单<span></span>
        <ul class="sub">
            <li class="inner">二级菜单</li>
            <li class="inner">二级菜单</li>
            <li class="inner">二级菜单</li>
            <li class="inner">二级菜单</li>
            <li class="inner">二级菜单</li>
        </ul>
    </li>
    <li>一级菜单<span></span><ul class="sub">
        <li class="inner">二级菜单</li>
        <li class="inner">二级菜单</li>
        <li class="inner">二级菜单</li>
        <li class="inner">二级菜单</li>
        <li class="inner">二级菜单</li>
    </ul></li>
    <li>一级菜单<span></span><ul class="sub">
        <li class="inner">二级菜单</li>
        <li class="inner">二级菜单</li>
        <li class="inner">二级菜单</li>
        <li class="inner">二级菜单</li>
        <li class="inner">二级菜单</li>
    </ul></li>
    <li>一级菜单<span></span><ul class="sub">
        <li class="inner">二级菜单</li>
        <li class="inner">二级菜单</li>
        <li class="inner">二级菜单</li>
        <li class="inner">二级菜单</li>
        <li class="inner">二级菜单</li>
    </ul></li>
    <li>一级菜单<span></span><ul class="sub">
        <li class="inner">二级菜单</li>
        <li class="inner">二级菜单</li>
        <li class="inner">二级菜单</li>
        <li class="inner">二级菜单</li>
        <li class="inner">二级菜单</li>
    </ul></li>
    <li>一级菜单<span></span><ul class="sub">
        <li class="inner">二级菜单</li>
        <li class="inner">二级菜单</li>
        <li class="inner">二级菜单</li>
        <li class="inner">二级菜单</li>
        <li class="inner">二级菜单</li>
    </ul></li>
</ul>
</body>
</html>

33下拉菜单.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .nav{
            list-style: none;
            width: 300px;
            height: 50px;
            background-color: rebeccapurple;
            margin: 100px auto  ;
        }
        .nav>li{
            width: 100px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            float: left;
        }
        .sub{
                list-style: none;
            background-color: yellowgreen;
            display: none;
        }

    </style>
    <script src="https://code.jquery.com/jquery-1.12.4.js"integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU="crossorigin="anonymous"></script>
    	<script>
    		$(function(){

    		//1监听一级菜单移入
                $(".nav>li").mouseenter(function () {
                    //拿到二级菜单
                   var $sub =  $(this).children(".sub");
                    //停止当前正在运行的动画效果
                    $sub.stop();
                    $sub.slideDown(1000)
                })
                //2监听移出事件
                $(".nav>li").mouseleave(function () {
                    var $sub  =   $(this).children(".sub");
                    //停止当前正在运行的动画效果
                    $sub.stop();
                    $sub.slideUp(1000)
                })
    		});

    	</script>
</head>
<body>
<ul class="nav">
    <li>一级菜单
        <ul class="sub">
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
        </ul>
    </li>
    <li>一级菜单 <ul class="sub">
        <li>二级菜单</li>
        <li>二级菜单</li>
        <li>二级菜单</li>
        <li>二级菜单</li>
        <li>二级菜单</li>
        <li>二级菜单</li>
        <li>二级菜单</li>
    </ul></li>
    <li>一级菜单 <ul class="sub">
        <li>二级菜单</li>
        <li>二级菜单</li>
        <li>二级菜单</li>
        <li>二级菜单</li>
        <li>二级菜单</li>
        <li>二级菜单</li>
        <li>二级菜单</li>
    </ul></li>
</ul>
</body>
</html>

34淡入淡出动画.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 100px;
            height: 100px;
            background-color: rebeccapurple;
            display: none;
        }
    </style>
    <script src="https://code.jquery.com/jquery-1.12.4.js"integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU="crossorigin="anonymous"></script>
    	<script>
    		$(function(){

    		$("button").eq(0).click(function () {
                $(".div").fadeIn(1000)
            })
            $("button").eq(1).click(function () {
                $(".div").fadeOut(1000)
            })
            $("button").eq(2).click(function () {
                $(".div").fadeToggle(1000)
            })
            $("button").eq(3).click(function () {
                $(".div").fadeTo(1000,0.5 )
            })

    		});
    	</script>
</head>
<body>
<button>淡入</button>
<button>淡出</button>
<button>切换</button>
<button>淡入到</button>
<div class="div"></div>
</body>
</html>

36弹窗广告.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .nav{
            position: fixed;
            right: 0;
            bottom: 0;
        }
        .nav>span{
            width: 30px;
            height: 30px;
            position: absolute;
            top: 0;
            right: 0;
            display:inline-block;

        }
        .nav{
            display: none;
        }
    </style>
    <script src="https://code.jquery.com/jquery-1.12.4.js"integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU="crossorigin="anonymous"></script>
    	<script>
    		$(function(){

    		$(".nav>span").click(function () {
                $(".nav").remove();
            })
                //让动画依次执行可以这么写 但是可读性插
           /* $(".nav").slideDown(1000,function () {
                $(".nav").fadeOut(1000,function () {
                    $(".nav").fadeIn(1000)
                })
            });*/
            //这么写
                $(".nav").stop().slideDown(1000).fadeOut(1000).fadeIn(1000);



    		});
    	</script>
</head>
<body>
<div class="nav">
    <img src="img/aa.png">
    <span></span>
</div>
<span></span>
</body>
</html>
李嘉伟66666
关注
专栏目录
jQuery UI实现动画效果代码分享
10-18
给大家总结了jQuery UI实现动画效果的实例代码，有需要的朋友们可以参考测试下。
jQuery 源码解析(三十一) 动画模块 便捷动画详解
imherer的博客
08-04 128
jquery在$.animate()这个接口上又封装了几个API，用于进行匹配元素的便捷动画，如下: $(selector).show(speed,easing,callback) ;如果被选元素已被隐藏，则显示这些元素 $(selector).hide(speed,easing,callback) ;如果被选的元素已被显示，则隐藏该元素 $(selector).toggle(speed,easing,callback) ;切换元素的可见状态，如果被...
jQuery动画-让页面动起来! (2)基本的动画函数主要分为show, hide和toggle
我的地盘
02-16 1721
基本动画函数 Basics名称说明举例show( )<br />显示隐藏的匹配元素。<br />这个就是 'show( speed, [callback] )' 无动画的版本。如果选择的元素是可见的，这个方法将不会改变任何东西。无论这个元素是通过hide()方法隐藏的还是在CSS里设置了display:none;，这个方法都将有效。显示所有段落: <br />$("p").show()show( speed, [callback])<br />以优雅的动画显示所有匹配的元素，并在显示完成后可选地触发一个回调
JQuery实现的模块交换动画效果
weixin_30383279的博客
01-04 176
<!doctype html> <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <title>JQuery实现的模块交换动画效果</title> <m...
让网站动起来！12款优秀的 jQuery 动画插件推荐
weixin_34406061的博客
03-20 161
　　如今，大多数设计师和开发人员被要客户要求开发动态的网站。创造视觉震撼和醒目的动态网站是艰巨的任务，因为它需要大量的努力和创造力。在网络上有大量的工具和插件可用于创建网站动画。许多开发人员正在使用 HTML5 和 jQuery 提供的最新功能来创建创建和实现震撼的视觉效果。 　　如果你正在寻找一款 jQuery 动画插件，使得网站内容更加动感，那么你找对地方了，因为下面是12款优秀的 jQue...
jquery+html5烂漫爱心表白动画代码分享
10-23
【jQuery + HTML5浪漫爱心表白动画】是一种利用JavaScript库jQuery和HTML5的Canvas元素创建的互动动画效果，常用于制作富有创意的表白场景。在HTML5的Canvas上，可以通过JavaScript绘制图形并添加动画效果，使得爱心...
jQuery+css3水平悬停动画 jQuery+css3水平悬停动画网页特效.zip
11-19
同时，jQuery的`.animate()`方法可以创建自定义的动画效果，包括改变元素的各种属性，如宽度、高度、透明度等。 在"jQuery+css3水平悬停动画"的实践中，可能包含以下步骤： 1. 使用HTML5标签构建页面结构，确保元素...
jQuery+TweenMax动画翻页倒计时特效.zip
最新发布
09-27
在本项目中，jQuery将用于选择DOM元素、绑定事件和执行动画。 **TweenMax** 是GreenSock Animation Platform (GSAP)的一部分，这是一个强大的JavaScript动画库，提供了丰富的动画控制和性能优化。TweenMax可以用于...
HTML+CSS+JavaScript+jQuery+Bootstrap等前端框架实现的前端案例.zip
06-04
jQuery是一个广泛使用的JavaScript库，简化了DOM操作、事件处理和动画制作。它提供了简便的API，如`$(selector).click()`用于添加点击事件，`$.ajax()`用于异步请求，以及`.fadeIn()`、`.slideUp()`等创建平滑动画的...
jQuery+CSS3镜像文字动画垂直导航菜单特效
06-05
CSS3，即层叠样式表的第三版，引入了许多新的特性，其中就包括动画。CSS3的动画功能通过`@keyframes`规则定义了一段动画的过程，然后可以将这个动画应用到任何选择器上。在这个特效中，我们可能会看到如下的CSS3关键...
jQuery实现切换页面过渡动画效果
10-23
是一款效果非常酷的jQuery和CSS3通过AJAX调用切换页面过渡动画特效插件。该页面切换特效使用AJAX来动态加载链接内容，在页面加载的时候，使用CSS3来制作非常酷的页面过渡动画效果。插件中使用pushState方法来管理浏览器的浏览历史，需要的朋友可以参考下
6个非常精美的jQuery背景动画个性全屏焦点图（一）
08-11
在线效果：http://ynif.v099.10000net.cn/demo/donghua/1/donghua/index.html
HTML5/jQuery 3D焦点图插件 多种超酷切换动画
08-23
之前我们分享过一些很酷的焦点图插件了，有些是基于jQuery的焦点图应用，今天我们要分享一款基于HTML5和jQuery的3D焦点图插件，该HTML5焦点图有多种超酷的切换动画，包括3D百叶窗、3D翻转等特效，有些切换效果在高版本Chrome中有效果。
jQuery和CSS3全屏整页切换过渡动画特效
04-25
jQuery和CSS3全屏整页切换过渡动画特效
完整版窗口动画效果模块 V1.0.rar
04-03
完整版窗口动画效果模块 V1.0.rar
10款基于jquery的web前端动画特效
weixin_33725239的博客
02-16 703
1.jQuery横向手风琴图片切换动画 之前我们为大家分享过很多款基于jQuery和CSS3的手风琴菜单和手风琴焦点图插件，比如CSS3响应式垂直手风琴菜单和jQuery横向手风琴图片展示插件。今天要介绍的也是一款基于jQuery的横向手风琴图片切换动画，鼠标滑过图片时即可展开，并且图片上方有文字标题，非常实用。 在线演示 源码下载 2.jQuery/CSS3渐变颜色拾取器 之前我们向大家分享过...
使用JQuery快速高效制作网页交互特效——jQuery动画效果012
qq_44658169的博客
12-15 305
jQuery在线引用地址(全)
热门推荐
易天海
12-22 5万+
jQuery在线引用地址(全) 来源：https://www.bootcdn.cn/jquery/ 版本：3.3.1 https://cdn.bootcss.com/jquery/3.3.1/jquery.js https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js BootstrapCDN &lt;link rel="stylesheet" hr...
使用jQuery代码片段
xx搞事情的博客
12-04 274
1. 如何修改jQuery默认编码（例如默认UTF-8改成改GB2312）： $.ajaxSetup({ ajaxSettings:{ contentType:"application/x-www-form-urlencoded;chartset=GB2312"} }); 2. 解决jQuery, prototype共存，$全局变量冲突问题： jQuer
使用jQuery+CSS3实现文章点赞动画效果
"jQuery+CSS3实现文章点赞功能的代码示例" 在Web开发中，创建交互式的用户体验是至关重要的，而点赞功能就是一种常见的互动形式。在这个示例中，我们将探讨如何利用jQuery库和CSS3技术来实现一个简单且美观的文章...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值