随笔分类 -  jQuery

轮播图案例
摘要：轮播图:图片会自动切换,点击按钮或者下面的圆圈,也能实现自动切换。 代码: yrzx.css: img{ width: 728px; height: 500px;}h1{ text-align: center;}body{ margin: 0; padding: 0; font-size: 16px 阅读全文
posted @ 2022-05-08 18:56 努力学爪哇 阅读(75) 评论(0) 推荐(0)
西游记手风琴案例
摘要：手风琴效果就是，鼠标经过时，它会展开，鼠标离开时，它会收缩。 手风琴效果的特点：每次只展开一个元素，其他的兄弟元素都闭合。 代码: <!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>西游记人物手风琴效果</title> <sty 阅读全文
posted @ 2022-05-05 16:03 努力学爪哇 阅读(66) 评论(0) 推荐(0)
锦旗动态案例
摘要：想要锦旗动起来,应该怎么办呢? 那就要用到我们的animate()方法了。 animate() 方法执行 CSS 属性集的自定义动画。 定义和用法: animate() 方法执行 CSS 属性集的自定义动画。 该方法通过CSS样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的，这样就可以 阅读全文
posted @ 2022-05-03 19:20 努力学爪哇 阅读(113) 评论(0) 推荐(0)
购物网站导航条案例
摘要：代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="jquery-3.4.1.js"></script> <style> * { margin: 阅读全文
posted @ 2022-05-02 22:43 努力学爪哇 阅读(27) 评论(0) 推荐(0)
实现手机滑动效果
摘要：应该怎么实现手机滑动效果呢? 需要使用slideUp() 方法和slideDown() 方法. slideUp() 方法以滑动方式隐藏被选元素 参数:speed 可选。 规定滑动效果的速度。 可能的值： 毫秒 "slow" "fast" easing可选 规定在动画的不同点上元素的速度。默认值为 " 阅读全文
posted @ 2022-05-01 17:02 努力学爪哇 阅读(195) 评论(0) 推荐(0)
点亮灯案例
摘要：想要实现开灯效果，应该怎么办呢？ 那就要用到fadeTo() 方法 fadeTo() 方法逐渐改变被选元素的不透明度为指定的值（褪色效果）。 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Docum 阅读全文
posted @ 2022-05-01 15:19 努力学爪哇 阅读(44) 评论(0) 推荐(0)
星级评价案例
摘要：星级评价:网上购物订单完成后,一般会显示评价功能。 最常见的评价方式就是星级评价,点亮的星星越多,表示用户的满意度越高 那么它是如何实现的呢??? 让我们一起看看代码 代码: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> < 阅读全文
posted @ 2022-04-19 00:07 努力学爪哇 阅读(105) 评论(0) 推荐(0)
沁园春.雪(阻止事件冒泡)案例
摘要：代码: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> .detail-box{ width: 600px; } .detail-tit 阅读全文
posted @ 2022-04-16 15:20 努力学爪哇 阅读(38) 评论(0) 推荐(0)
键盘控制元素移动案例
摘要：想要实现键盘控制图片移动该怎么办呢? 1.需要获取键盘2.需要获取图片坐标 代码如下: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="jq+img/jque 阅读全文
posted @ 2022-04-05 19:02 努力学爪哇 阅读(47) 评论(0) 推荐(0)
Tab栏切换案例
摘要：想要实现鼠标点击Tab栏,然后它就会显示想要的效果。 实现代码: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Tab栏切换效果</title> <script src="jq+img/jquery-3.6.0 阅读全文
posted @ 2022-04-03 16:27 努力学爪哇 阅读(200) 评论(0) 推荐(0)
高亮显示图片案例(链式编程)
摘要：实现鼠标经过谁就高练度显示，不经过时，全部高亮度显示。 代码: <!DOCTYPE html> <html lang="en"><head> <meta charset="UTF-8"> <title>高亮显示图片</title> <style type="text/css"> img{width: 阅读全文
posted @ 2022-03-28 21:07 努力学爪哇 阅读(109) 评论(0) 推荐(0)
西游记案例(排他思想+链式编程)
摘要：想实现鼠标经过西游记里的谁就显示谁,应该怎么办呢？ 那就得用到昨天说的排他思想了，干掉所有人，设置我自己，先将所有人全设置为"",然后再设置当前的值。 代码: <!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>链式编程-西游记</ti 阅读全文
posted @ 2022-03-27 15:20 努力学爪哇 阅读(64) 评论(0) 推荐(0)
jQuery排他思想+链式编程
摘要：排他思想:干掉所有人，设置我自己，先将所有人全设置为"",然后再设置当前的值 也就是:先排除掉其他的(包括自己) ，最后再给自己(this)加想要的效果。 代码: <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>排他思想</tit 阅读全文
posted @ 2022-03-26 20:25 努力学爪哇 阅读(103) 评论(0) 推荐(0)