基于jQuery制作小图标上下滑动特效

86493365 2017-01-18

一个小图标特效，挺有趣的，代码也很容易懂。

 jQ小图标上下滑动特效：

基于jQuery制作小图标上下滑动特效

代码如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
  </head>
  <link rel="stylesheet" href="css/normalize.css">
  <style>
   .tubiao{
    width: 300px;
    height: 100px;
    margin: 100px auto;
   }
   a{
    position: relative;
    padding: 10px;
    display: inline-block;
    text-decoration: none;
    color: #000;
    text-align: center;
   }
   i{
    position: absolute;
    left: 5px;
    top: -20px;
    opacity: 1;
   }
  </style>
  <body>
    <div class="tubiao">
      <a href="#"><i><img src="imges/小图标/1.png" alt="1" ></i><p>我的</p></a>
      <a href="#"><i><img src="imges/小图标/2.png" alt="2" ></i><p>你的</p></a>
      <a href="#"><i><img src="imges/小图标/3.png" alt="3" ></i><p>他的</p></a>
      <a href="#"><i><img src="imges/小图标/4.png" alt="4" ></i><p>好的</p></a>
      <a href="#"><i><img src="imges/小图标/5.png" alt="5" ></i><p>坏的</p></a>
    </div>/*css和html不解释*/
    <script src="js库/jquery.js"></script>/*jquery库，路径这里用汉字，我是看的方便，实际建议用英文*/
    <script>
      $(function(){
        $("a").mouseenter(function(){<br>                /*mouseenter和mouseover 都是 触摸事件，前者是不冒泡，后者必然冒泡，解释还是有点差强人意，前者也会发生不一样的情况，就是超出子元素范围，点在祖先元素还是会发生*/
          $(this).find("i").stop().animate({top:"-30px",opacity:"0"},300,function(){ <br>                   /*这里关键说一个，就是在anmiate()前面加stop(),是取消上一次事件，再继续，接下来的*/
            $(this).css({top:"-15px"});<br>                        /*这里是再次出现的关键，就是因为opacity是0嘛，我们就先悄悄的把top值，移到正常位置的下面一点点，然后再让他出现，即产生了绕了180deg的错觉*/
            $(this).animate({top:"-20px",opacity:"1"},300)
          });
        })
      })
    </script>
  </body>
</html>
86493365

86493365

相关推荐

jQuery UI组件库使用技巧小分享，让移动、Web界面开发更简单！

Kendo UI目前最新提供Kendo UI for jQuery、Kendo UI for Angular、Kendo UI Support for React和Kendo UI Support for Vue四个控件。Kendo UI for jQue

EdwardSiCong / 0评论 2020-11-23

详解Vue数据驱动原理

Vue区别于传统的JS库，例如JQuery，其中一个最大的特点就是不用手动去操作DOM，只需要对数据进行变更之后，视图也会随之更新。比如你想修改div#app里的内容:. 在代码层面上的最大区别就是，JQuery直接对DOM进行了操作，而Vue则对数据进行

85477104 / 0评论 2020-11-17

JavaScript枚举选择jquery插件代码实例

聪明的朋友马上想出办法：用两个选项为周一到周日的下拉列表实现，对 那样可以，但是我觉得不够友好，所以利用业余时间写下了这个jQuery小插件。weeks: [{ text: '一', value: 2 }, { text: '二', value: 3 },

hhanbj / 0评论 2020-11-17

7个 jQuery上手项目，Github超千人star

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功

81427005 / 0评论 2020-11-11

jQuery实现带进度条的轮播图

margin: 0;padding: 0;list-style: none;width: 100%;height: 600px;position: relative;width: 100%;height: 600px;position: absolute;

seoppt / 0评论 2020-09-13

jQuery实现鼠标拖拽登录框移动效果

<script src="js/jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script>. $(&

honeyth / 0评论 2020-09-13

jquery实现简易验证插件封装

<input type="text" id="username" name="username" tabindex="1" class="format-inpu

WRITEFORSHARE / 0评论 2020-09-13

jQuery实现朋友圈查看图片

<a href="images/img1-large.png" style="background-image:url" title="图片一"></a>

84483065 / 0评论 2020-09-11

jQuery实现日历效果

jquery是用的是2.0版本。--基于W3C标准 不用做任何修改-->. --设置初始化文档信息和文档管理标注-->. --整个页面编码 utf-8 国际编码 通用性最强，GBK/gb2312 中文-->. .signincalenda

momode / 0评论 2020-09-11

jQuery中event.target和this的区别详解

　　1.js中事件是会冒泡的，所以this是可以变化的，但event.target不会变化，它永远指向触发事件的DOM元素本身；　　2.this和event.target都是dom对象，使用jQuey中的方法可以将他们转换为jquery对象：$和$.比如,

85477104 / 0评论 2020-08-15

9.jQuery初识—选择器、效果

书写繁琐，代码量大。动画效果很难实现。使用定时器，要小心各种定时器的清除。各种操作和处理事件不好实现。浏览器的兼容性。jQuery简化了AJAX操作，后端只需返回一个JSON格式的字符串就能完成与前端的通信。插件扩展开发，jQuery有着丰富的第三方插件，

83510998 / 0评论 2020-08-08

Kendo UI for jQuery数据管理使用教程：PDF导出（二）

Kendo UI目前最新提供Kendo UI for jQuery、Kendo UI for Angular、Kendo UI Support for React和Kendo UI Support for Vue四个控件。Kendo UI for jQue

82550495 / 0评论 2020-08-03

JQuery 06 属性

区别在于，对于自定义属性和选中属性的处理。选中属性指的是 checked,selected 这2种属性1. 对于自定义属性 attr能够获取，prop不能获取2. 对于选中属性attr只能获取初始值， 无论是否变化prop 能够访问变化后的值，并且以tru

tthappyer / 0评论 2020-08-03

取代Jquery，用Vue 构建Bootstrap 4 应用

尽管前端程序现在发展迅速，各种框架层出不穷，但是对广大非前端码农来说构建Web界面的最好的选择仍然还是Bootstrap 4。但是Bootstrap依赖于已经严重过时，被抛弃的jQuery组件，那么如何解决这个问题就迫在眉睫了。Vue项目以其轻巧、高性能，

84901334 / 0评论 2020-07-28

隐式迭代---ES5的数组方法以及jQuery的方法调用

对于选择器筛选的dom元素，比如$是一个伪数组jq对象，存放的dom元素，当执行addClass方法，对于每个dom元素都执行此方法，在方法的内部会为匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们再进行循环，简化我们的操作，方便我们调用如果获取的

tthappyer / 0评论 2020-07-25

jQuery Ajax 操作函数汇总

jQuery 库拥有完整的 Ajax 兼容套件。执行异步 HTTP 请求。当 Ajax 请求完成时注册要调用的处理程序。在 Ajax 请求发送之前显示一条消息。使用 HTTP POST 请求从服务器加载数据。

TONIYH / 0评论 2020-07-22

jQuery validate验证表单隐藏域

function validInfoForm(){ return $.validate({ ignore : "",//验证隐藏域,解决切换标签后隐藏域无法验证问题 rules: { oldPassword: { requi

tztzyzyz / 0评论 2020-07-20

asp.net 利用Ajax和Jquery在前台向后台传参数并返回值

public static string GetValueAjax//这个方法需要是静态的方法要用到关键字static. json=" + username,//ajaxtest.ashx为目标文件

83510998 / 0评论 2020-07-18

Ant-design中使用jQuery

‘window.jQuery‘: ‘jquery‘,上面代码使用了 webpack 的 ProvidePlugin 插件，这个插件在加载某个模块时，如果遇到了未定义的并且在配置文件中配置了的变量，比如上面代码看到的 $、jquery、jQuery、wind

81463166 / 0评论 2020-07-17

56-58-前端-jQuery

python导入模块发生了哪些事？"""我不想下载jQuery文件 能不能使用呢？w.fn.init [p.c1, prevObject: w.fn.init]0: p.c1length: 1prevObject: w.fn.

tztzyzyz / 0评论 2020-07-05

jQuery ajax - ajax() 方法中的一些属性

jQuery ajax - ajax() 方法中的一些属性

Web全栈笔记 / 0评论 2020-07-06

jQuery.extend 函数使用详解【转】

Jquery的扩展方法extend是我们在写插件的过程中常用的方法，该方法有一些重载原型，在此，我们一起去了解了解。它的含义是将src1,src2,src3...合并到dest中,返回值为合并后的dest,由此可以看出该方法合并后，是修改了dest的结构的

tthappyer / 0评论 2020-07-04

jquery基本用法

<script src="jquery.js"></script> //jquery.js 导入本地文件路径。var d1 = $; -- 得到jquery对象 -- jQuery.fn.init[div#d1

87281248 / 0评论 2020-07-04

jquery-实现加入购物车效果

jquery中提供了很多方便的方法，本案例使用jquery的动画、获取鼠标手机位置、创建dom以及删除dom等方法，实现加入购物车，即点击当前物品滑入购物车

87281248 / 0评论 2020-07-04

jQuery基础及选择器2

$.css;//同辈元素选择器。$.css;//a标签带有class属性

e度空间 / 0评论 2020-06-28

jQuery方法（1）

　　jq是将原生js中的DOM操作全部封装了，可以增删改查，添加事件、修改内容样式、ajax事件、js动画。　　8.找到某个元素的所有结构父级，直到html为止：$.parents()//找到索引为3的li所有父级。　　　　$.find//找到div标签下

82244951 / 0评论 2020-06-28

JQuery之事件

- blur 失去焦点事件。- mouseenter 鼠标进入事件。- change 改变事件，如：文本框值改变，下拉列表值改变等。- keydown 键盘按下事件。最早采用的是 bind、delegate等方式绑定的。jQuery 1.7版本后，jQue

delmarks / 0评论 2020-06-28

jQuery基础及选择器（二）

同辈元素选择器$.css;$.css;//a标签带有class属性。<input name="show" type="button" value="显示隐藏的P元素" id="s

89510194 / 0评论 2020-06-27

jquery获取动态修改后的data值，data()函数不能获取最新的数据

但是动态修改过以后，使用data方法，一直都是以前的值。$.on(‘change keyup changed‘, ".fieldlistsub input.neibu,.fieldlistsub textarea.neibu,.fieldlist

89510194 / 0评论 2020-06-27

Jquery属性和元素操作，ajax

after() 在备选元素之后插入内容，同步即指一件事干完之后再干下一件事，这是在设计ajax时基于安全的考虑，其实就相当于从页面上发送http请求，先通过js代码加密，然后通过ajax发送请求。dataType:‘json‘, // 期望后台返回的数

wcqwcq / 0评论 2020-06-26

TypeScript（20）： 声明文件

TypeScript 作为 JavaScript 的超集，在开发过程中不可避免要引用其他第三方的 JavaScript 的库。虽然通过直接引用可以调用库的类和方法，但是却无法使用TypeScript 诸如类型检查等特性功能。为了解决这个问题，需要将这些库里

88570299 / 0评论 2020-06-26

jquery: carousel arrow click

实现原理：父元素为定宽定高相对定位，且overflow：hidden，子元素为绝对定位高度继承父元素，宽度可计算或设置一个大值，通过绝对定位的left来决定显示的子元素

小仙儿 / 0评论 2020-06-25

025_为什么JavaScript变量以美元符号开头?

jquery中的一个非常常见的用途是将存储在变量中的jquery对象与其他变量区分开来。var $email = $; // refers to the jQuery object representation of the dom object. var

88570299 / 0评论 2020-06-18

Vue 中引入jquery

在vue2中引用jq，如下

Web全栈笔记 / 0评论 2020-06-15

Jquery中的Ajax

jQuery 提供多个与 AJAX 有关的方法。通过 jQuery AJAX 方法，您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON - 同时您能够把这些外部数据直接载入网页的被选元素中。至于技术

delmarks / 0评论 2020-06-14

jQuery部分选择器示例

jQuery是目前最流行的JavaScript程序库，它是对JavaScript对象和函数的封装。它能做的JavaScript也都能做，但使用jQuery能大幅提高开发效率。=test]").css;});});二、通过过滤选择器选择元素1.基本

牵手白首 / 0评论 2020-06-14

基于bootstrap的jQuery多级列表树插件-解决父子节点勾选状态联动

① 如果勾选了父级节点，怎么让子节点全部变为勾选状态？③若果子节点都取消了，怎么让所有父节点都变为未选择状态？.htmleaf-header{margin-bottom: 15px;font-family: "Segoe UI", &q

83510998 / 0评论 2020-06-14

Jquery ajax书写方法代码实例解析

Ajax在前端的应用极其广泛，因此，我们有必要对其进行总结，以方便后期的使用。　　可以异步请求服务器的数据，实现页面数据的实时动态加载， 在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。jquery在全局对象jquery绑定了ajax

ppsurcao / 0评论 2020-06-14

jquery隐式迭代（遍历内部dom元素） jquery设置样式方法

jquery设置样式方法。jquery隐式迭代

SIMONDOMAIN / 0评论 2020-06-14

css: jquery login status control

<span class="actived">手机动态码登录</span>. <span>账号密码登录</span>. <input type="text" pla

tianzyc / 0评论 2020-06-13

jQuery模糊匹配checkbox全选 value实现checkbox部分或全部全选

在工作中经常会用到checkbox的全选功能，平时大家用得最多的全选和反选是第一种，一般都是基于全部名称相同的checkbox进行实现，这种全选比较简单。$.attr;//全选所有id前缀为new的checkbox

82244951 / 0评论 2020-06-12

jQuery 最新版 和 jquery-1.12.3下载

[写的更少，做的更多。因为，jQuery 从第二个大版本开始，已经不支持低版本IE了。

89510194 / 0评论 2020-06-11

Uncaught TypeError: $(...).on is not a function

今天写个页面，引入了几个轮子。结果运行发现，jQuery的on方法，结果报错了：Uncaught TypeError: $(...).on is not a function. 网上查了一下，发现是 引入的 jQuery版本的问题。简单分析了一下，为什么会

83510998 / 0评论 2020-06-11

jquery根据name属性查找

$ 选择所有的name属性等于‘keleyicom‘的input元素。$ 可以使用多个属性进行联合选择，该选择器是得到所有的含有id属性并且那么属性以keleyi结尾的元素根据name取值：$.val()根据id取值:. -----jquery添加删除样式

开心就好 / 0评论 2020-06-10

bili之前端超神之路jquery1004

jquery的使用：函数使用，对象使用

88570299 / 0评论 2020-06-08

JQuery使用Ajax调用后台方法

data: "{‘str‘:‘aaa‘,‘str2‘:‘bbb‘}",

春雨的雕刻时光 / 0评论 2020-06-08

jQuery-事件

// 当页面框架加载完成之后，执行内部代码。// 触发事件时，都会执行此匿名函数。$代表当前触发的标签。

83510998 / 0评论 2020-06-07

jQuery中的Ajax

data: { name: ‘zhangsan‘, age: ‘20‘ },如果想要传递json格式的属性，需要将contentType设置为application/json，并且在data属性中传递一个json字符串。beforesend方法允许我们在请

tthappyer / 0评论 2020-06-07

jQuery Mobile 表单

jQuery Mobile 会自动为 HTML 表单自动添加样式，让它们看起来更具吸引力，触摸起来更具友好性。每个表单元素必须有一个唯一的 "id" 属性。这是因为 jQuery Mobile 的单页导航机制使得多个不同页面在同一时间被

delmarks / 0评论 2020-06-07

jQuery Mobile 表单滑动条

<form method="post" action="demoform.php"><label for="points">进度:</label><inp

牵手白首 / 0评论 2020-06-07