css3 css JQuery 操作Class实现前端交互方案（推荐）

一、JQuery基础+控制图片宽度实现动画交互

1.html页面声明周期

//页面生命周期

//页面的数据html，加载完成， 图片+ajax+视频 在异步加载中

//document.ready---DOMContentLoaded  ----小程序onload   ---Vue created()

//页面加载完成

//window.onload  ---小程序onload  ----- Vue mounted()

2.Jquery操作class整理

//jQuery 操作class

//判断样式 hasClass('样式名称')

//添加样式 addClass('样式名称')

//移除样式 removeClass('样式名称')

//切换样式 toggleClass('样式名称')

3.控制图片宽度动画交互

css

.block{

width: 200px;

transition: all ease 1s;

}

/**

样式名字可以处理效果

**/

.block.active{

width: 800px;

height: auto;

}

html+js

效果：

二、Jquery鼠标滑过下拉效果动画

css

.block {

width: 100px;

height: 0px;

transition: all ease 0.6s;

background: green;

opacity: 0;

}

/**

样式名字可以处理效果

**/

.block.active {

height: 100px;

opacity: 1;

}

.btn {

width: 100px;

height: 30px;

text-align: center;

line-height: 30px;

background-color: blue;

color: white;

border-radius: 10px;

}

html+js

效果：

三、Jquery实现消息通知动画效果

css：

.block {

padding: 10px 20px;

height: 30px;

transition: all ease 0.6s;

background: green;

position: fixed;

left: 50%;

top: -60px;

transform: translateX(-50%);

box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.3);

border-radius: 15px;

color: white;

}

/**

样式名字可以处理效果

**/

.block.active {

opacity: 1;

top: 300px;

}

.btn {

width: 100px;

height: 30px;

text-align: center;

line-height: 30px;

background-color: blue;

color: white;

border-radius: 10px;

}

html+Js：

效果：

重点总结：

通过Jquery控制元素的class属性的添加或者移除，实现交互动画效果；

css通过class名称控制变换效果。

更多：

 Ajax 重复提交问题处理方案

JQuery 键盘事件使用整理

Jquery 事件绑定使用整理

文章链接

 您阅读本篇文章共花了：