一个简单的JS鼠标悬停特效具体方法


Posted in Javascript onJune 17, 2013

首先,需加载jquery库(略过)。

其次,将下面 Javascript代码加到页面的头部:
 

<script type='text/javascript'>    
jQuery(document).ready(function($){    
$('a').hover(function()    
{    
$(this).stop().animate({'left': '5px'}, 'fast');    
}, function() {    
$(this).stop().animate({'left': '0px'}, 'fast');    
});    
});    
</script>   
 

第三,在样式中加入:
 
a {position:relative}  

完成。

简单定义下a:hover样式,貌似更简单:
 

a:hover {   padding: 0 0 0 8px;}   
 

只是不够自然而已。
Javascript 相关文章推荐
javascript 数组的方法集合
Jun 05 Javascript
jquery ajax 同步异步的执行示例代码
Jun 23 Javascript
使用jQuery.wechat构建微信WEB应用
Oct 09 Javascript
JavaScript类型系统之Object详解
Jan 07 Javascript
Angular2-primeNG文件上传模块FileUpload使用详解
Jan 14 Javascript
JavaScript设计模式之职责链模式应用示例
Aug 07 Javascript
vue实现多个元素或多个组件之间动画效果
Sep 25 Javascript
详解Vue一个案例引发「内容分发slot」的最全总结
Dec 02 Javascript
VUE v-model表单数据双向绑定完整示例
Jan 21 Javascript
解决vue 单文件组件中样式加载问题
Apr 24 Javascript
React学习之受控组件与数据共享实例分析
Jan 06 Javascript
Vue.js的模板语法详解
Feb 16 Javascript
js特效,页面下雪的小例子
Jun 17 #Javascript
js弹出窗口之弹出层的小例子
Jun 17 #Javascript
js弹出层包含flash 不能关闭隐藏的2种处理方法
Jun 17 #Javascript
JS简单的轮播的图片滚动实例
Jun 17 #Javascript
js模仿windows桌面图标排列算法具体实现(附图)
Jun 16 #Javascript
js模仿jquery的写法示例代码
Jun 16 #Javascript
$.getJSON在IE下失效的原因分析及解决方法
Jun 16 #Javascript
You might like
php中使用explode查找某个字符是否存在的方法
2011/07/12 PHP
搭建基于Docker的PHP开发环境的详细教程
2015/07/01 PHP
Yii多表联合查询操作详解
2016/06/02 PHP
magento后台无法登录解决办法的两种方法
2016/12/09 PHP
PHP实现表单提交数据的验证处理功能【防SQL注入和XSS攻击等】
2017/07/21 PHP
基于php双引号中访问数组元素报错的解决方法
2018/02/01 PHP
Jquery实现控件的隐藏和显示实例
2014/02/08 Javascript
提高jQuery性能优化的技巧
2015/08/03 Javascript
js实现对ajax请求面向对象的封装
2016/01/08 Javascript
javascript每日必学之运算符
2016/02/16 Javascript
VUE JS 使用组件实现双向绑定的示例代码
2017/01/10 Javascript
JavaScript实现创建自定义对象的常用方式总结
2018/07/09 Javascript
js中getter和setter用法实例分析
2018/08/14 Javascript
vue中axios请求的封装实例代码
2019/03/23 Javascript
js中async函数结合promise的小案例浅析
2019/04/14 Javascript
layui 实现table翻页滚动条位置保持不变的例子
2019/09/05 Javascript
layui监听下拉选框选中值变化的方法(包含监听普通下拉选框)
2019/09/24 Javascript
VUE动态生成word的实现
2020/07/26 Javascript
基于javascript的无缝滚动动画1
2020/08/07 Javascript
[01:10]为家乡而战!完美世界城市挑战赛全国总决赛花絮
2019/07/25 DOTA
python迭代器常见用法实例分析
2019/11/22 Python
python 实现在无序数组中找到中位数方法
2020/03/03 Python
Python使用Pyqt5实现简易浏览器(最新版本测试过)
2020/04/27 Python
Python中关于logging模块的学习笔记
2020/06/03 Python
2021年值得向Python开发者推荐的VS Code扩展插件
2021/01/25 Python
英国最好的温室之家:Greenhouses Direct
2019/07/13 全球购物
eBay荷兰购物网站:eBay.nl
2020/06/26 全球购物
公司请假条格式
2014/04/11 职场文书
社会公德演讲稿
2014/05/20 职场文书
我们的节日国庆活动方案
2014/08/19 职场文书
党的群众路线对照检查材料
2014/08/27 职场文书
交通事故赔偿协议书
2014/10/16 职场文书
化工见习报告范文
2014/10/31 职场文书
2015年城管个人工作总结
2015/05/15 职场文书
毕业生登记表班级意见
2015/06/05 职场文书
Python使用mitmproxy工具监控手机 下载手机小视频
2022/04/18 Python