| JQuery 操作Class实现前段交互方案（推荐） | 您所在的位置：网站首页 › jquery移除click › JQuery 操作Class实现前段交互方案（推荐） |
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 
$(function(){
//点击事件
$('img').click(function(){
$(this).toggleClass('active');
});
});
效果：
二、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 切换 $(function () { //点击事件 $('.btn').mouseenter(function () { $('.block').addClass('active'); }).mouseout(function () { $('.block').removeClass('active'); }); });效果：
三、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： 温馨提示，这是一条通知 $(function () { //点击事件 $('.block').addClass('active'); setTimeout(() => { $('.block').removeClass('active'); }, 2000); });效果：
重点总结： 通过Jquery控制元素的class属性的添加或者移除，实现交互动画效果； css通过class名称控制变换效果。 更多： Ajax 重复提交问题处理方案 JQuery 键盘事件使用整理 Jquery 事件绑定使用整理 |
【本文地址】
公司简介
联系我们