一个简单的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 相关文章推荐
this和执行上下文实现代码
Jul 01 Javascript
jQuery基本选择器选择元素使用介绍
Apr 18 Javascript
仿谷歌主页js动画效果实现代码
Jul 14 Javascript
JS 获取鼠标左右键的键值方法
Oct 11 Javascript
详解JavaScript中的forEach()方法的使用
Jun 08 Javascript
javascript 使用正则test( )第一次是 true,第二次是false
Feb 22 Javascript
基于JavaScript实现验证码功能
Apr 01 Javascript
ES6解构赋值实例详解
Oct 31 Javascript
原生js实现获取form表单数据代码实例
Mar 27 Javascript
JavaScript如何借用构造函数继承
Nov 06 Javascript
Vue 解决在element中使用$notify在提示信息中换行问题
Nov 11 Javascript
JavaScript 判断浏览器是否是IE
Feb 19 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 删除记录实现代码
2009/03/12 PHP
PHP 动态随机生成验证码类代码
2010/04/09 PHP
php实现背景图上添加圆形logo图标的方法
2016/11/17 PHP
Laravel数据库读写分离配置的方法
2019/10/13 PHP
JQuery jsonp 使用示例代码
2009/08/12 Javascript
Dojo 学习笔记入门篇 First Dojo Example
2009/11/15 Javascript
js控制浏览器全屏示例代码
2014/02/20 Javascript
多种JQuery循环滚动文字图片效果代码
2020/06/23 Javascript
node.js 中间件express-session使用详解
2017/05/20 Javascript
微信小程序选择图片和放大预览图片功能
2017/11/02 Javascript
Windows上node.js的多版本管理工具用法实例分析
2019/11/06 Javascript
[01:02:18]VGJ.S vs infamous Supermajor 败者组 BO3 第一场 6.4
2018/06/05 DOTA
Python ORM框架SQLAlchemy学习笔记之映射类使用实例和Session会话介绍
2014/06/10 Python
Python脚本实现下载合并SAE日志
2015/02/10 Python
python获取目录下所有文件的方法
2015/06/01 Python
python脚本内运行linux命令的方法
2015/07/02 Python
Python3 适合初学者学习的银行账户登录系统实例
2017/08/08 Python
Python3基于sax解析xml操作示例
2018/05/22 Python
python 读取摄像头数据并保存的实例
2018/08/03 Python
tensorflow求导和梯度计算实例
2020/01/23 Python
python实现五子棋程序
2020/04/24 Python
基于Modernizr 让网站进行优雅降级的分析
2013/04/21 HTML / CSS
加拿大奢华时装品牌:Mackage
2018/01/10 全球购物
HEMA英国:荷兰原创设计
2018/08/28 全球购物
天网面试题
2013/04/07 面试题
高三自我鉴定范文
2013/10/19 职场文书
中西医专业毕业生职业规划书
2014/02/24 职场文书
2014年乡镇卫生院工作总结
2014/11/24 职场文书
小学教研工作总结2015
2015/05/13 职场文书
辩护词范文大全
2015/05/21 职场文书
创业计划书之家教托管
2019/09/25 职场文书
【HBU】数据库第四周 单表查询
2021/04/05 SQL Server
Python排序算法之插入排序及其优化方案详解
2021/06/11 Python
用php如何解决大文件分片上传问题
2021/07/07 PHP
JavaScript实现栈结构详细过程
2021/12/06 Javascript
Html5获取用户当前位置的几种方式
2022/01/18 HTML / CSS