图标特效

页面渲染

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><style>*{margin: 0;padding: 0;}ul{list-style: none;width: 400px;height: 250px;border: 1px solid #000;margin: 100px auto;}ul>li{width: 100px;height: 50px;margin-top: 50px;text-align: center;float: left;overflow: hidden;}ul>li>span{display: inline-block;width: 24px;height: 24px;background: url("images/bg.png") no-repeat 0 0;position: relative;}</style><script src="js/jquery-1.12.4.js"></script>
</head>
<body>
<ul><li><span></span><p>百度</p></li><li><span></span><p>淘宝</p></li><li><span></span><p>微博</p></li><li><span></span><p>网易</p></li><li><span></span><p>搜狐</p></li><li><span></span><p>腾讯</p></li><li><span></span><p>优酷</p></li><li><span></span><p>京东</p></li>
</ul>
</body>
</html>

JS--demo

思路：

1.遍历所有的li
1.1生成新的图片位置
1.2设置新的图片位置
2.监听li移入事件
2.1将图标往上移动
2.2将图片往下移动
2.3将图片复位

$(function () {
// 1.遍历所有的li
$("li").each(function (index, ele) {// 1.1生成新的图片位置var $url = "url(\"images/bg.png\") no-repeat 0 "+(index * -24)+"px"// 1.2设置新的图片位置$(this).children("span").css("background", $url);
});// 2.监听li移入事件
$("li").mouseenter(function () {// 2.1将图标往上移动$(this).children("span").animate({top: -50}, 1000, function () {// 2.2将图片往下移动$(this).css("top", "50px");// 2.3将图片复位$(this).animate({top: 0}, 1000);});
});
});

主要使用了 children子节点，然后使用animate方法进行图片特效实现

Mr.J-- jQuery学习笔记(十九)--自定义动画实现图标特效相关推荐

Mr.J-- jQuery学习笔记(十八)--自定义动画
animate(params,[speed],[easing],[fn]) 概述用于创建自定义动画的函数. 这个函数的关键在于指定动画形式及结果样式属性对象.这个对象中每个属性都表示一个可以变化的样 ...
angular学习笔记(十九)-自定义指令修改dom
使用angular指令可以自己扩展html语法,还可以做很多自定义的事情.在后面会专门讲解这一块的知识,这一篇只是起到了解入门的作用. 与控制器,过滤器,服务,一样,可以通过模块实例的directiv ...
Polyworks脚本开发学习笔记(十九)-将数据对象与参考对象对齐的方法
Polyworks脚本开发学习笔记(十九)-将数据对象与参考对象对齐的方法把开发手册理了一遍,发现还有几个点没有记录下来,其中一个就是使用点对的粗对齐和使用参考目标的精确对齐.为了把这个学习笔记凑够 ...
步步为营 .NET 设计模式学习笔记十九、Chain of Responsibility(职责链模式)
概述在软件构建过程中,一个请求可能被多个对象处理,但是每个请求在运行时只能有一个接受者,如果显示指定,将必不可少地带来请求发送者与接受者的紧耦合. 如何使请求的发送者不需要指定具体的接受者?让请求的 ...
jQuery 学习笔记之九 (jQuery 图片提示 )
案例研究网站的超链接和图片提示1.超级链接提示效果浏览器已经自带了超级链接提示,只需要在超链接中加入title属性就可以了.HTML 代码如下:<a href="#" ti ...
python 学习笔记十九 django深入学习四 cookie,session
缓存一个动态网站的基本权衡点就是,它是动态的. 每次用户请求一个页面,Web服务器将进行所有涵盖数据库查询到模版渲染到业务逻辑的请求,用来创建浏览者需要的页面.当程序访问量大时,耗时必然会更加明显, ...
【theano-windows】学习笔记十九——循环神经网络
前言前面已经介绍了RBM和CNN了,就剩最后一个RNN了,抽了一天时间简单看了一下原理,但是没细推RNN的参数更新算法BPTT,全名是Backpropagation Through Time. [注 ...
javascript学习笔记(十九) 节点的操作
包括节点的创建.添加.移除.替换.复制本节要用到的html例子 1 <ul id="myList"> 2 <li>项目一</li> 3 < ...
乐优商城学习笔记十九-商品详情（二）
2.页面静态化 2.1.简介 2.1.1.问题分析现在,我们的页面是通过Thymeleaf模板引擎渲染后返回到客户端.在后台需要大量的数据查询,而后渲染得到HTML页面.会对数据库造成压力,并且请求 ...

Mr.J-- jQuery学习笔记(十九)--自定义动画实现图标特效

图标特效

页面渲染

JS--demo

Mr.J-- jQuery学习笔记(十九)--自定义动画实现图标特效相关推荐

最新文章

热门文章