jQuery的几种简单实用效果
2024-05-09 08:15:38
许久未分享博客，或许已生疏。
闲来无事，
分享几个jQuery简单实用的效果案例
不喜勿喷...
1、页面常用的返回顶部
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>返回顶部</title><style type="text/css">*{margin: 0;padding: 0;}.wrap{height: 2000px;}.gotop{display: block;width: 32px;height: 32px;background-color: red;text-align: center;text-decoration: none;font-size: 14px;font-weight: bold;color: white;line-height: 32px;position: fixed;right:50px;bottom:50px; opacity: 0;/*top: 500px;*/}</style>
</head>
<body><div class="wrap"><a href="###" class="gotop">TOP</a></div><script type="text/javascript" src="jquery-1.11.3.min.js"></script><script type="text/javascript">$(function(){// 当滚动条滚动大于200时出现，未大于，消失
$(window).scroll(function(){if($(document).scrollTop()<200){// alert("kk");
$(".gotop").stop().animate({opacity: 0},1000)}else{$(".gotop").show().stop().animate({opacity: 1},1000)}})// 返回顶部
$(".gotop").on("click",function(){$("html,body").animate({scrollTop:0},1000)})})</script>
</body>
</html>2、tab切换 on
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>jQuery tab切换</title><style type="text/css">*{margin:0;padding:0;}.wrap{margin-left: 50px;margin-top: 50px;}/*清浮动---clearfix*/.clearfix {*zoom: 1;}.clearfix:after {content: "";clear: both;display: block;height: 0;font-size: 0;visibility: hidden;}.blist {border:1px solid #d9d9d9;width: 275px;height: 32px;}.blist li:first-child{border-left: none;}.blist li{list-style: none;width: 68px;height: 32px;border-left:1px solid #d9d9d9;font-size: 14px;font-family: "楷体";line-height: 32px;text-align: center;float: left;/*鼠标样式改变为一个手*/cursor: pointer;/*字体免选中*/-webkit-user-select: none;}.blsit-list{width: 275px;}.blsit-list li{list-style: none;width: 275px;border:1px solid #ccc;height: 200px;border-top: none;}.wrap .blist li.active{font-weight: bold;color: red;border-top: 2px solid red;position: relative;top:-1px;height: 31px; }.blsit-list li:first-child{display: block;}.blsit-list li{display: none;} </style>
</head>
<body><div class="wrap"><ul class="blist clearfix"><li class="active">电影</li><li>电脑</li><li>冰箱</li><li>空调</li></ul><ul class="blsit-list"><li>A</li><li>B</li><li>C</li><li>D</li></ul></div><div class="wrap"><ul class="blist clearfix"><li class="active">电影</li><li>电脑</li><li>冰箱</li><li>空调</li></ul><ul class="blsit-list"><li>A</li><li>B</li><li>C</li><li>D</li></ul></div><div class="wrap"><ul class="blist clearfix"><li class="active">电影</li><li>电脑</li><li>冰箱</li><li>空调</li></ul><ul class="blsit-list"><li>A</li><li>B</li><li>C</li><li>D</li></ul></div><div class="wrap"><ul class="blist clearfix"><li class="active">电影</li><li>电脑</li><li>冰箱</li><li>空调</li></ul><ul class="blsit-list"><li>A</li><li>B</li><li>C</li><li>D</li></ul></div><script type="text/javascript" src="jquery-1.11.3.min.js"></script><script type="text/javascript">$(function(){$(".blist").on("click","li",function(){// 设index为当前点击var index = $(this).index();// 点击添加样式利用siblings清除其他兄弟节点样式$(this).addClass("active").siblings().removeClass("active");// 同理显示与隐藏$(this).parents(".wrap").find(".blsit-list li").eq(index).show().siblings().hide();})})</script>
</body>
</html>
3、tab切换 mouseenter
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>jQuery tab切换</title><style type="text/css">*{margin:0;padding:0;}.wrap{margin-left: 50px;margin-top: 50px;}/*清浮动---clearfix*/.clearfix {*zoom: 1;}.clearfix:after {content: "";clear: both;display: block;height: 0;font-size: 0;visibility: hidden;}.blist {border:1px solid #d9d9d9;width: 275px;height: 32px;}.blist li:first-child{border-left: none;}.blist li{list-style: none;width: 68px;height: 32px;border-left:1px solid #d9d9d9;font-size: 14px;font-family: "楷体";line-height: 32px;text-align: center;float: left;/*鼠标样式改变为一个手*/cursor: pointer;/*字体免选中*/-webkit-user-select: none;}.blsit-list{width: 275px;}.blsit-list li{list-style: none;width: 275px;border:1px solid #ccc;height: 200px;border-top: none;}.wrap .blist li.active{font-weight: bold;color: red;border-top: 2px solid red;position: relative;top:-1px;height: 31px; }.blsit-list li:first-child{display: block;}.blsit-list li{display: none;} </style>
</head>
<body><div class="wrap"><ul class="blist clearfix"><li class="active">电影</li><li>电脑</li><li>冰箱</li><li>空调</li></ul><ul class="blsit-list"><li>A</li><li>B</li><li>C</li><li>D</li></ul></div><div class="wrap"><ul class="blist clearfix"><li class="active">电影</li><li>电脑</li><li>冰箱</li><li>空调</li></ul><ul class="blsit-list"><li>A</li><li>B</li><li>C</li><li>D</li></ul></div><div class="wrap"><ul class="blist clearfix"><li class="active">电影</li><li>电脑</li><li>冰箱</li><li>空调</li></ul><ul class="blsit-list"><li>A</li><li>B</li><li>C</li><li>D</li></ul></div><div class="wrap"><ul class="blist clearfix"><li class="active">电影</li><li>电脑</li><li>冰箱</li><li>空调</li></ul><ul class="blsit-list"><li>A</li><li>B</li><li>C</li><li>D</li></ul></div><script type="text/javascript" src="jquery-1.11.3.min.js"></script><script type="text/javascript">$(function(){$(".blist li").on("mouseenter",function(){var index = $(this).index();$(this).addClass("active").siblings().removeClass("active"); $(this).parents(".wrap").find(".blsit-list li").eq(index).show().siblings().hide();})})</script>
</body>
</html>
4、右栏菜单、
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>右侧栏菜单</title><style type="text/css">*{margin: 0;padding: 0;}.wrap{width: 500px;}.block{border:1px solid #ccc;margin: 20px 20px;}.rightMenu{position: fixed;right: 50px;top: 200px;/*opacity: 0;*/display: none;}.rightMenu li{list-style: none;display: block;width: 80px;height: 32px;line-height: 32px;text-align: center; border: 1px solid blue;margin: 5px 0px;}.rightMenu li a{text-decoration: none;color: black;}</style>
</head>
<body><div class="wrap"><div class="block block1"><h4>第一部分</h4><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab ea labore, doloremque eaque veritatis consectetur distinctio ipsam, perferendis cum expedita assumenda minus! Magnam itaque dolorum dignissimos, ullam asperiores! Deleniti, rem?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia porro assumenda voluptas exercitationem velit architecto nobis id odit ullam ut ex minima earum expedita distinctio nam culpa, harum, error veniam!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab ea labore, doloremque eaque veritatis consectetur distinctio ipsam, perferendis cum expedita assumenda minus! Magnam itaque dolorum dignissimos, ullam asperiores! Deleniti, rem?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia porro assumenda voluptas exercitationem velit architecto nobis id odit ullam ut ex minima earum expedita distinctio nam culpa, harum, error veniam!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab ea labore, doloremque eaque veritatis consectetur distinctio ipsam, perferendis cum expedita assumenda minus! Magnam itaque dolorum dignissimos, ullam asperiores! Deleniti, rem?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia porro assumenda voluptas exercitationem velit architecto nobis id odit ullam ut ex minima earum expedita distinctio nam culpa, harum, error veniam!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab ea labore, doloremque eaque veritatis consectetur distinctio ipsam, perferendis cum expedita assumenda minus! Magnam itaque dolorum dignissimos, ullam asperiores! Deleniti, rem?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia porro assumenda voluptas exercitationem velit architecto nobis id odit ullam ut ex minima earum expedita distinctio nam culpa, harum, error veniam!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab ea labore, doloremque eaque veritatis consectetur distinctio ipsam, perferendis cum expedita assumenda minus! Magnam itaque dolorum dignissimos, ullam asperiores! Deleniti, rem?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia porro assumenda voluptas exercitationem velit architecto nobis id odit ullam ut ex minima earum expedita distinctio nam culpa, harum, error veniam!</p> </div><div class="block block2"><h4>第二部分</h4><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab ea labore, doloremque eaque veritatis consectetur distinctio ipsam, perferendis cum expedita assumenda minus! Magnam itaque dolorum dignissimos, ullam asperiores! Deleniti, rem?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia porro assumenda voluptas exercitationem velit architecto nobis id odit ullam ut ex minima earum expedita distinctio nam culpa, harum, error veniam!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab ea labore, doloremque eaque veritatis consectetur distinctio ipsam, perferendis cum expedita assumenda minus! Magnam itaque dolorum dignissimos, ullam asperiores! Deleniti, rem?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia porro assumenda voluptas exercitationem velit architecto nobis id odit ullam ut ex minima earum expedita distinctio nam culpa, harum, error veniam!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab ea labore, doloremque eaque veritatis consectetur distinctio ipsam, perferendis cum expedita assumenda minus! Magnam itaque dolorum dignissimos, ullam asperiores! Deleniti, rem?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia porro assumenda voluptas exercitationem velit architecto nobis id odit ullam ut ex minima earum expedita distinctio nam culpa, harum, error veniam!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab ea labore, doloremque eaque veritatis consectetur distinctio ipsam, perferendis cum expedita assumenda minus! Magnam itaque dolorum dignissimos, ullam asperiores! Deleniti, rem?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia porro assumenda voluptas exercitationem velit architecto nobis id odit ullam ut ex minima earum expedita distinctio nam culpa, harum, error veniam!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab ea labore, doloremque eaque veritatis consectetur distinctio ipsam, perferendis cum expedita assumenda minus! Magnam itaque dolorum dignissimos, ullam asperiores! Deleniti, rem?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia porro assumenda voluptas exercitationem velit architecto nobis id odit ullam ut ex minima earum expedita distinctio nam culpa, harum, error veniam!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab ea labore, doloremque eaque veritatis consectetur distinctio ipsam, perferendis cum expedita assumenda minus! Magnam itaque dolorum dignissimos, ullam asperiores! Deleniti, rem?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia porro assumenda voluptas exercitationem velit architecto nobis id odit ullam ut ex minima earum expedita distinctio nam culpa, harum, error veniam!</p> </div><div class="block block3"><h4>第三部分</h4><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab ea labore, doloremque eaque veritatis consectetur distinctio ipsam, perferendis cum expedita assumenda minus! Magnam itaque dolorum dignissimos, ullam asperiores! Deleniti, rem?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia porro assumenda voluptas exercitationem velit architecto nobis id odit ullam ut ex minima earum expedita distinctio nam culpa, harum, error veniam!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab ea labore, doloremque eaque veritatis consectetur distinctio ipsam, perferendis cum expedita assumenda minus! Magnam itaque dolorum dignissimos, ullam asperiores! Deleniti, rem?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia porro assumenda voluptas exercitationem velit architecto nobis id odit ullam ut ex minima earum expedita distinctio nam culpa, harum, error veniam!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab ea labore, doloremque eaque veritatis consectetur distinctio ipsam, perferendis cum expedita assumenda minus! Magnam itaque dolorum dignissimos, ullam asperiores! Deleniti, rem?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia porro assumenda voluptas exercitationem velit architecto nobis id odit ullam ut ex minima earum expedita distinctio nam culpa, harum, error veniam!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab ea labore, doloremque eaque veritatis consectetur distinctio ipsam, perferendis cum expedita assumenda minus! Magnam itaque dolorum dignissimos, ullam asperiores! Deleniti, rem?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia porro assumenda voluptas exercitationem velit architecto nobis id odit ullam ut ex minima earum expedita distinctio nam culpa, harum, error veniam!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab ea labore, doloremque eaque veritatis consectetur distinctio ipsam, perferendis cum expedita assumenda minus! Magnam itaque dolorum dignissimos, ullam asperiores! Deleniti, rem?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia porro assumenda voluptas exercitationem velit architecto nobis id odit ullam ut ex minima earum expedita distinctio nam culpa, harum, error veniam!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab ea labore, doloremque eaque veritatis consectetur distinctio ipsam, perferendis cum expedita assumenda minus! Magnam itaque dolorum dignissimos, ullam asperiores! Deleniti, rem?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia porro assumenda voluptas exercitationem velit architecto nobis id odit ullam ut ex minima earum expedita distinctio nam culpa, harum, error veniam!</p> </div><div class="block block4"><h4>第四部分</h4><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab ea labore, doloremque eaque veritatis consectetur distinctio ipsam, perferendis cum expedita assumenda minus! Magnam itaque dolorum dignissimos, ullam asperiores! Deleniti, rem?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia porro assumenda voluptas exercitationem velit architecto nobis id odit ullam ut ex minima earum expedita distinctio nam culpa, harum, error veniam!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab ea labore, doloremque eaque veritatis consectetur distinctio ipsam, perferendis cum expedita assumenda minus! Magnam itaque dolorum dignissimos, ullam asperiores! Deleniti, rem?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia porro assumenda voluptas exercitationem velit architecto nobis id odit ullam ut ex minima earum expedita distinctio nam culpa, harum, error veniam!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab ea labore, doloremque eaque veritatis consectetur distinctio ipsam, perferendis cum expedita assumenda minus! Magnam itaque dolorum dignissimos, ullam asperiores! Deleniti, rem?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia porro assumenda voluptas exercitationem velit architecto nobis id odit ullam ut ex minima earum expedita distinctio nam culpa, harum, error veniam!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab ea labore, doloremque eaque veritatis consectetur distinctio ipsam, perferendis cum expedita assumenda minus! Magnam itaque dolorum dignissimos, ullam asperiores! Deleniti, rem?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia porro assumenda voluptas exercitationem velit architecto nobis id odit ullam ut ex minima earum expedita distinctio nam culpa, harum, error veniam!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab ea labore, doloremque eaque veritatis consectetur distinctio ipsam, perferendis cum expedita assumenda minus! Magnam itaque dolorum dignissimos, ullam asperiores! Deleniti, rem?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia porro assumenda voluptas exercitationem velit architecto nobis id odit ullam ut ex minima earum expedita distinctio nam culpa, harum, error veniam!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab ea labore, doloremque eaque veritatis consectetur distinctio ipsam, perferendis cum expedita assumenda minus! Magnam itaque dolorum dignissimos, ullam asperiores! Deleniti, rem?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia porro assumenda voluptas exercitationem velit architecto nobis id odit ullam ut ex minima earum expedita distinctio nam culpa, harum, error veniam!</p> </div></div><ul class="rightMenu"><li><a href="###">第一部分</a></li><li><a href="###">第二部分</a></li><li><a href="###">第三部分</a></li><li><a href="###">第四部分</a></li></ul><script type="text/javascript" src="jquery-1.11.3.min.js"></script><script type="text/javascript">$(function(){$(".rightMenu").on("click","li",function(){// alert($(this).index())var index = $(this).index();console.log(index);var t = $(".wrap .block").eq(index).offset().top$("html body").animate({scrollTop:t})})var h = $(".rightMenu").height();$(window).scroll(function(){if($(document).scrollTop()<200){// alert("kk");$(".rightMenu").stop().animate({height:0,opacity: 0},1000)}else{$(".rightMenu").show().stop().animate({height:h,opacity: 1},1000)}})})</script>
</body>
</html>
注：还需导入jQuery的插件
转载于:https://www.cnblogs.com/CaktyRiven/p/5239483.html
jQuery的几种简单实用效果相关推荐
- 抠图软件哪种好用？试试这几种简单实用的抠图工具
当我们在制作人物照片时,需要将人物抠出来,然后放置在不同的背景上,以达到不同的艺术效果.抠图可以让人物照片更加独特.美观,吸引更多的关注和欣赏.此外,有时候一张照片中会有一些瑕疵或者不需要的物品,需要 ...
- 一种简单实用的全屏方法
实现程序全屏幕显示的思路有很多种,最常见的一种就是: 1)利用Windows API提供的一个结构体WINDOWPLACEMENT来存储全屏显示前视图和主框架窗口在屏幕上的位置和显示信息.非客户区窗口 ...
- 录屏软件有哪些？分享几种简单实用的录屏工具
有哪些好用的录屏软件呢?如果你需要向他人展示如何操作一个软件或者如何进行某项任务,录制一个演示视频是非常有用的.你可以在视频中演示每个步骤,然后分享给你的观众.这对于教育和培训领域非常有用,因为它可以 ...
- html带正方形项目列表,5种简单实用的css列表样式实例，可以直接用到项目中。...
谁不希望有一个好看而又干净的列表?这篇文章中我们给出几个实用的例子,你可以把他们直接用到自己的工作中. 我们从一个带有动画效果的垂直列表开始,接着是一个图文混排的例子,然后是一个只有图片的list例子 ...
- 计算机页面排版的笔记,推荐6种简单实用的手绘笔记排版
大家好啊~万年拖更的我终于来更新文章了~ 前几天在朋友圈发布了某本书的手绘笔记后,获得了不少小伙伴的喜欢.有小伙伴表示看笔记比自己看书收获的知识还要多. 于是我整理了6种实用的手绘笔记排版方式分享给大 ...
- 曲线聚类_机器学习入门必读：6种简单实用算法及学习曲线、思维导图
来源:大数据DT 本文约3500字,建议阅读7分钟 本文为你介绍掌握机器领域知识的学习曲线.技术栈以及常用框架. [ 导读 ] 大部分的机器学习算法主要用来解决两类问题--分类问题和回归问题.在本文当 ...
- 机器学习入门必读：6种简单实用算法及学习曲线、思维导图
来源:大数据DT 本文约3500字,建议阅读7分钟 本文为你介绍掌握机器领域知识的学习曲线.技术栈以及常用框架. [ 导读 ] 大部分的机器学习算法主要用来解决两类问题--分类问题和回归问题.在本文当 ...
- jQuery的4种常见动画效果
jQuery 给我们封装了很多动画效果,其中最为常见的就是显示隐藏.滑动.淡入淡出和自定义动画.下面来看一下这些效果的使用方法. 1.显示隐藏效果 show([speed,[easing],[fn]] ...
- 世界公认最好的记忆方法_世界记忆大师：6种简单实用记忆方法，让孩子成为学霸中学霸...
绝大部分成绩好的孩子,都是与记忆力好坏相关,而成绩差的孩子也付出了相应的努力,但就是怎么学都学不好.当然了,这个世界是没有笨小孩,只要坚定信心,每天坚持记忆方法训练,每个孩子都可以成为一名学霸中的学霸 ...
最新文章
- Android 取得 ListView中每个Item项目的值
- oracle exp导出分区表,【实验】【PARTITION】exp导出分区表数据
- MyBatis Generator 学习
- java List接口
- Java中值传递和引用传递原理以及区别
- 选择排序和冒泡排序以及折半查找
- java代码查询索引文件实例_关于使用pdfbox的对PDF文件通过lucene生成索引文件IndexPDFFiles类代码示例...
- linux 查看各个用户下线程使用情况
- 课程设计之学生选课管理系统
- 电脑开机出现press f11 to start recovery system问题分析与解决
- 2022年上半年软考开始报名啦
- magisk卸载内置软件_安卓刷XP框架 手机通用通用（Magisk+Riru+EdXposed）
- 消元法解二元一次方程组c语言,消元法解二元一次方程组的概念、步骤与方法...
- 基于AI的恶意软件分类技术（4）
- 通过Python获取拉钩招聘网站的公司详细地址
- windows中的DOS命令及变量
- Linux系统管理（二）连网
- Express框架与Ajax应用
- 解决桌面图标无法拖动之绝招
- Luminati提供了哪些工具来帮助自动化操作？