首页

# 基本特效 show，hide

回顾：JS 的运动，假设要做一个淡入淡出，使用 JS 来做会比较麻烦。

宽度、高度和透明度 是逐渐改变的

  1. 显示

    1
    $(元素).show(时间,[回调]);

  2. 隐藏、

    1
    $(元素).hide(时间,[回调]);

  3. 切换显示和隐藏

    1
    2
    //show+hide=toggle
    $(元素).toggle(时间,[回调]);

# 滑动显示和隐藏

特点：是改变元素的高度。也是在改变元素的可见性！

  1. 滑动显示

    1
    2
    //slice
    $(元素).slideDown(时间,[回调]);

  2. 滑动隐藏

    1
    $(元素).slideUp(时间,[回调]);

  3. 滑动切换

    1
    $(元素).slideToggle(时间,[回调]);

# 淡入淡出

特点：是改变元素的透明度。也是在改变元素的可见性！

  1. 淡入

    1
    2
    3
    //
    $(元素).fadeIn(时间,[回调]);
    //从完全透明到完全不透明  opacity：0-1

  2. 淡出

    1
    2
    $(元素).fadeOut(时间,[回调]);
    //从完全不透明到完全透明  opacity：1-0

  3. 淡入淡出

    1
    $(元素).fadeToggle(时间,[回调]);

  4. 淡入或淡出到指定的透明度

    1
    2
    3
    $("div").fadeTo('时间','透明度');
    //时间：同上面的方法的使用
    //透明度：0-1之间的任意一个值，比如半透明：0.5

    fadeTo==> fadeOut,fadeIn,fadeToggle

    可以使用 fadeTo 来模拟 fadeOut，fadeIn 等方法，所以它是万能的方法

# 特效的链式用法

1
2
$("div").slideDown(400).fadeOUt(500).show(400);
//以上特效不是同时发生，而是按书写的顺序发生，也就排队发生

# 自定义动画的方法

animate 是一个万能的添加特效的方法。可以实现想要的特效。定制自定义动画的方法：

1
2
3
4
5
6
$("要动画的元素").animate({样式}[,时间,运动方式,回调]);
1.样式：平常写的样式还可以给些特殊的JQ特有的样式【重点】
	{left:100px}
2.时间：昨天一样，默认是400ms，可选
3.swing|linear 慢快慢|匀速，可选
4.回调。当动画结束后会自动执行该函数，可选

用法：

  1. 动画依次进行：链式操作

    1
    $("要动画的元素").animate({样式1}[,时间,运动方式,回调]).animate({样式2}[,时间,运动方式,回调]).animate({样式3}[,时间,运动方式,回调]);

  2. 动画同时进行：在一个 animate 中添加多个样式

    1
    2
    3
    4
    5
    $("要动画的元素").animate({
        样式1:样式值,
        样式2:样式值
        。。。
    }[,时间,运动方式,回调])

  3. 样式给不同的属性值

    1
    2
    3
    4
    5
    $("要动画的元素").animate({
        样式1:'+=50',//在原来的基础上加50
        样式2:样式值
        。。。
    }[,时间,运动方式,回调])

  4. 模拟昨天的方法

    1
    2
    3

    样式的值改为："show","hide","toggle"

注意：

  1. 对颜色没有效果
  2. 一组元素上的动画效果，当在一个 animate () 方法中应用多个属性时，动画是同时发生的，当以链式写法时，是按照先后顺序发生的
  3. 所有 html 元素默认都是静态的，如果要让动画生效，必须首先在 CSS 中设置该元素的样式为 position:relative|fixed|absolute.
  4. 可以写的值：尺寸、盒模型、偏移属性、透明度

# 停止动画队列（不是终止动画）

语法：

1
2
3
4
5
6
7
8
昨天：
$("div").hide()
今天：
$("div").stop().hide();
$("div").stop(true,true).hide();
就可以解决动画队列的问题。
防止用户多次连续点击，产生的动画排队问题。
总结：要么不加参数，要么添加2个参数：true。

注意事项：

  1. 没有参数：使用 stop 方法可以停止当前对象上正在运行的动画序列，后面的动画继续执行，类似于循环中的 continue 关键字
  2. 如果第一个参数为 true，表示是否停止被选元素的所有加入队列的动画，后面的动画不再执行了，即使是当前已经执行到一半，后一半也不再执行，类似于循环中的 break 语句。
  3. 如果两个参数都为 true，表示让正在运行的动画继续运行直到结束，相当于也是 break。但是会走完本次动画。

# 使用 animate 实现轮播

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	*{margin:0;padding: 0;}
	ul,li{list-style: none;}
	.content{
		position: relative;
		width: 790px;
		height: 340px;
		overflow: hidden;
	}
	.content ul{
		position: absolute;
		top: 0;
		/*第一张图片的位置*/
		left: 0;
		width: 3160px;
		height: 100%;
	}
	.content ul li{
		float: left;
		width: 790px;
		height: 100%;
	}
	.arrow{
		margin-top: 10px;
		width: 790px;
		text-align: center;
	}
	.arrow a{
		display: inline-block;
		width: 40px;
		height: 40px;
		line-height: 40px;
		text-decoration: none;
		color: #666;
		border:1px solid #ddd;
		border-radius: 5px;
	}
	.arrow a:hover{
		background-color: #eee;
	}
	</style>
	<script src="js/jquery-3.5.1.min.js"></script>
	<script>
	$(function(){
		//这里写JQ代码
		var lbtn=$(".arrow a:first");
		var rbtn=$(".arrow a:last");
		// 胶卷
		var plist=$(".content>ul");
		// 获取多少张
		var len=plist.children().length;//4
		// 向左，左边栋，每次动left:-400px
		// index表示的就是当前是第几张
		var index=0;
		// 去根据胶片改变胶卷的长度
		plist.css("width",len*790);

		lbtn.on("click",function(){
			// 让胶卷动
			// 每点击一次，就让胶卷往前当前图片的索引*-790px
			index++;
			if(index>len-1){
				index=0;
			}
			// plist.css("left",-index*790);
			plist.stop().animate({"left":-index*790});
		});

		rbtn.on("click",function(){
			// 让胶卷动
			// 每点击一次，就让胶卷往前当前图片的索引*-790px
			index--;
			if(index<0){
				index=len-1;
			}
			// plist.css("left",-index*790);
			plist.stop().animate({"left":-index*790});
		});
	})
	</script>
</head>
<body>
	<!-- 屏幕 -->
	<div class="content">
		<!-- 胶卷 -->
		<ul class="clearfix">
			<!-- 图片：胶片 -->
			<li><img src="img/adv4.jpg"></li>
			<li><img src="img/adv1.jpg"></li>
			<li><img src="img/adv2.jpg"></li>
			<li><img src="img/adv3.jpg"></li>
			<li><img src="img/adv4.jpg"></li>
			<!-- <li><img src="img/adv5.jpg"></li> -->
			<li><img src="img/adv1.jpg"></li>
		</ul>
	</div>
	<!-- 箭头 -->
	<div class="arrow">
		<a href="javascript:void(0);"><</a>
		<a href="javascript:void(0);">></a>
	</div>
</body>
</html>

# 手风琴效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>——作业2——</title>
	<style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        ul{
            list-style: none;
        }

        .wrap {
            width: 1010px;
            margin: 100px auto 0;
        }
        .wrap li{
            width: 200px;
            height: 400px;
            float: left;
            overflow: hidden;
        }
    </style>
     <script src="jquery-3.3.1.min.js"></script>
    <script>
        //这里写JQ代码
        $(function(){
            $("ul li").hover(function(){
                $(this).stop().animate({
                    width:600
                })
                .siblings().stop().animate({
                    width:100
                })
            },function(){
                $("ul li").stop().animate({
                    width:200
                })
            })
        })
    </script>
</head>
<body>
	<div class="wrap">
    <ul>
        <li><img src="img/1.jpg"></li>
        <li><img src="img/2.jpg"></li>
        <li><img src="img/3.jpg"></li>
        <li><img src="img/4.jpg"></li>
        <li><img src="img/5.jpg"></li>
    </ul>
</div>
</body>
</html>

# 鼠标悬浮显示底部内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>——作业3——</title>
	    <style type="text/css">
        *{margin:0;padding:0;}
        ul{list-style: none;}
        img{display: block; border:0;}
        .wrapper{width: 752px;  border:1px solid #ccc;
            padding: 10px 0 0 10px;
            font-family: arial;
            overflow: hidden;
            margin:100px auto;
        }
        .wrapper li{
            float: left;
            margin:0 10px 10px 0;
            width: 178px;
            height: 125px;
            overflow: hidden;
            position: relative;
        }
        .wrapper li div,.wrapper li p{
            width:178px;
            height: 25px;
            position: absolute;
            font-size:14px;
            text-align: center;
            line-height: 25px;
            color:white;
            left:0;
            bottom:-25px;
        }
        .wrapper li div{
            background-color:#000;
        }
        .wrapper li p{
            background-color: rgba(0,0,0,0.5);
        }

    </style>
    <script type="text/javascript" src="jquery-3.3.1.min.js"></script>
    <script type="text/javascript">
        $(function(){
            $("ul li").hover(function(){
               $(this).children("p").stop().animate({
                   bottom:0
               })
            },function(){
                $(this).children("p").stop().animate({
                   bottom:-25
               })
            })
        })
    </script>
</head>
<body>
<div class="wrapper">
    <ul>
        <li><a href="###"><img src="img/011.jpg" alt=""/></a><p>百度一下，你就知道</p></li>
        <li><a href="###"><img src="img/022.jpg" alt=""/></a><p>百度一下，你就知道</p></li>
        <li><a href="###"><img src="img/033.jpg" alt=""/></a><p>百度一下，你就知道</p></li>
        <li><a href="###"><img src="img/044.jpg" alt=""/></a><p>百度一下，你就知道</p></li>
        <li><a href="###"><img src="img/055.jpg" alt=""/></a><p>百度一下，你就知道</p></li>
        <li><a href="###"><img src="img/066.jpg" alt=""/></a><p>百度一下，你就知道</p></li>
        <li><a href="###"><img src="img/077.jpg" alt=""/></a><p>百度一下，你就知道</p></li>
        <li><a href="###"><img src="img/088.jpg" alt=""/></a><p>百度一下，你就知道</p></li>
    </ul>
</div>
</body>
</html>

# 轮播图实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Language" content="zh-CN">
<script src="jquery-3.3.1.min.js"></script>
<title>w3cfun首页焦点图</title>
</head>
<body>

<style type="text/css">
    /* css 重置 */
    *{margin:0; padding:0; list-style:none; }
    body{ background:#fff; font:normal 12px/22px 宋体; width:100%;  }
    img{ border:0;  }
    a{ text-decoration:none; color:#333;  }
    a:hover{ color:#1974A1;  }
    #footer{ text-align:center; padding-top:20px;  }

    /* 本例子css */
    .w3cFocus{ width:100%;  position:relative;  height:250px; padding:10px 0; background:#292929;    }
    .w3cFocus .prev,.w3cFocus .next{ position:absolute;  display:block;  left:10px; top:97px; width:46px; height:62px; background:url(img/focusAdvBg.png) no-repeat; filter:alpha(opacity=80);opacity:0.8;  }
    .w3cFocus .next{ left:auto; right:10px; background-position:-46px 0; }
    .w3cFocus .prev:hover,.w3cFocus .next:hover{ filter:alpha(opacity=100) !important;opacity:1 !important;  }
    .w3cFocusIn{ width:960px; height:250px; position:relative;  margin:0 auto;  overflow:hidden;  }
    .w3cFocusIn .bd ul{ position: relative;height:250px; overflow:hidden;  }
    .w3cFocusIn .bd li{ float: left;width:960px;   vertical-align:middle; }
    .w3cFocusIn .bd li img{ width:960px; height:250px; display:block;  }
    .w3cFocusIn .hd{ position: absolute; right:4px; bottom:6px;  }
    .w3cFocusIn .hd ul{ vertical-align:middle; display:inline-block; *display:inline; overflow:hidden; zoom:1; }
    .w3cFocusIn .hd ul li{  position:relative; float:left; display:inline; padding-top:4px;  margin-right:6px; filter:alpha(opacity=80); opacity:0.8;  cursor:pointer;  }
    .w3cFocusIn .hd ul li img{ width:76px; height:46px; border:2px solid #fff; display:block;  }
    .w3cFocusIn .hd ul li.on{ filter:alpha(opacity=100);opacity:1; background:url(img/focusArrow.png) center 0 no-repeat; }
    .w3cFocusIn .hd ul li.on img{ border:2px solid #3499EA; border-bottom-width:4px;   }
</style>

<div class="w3cFocus">
    <div class="w3cFocusIn">
        <div class="bd">
            <ul>
                <!-- 最后一张图片放到第一张 -->
                <li><a href="#"><img src="img/pic4.jpg" /></a></li>
                <!-- 这里是列表的四张图片 -->
                <li><a href="#"><img src="img/pic1.png" /></a></li>
                <li><a href="#"><img src="img/pic2.jpg" /></a></li>
                <li><a href="#"><img src="img/pic3.jpg" /></a></li>
                <li><a href="#"><img src="img/pic4.jpg" /></a></li>
                <!-- 第一张图片放到最后一张 -->
                <li><a href="#"><img src="img/pic1.png" /></a></li>
            </ul>
        </div>

        <div class="hd">
            <ul>
                <li class="on"><img src="img/pic1_s.png" /></li>
                <li><img src="img/pic2_s.png" /></li>
                <li><img src="img/pic3_s.png" /></li>
                <li><img src="img/pic4_s.png" /></li>
            </ul>
        </div>
    </div>
    <a class="prev" href="javascript:void(0)"></a>
    <a class="next" href="javascript:void(0)"></a>

</div>
<script src="jquery-3.3.1.min.js"></script>
<script>
    $(function(){
        // 获取左按钮
        var $prev=$(".prev");
        // 获取右按钮
        var $next=$(".next");
        // 获取大图列表
        var $bd=$(".bd>ul");
        // 获取小图列表
        var $hd=$(".hd>ul");
		// 获取多少张
        var len=$bd.children().length;
        // 设置当前的默认的第一张图片的位置
        $bd.css("left",-960)
		// index表示的就是当前是第几张
		var index=1;
		// 去根据胶片改变胶卷的长度
        $bd.css("width",len*960);
        // 给下一张的按钮绑定单击事件
		$next.on("click",function(){
			// 让胶卷动
			// 每点击一次，就让胶卷往前当前图片的索引*-960px
			index++;
			if(index>len-1){
				index=2;
            }
			$bd.stop().animate({"left":-index*960},function(){
                // 跳到列表的四张图片第一张
                if(index==len-1){
                    $bd.css("left",-960);
                }
            });
            // 让小图跟着大图改变当前的样式
            var num=index-1;
            if(num==4){
                num=0
            }
            $hd.children().removeClass("on");
            $hd.children(":eq("+num+")").addClass("on");
		});
        // 给上一张的按钮绑定单击事件
		$prev.on("click",function(){
			// 让胶卷动
			// 每点击一次，就让胶卷往前当前图片的索引*-960px
			index--;
			if(index<0){
				index=len-3;
            }
			$bd.stop().animate({"left":-index*960},function(){
                // 跳到列表的四张图片最后一张
                if(index==0){
                    $bd.css("left",-960*(len-2));
                }
            });
            // 让小图跟着大图改变当前的样式
            var num=index-1;
            if(num==-1){
                num=3
            }
            $hd.children().removeClass("on");
            $hd.children(":eq("+num+")").addClass("on");
        });
        // 给小图绑定点击事件
        $hd.children().click(function(){
            $(this).addClass("on").siblings().removeClass("on");
            $bd.stop().animate({"left":-($(this).index()+1)*960});
            index=$(this).index()+1;
        })
        // 用定时器触发实现自动轮播
        var timer=setInterval(function(){
            $next.trigger("click");
        },1000)
        // 鼠标移入轮播图的时候轮播静止，移除轮播图的时候轮播继续开始
        $(".w3cFocus").hover(function(){
            clearInterval(timer)
        },function(){
            timer=setInterval(function(){
                $next.trigger("click");
            },1000)
        })
    })
</script>

</body>
</html>


# JS 和 JQ 插件

跟日期和弹框有关的插件。插件：其实就是一个 JS 文件，该文件实现了某些特定功能。

把轮播图的代码单独保存为一个 JS 文件，并命名为 slide.js. 使用插件可以防止我们重复造轮子。

  1. js 插件【优先找 JS 插件】
    可以直接使用，不需要依赖任何库。也就是直接使用 JS 写的。特别是项目中没有使用 JQ 开发时。

  2. jq 插件

    依赖 jquery 库开发的插件。如果要使用该插件就需要先导入 jQuery，再导入该插件。特效之前都是手写，现在学了插件后就是做复制粘贴。

使用谷歌浏览器格式化 JS 和 CSS 代码步骤：

  1. 打开谷歌控制台，找到 source 面板
  2. 在该面板中找到要格式化的 css 和 JS，并在右侧打开
  3. 点击右侧代码视图区域下的 {} 一键格式化代码
  4. 复制代码到自己的文件中

# 日期选择插件

官方地址：https://www.layui.com/laydate/

使用步骤：

  1. 下载该插件，并解压，将 laydate 文件夹放到自己的项目目录中
  2. 在项目 HTML 文件中导入该插件的 js 文件
  3. 根据官方文档看 demo，并且复制对应的效果代码到项目中使用

# 弹框插件

官方网站：https://layer.layui.com/

特点：强大的 WEB 弹框解决方案，几乎能满足所有网站弹框需求。有对应的轻便的手机端弹框插件。

可以用来代替系统的 alert、comfirm、prompt 等内置的弹框，还可以实现各种网页常见的弹框效果。也就是可以使用一个插件满足网站中所有的弹框需求。

# 富文本编辑器

使用场景：后台管理系统需要对文章进行排版。

  1. wangEditor (国内的)

    http://www.wangeditor.com/

    完整版步骤：

    在官网中下载压缩包：wangEditor-3.1.1.zip 解压

    找到 release 文件夹，复制 wangEditor.min.js 到你的项目 js 目录中

    在需要使用富文本编辑器的地方写一个 div，并给一个 id 值，比如叫 #editor，如下代码：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <!-- 导入插件： -->
    <script src="js/wangEditor.min.js"></script>
    <!-- 指定一个要显示富文本编辑器的标签,不是textarea -->
    <div id="div3">  
    </div>

    <script>
        //启用该插件
        var E = window.wangEditor;
        var editor2 = new E('#div3')//这里绑定div
        editor2.create()
    </script>

    还可以定制编辑器的按钮数量，在上面的基础上添加一个配置项即可，代码如下：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    <script>
    	var E = window.wangEditor
        var editor = new E('#div1')
        // 自定义菜单配置
        editor.customConfig.menus = [
            'head',
            'bold',
            'italic',
            'underline'
        ]
        editor.create()
    </script>
    //具体可写哪些配置项可看官方文档：
    //https://www.kancloud.cn/wangfupeng/wangeditor3/335777

# 表单验证插件

特点：强大的表单验证插件，支持 ajax 提交表单
教程：http://www.runoob.com/jquery/jquery-plugin-validate.html
官网：https://jqueryvalidation.org/

使用步骤：

  1. 下载插件，解压，提取 jquery.validate.min.js 到你的项目文件夹中

  2. 在项目中先导入 jquery，再导入该插件

  3. 写一个表单，该表单就是需要被验证的

  4. 在 script 中写验证配置，代码如下：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    $("表单控件form的ID").validate({
            // 校验规则，即在这里写哪些控件需要被验证
            rules: {
              // 具体的控件名
              // 格式： 控件name名：规则
              // 格式：控件的name名：{ 规则1，规则2}
                  name: "required",
                  email: {
                      required:true,
                      email:true
                  },
                  comment: "required"
            },
        //通过message改写默认的系统提示信息
        	message:{
             	  name: "用户名必填",
                  email: {
                      required:"邮箱必填",
                      email:"输入正确的合法的邮箱地址"
                  },
                  comment: "备注必填"   
            }
          });
更新于 阅读次数 次

请我喝[茶]~(￣▽￣)~*

tz 微信支付

微信支付

tz 支付宝

支付宝