一个简单的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 相关文章推荐
基于jQuery的淡入淡出可自动切换的幻灯插件
Aug 24 Javascript
使用JavaScript检测Firefox浏览器是否启用了Firebug的代码
Dec 28 Javascript
Javascript 倒计时源代码.(时.分.秒) 详细注释版
May 09 Javascript
探讨javascript是不是面向对象的语言
Nov 21 Javascript
JQuery为页面Dom元素绑定事件及解除绑定方法
Apr 23 Javascript
javascript与有限状态机详解
May 08 Javascript
JavaScript必知必会(五) eval 的使用
Jun 08 Javascript
关于使用js算总价的问题
Jun 23 Javascript
Three.js利用Detector.js插件如何实现兼容性检测详解
Sep 26 Javascript
javascript中的replace函数(带注释demo)
Jan 07 Javascript
vue实现导航菜单和编辑文本的示例代码
Jul 04 Javascript
解决vue字符串换行问题(绝对管用)
Aug 06 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中通过ADODB库实现调用Access数据库之修正版本
2006/12/31 PHP
PHPCMS忘记后台密码的解决办法
2016/10/30 PHP
for 循环性能比较 提高for循环的效率
2009/03/19 Javascript
jquery计算鼠标和指定元素之间距离的方法
2015/06/26 Javascript
JavaScript制作简单的日历效果
2016/03/10 Javascript
jQuery实现鼠标滑过图片移动特效
2016/12/08 Javascript
react.js CMS 删除功能的实现方法
2017/04/17 Javascript
让微信小程序支持ES6中Promise特性的方法详解
2017/06/13 Javascript
angularjs2中父子组件的数据传递的实例代码
2017/07/05 Javascript
javascript 面向对象实战思想分享
2017/09/07 Javascript
微信小程序实现简单input正则表达式验证功能示例
2017/11/30 Javascript
微信小程序实现的贪吃蛇游戏【附源码下载】
2018/01/03 Javascript
引入外部js脚本加载慢与页面白屏问题的解决
2018/12/10 Javascript
Vue 实现CLI 3.0 + momentjs + lodash打包时优化
2019/11/13 Javascript
Vue 解决父组件跳转子路由后当前导航active样式消失问题
2020/07/21 Javascript
[01:02:34]TFT vs VGJ.T Supermajor 败者组 BO3 第二场 6.5
2018/06/06 DOTA
python实现在windows服务中新建进程的方法
2015/06/30 Python
对numpy数据写入文件的方法讲解
2018/07/09 Python
python hook监听事件详解
2018/10/25 Python
PyQt QListWidget修改列表项item的行高方法
2019/06/20 Python
30行Python代码实现高分辨率图像导航的方法
2020/05/22 Python
Python实现验证码识别
2020/06/15 Python
Selenium webdriver添加cookie实现过程详解
2020/08/12 Python
使用CSS3实现SVG路径描边动画效果入门教程
2019/10/21 HTML / CSS
关于解决iframe标签嵌套问题的解决方法
2020/03/04 HTML / CSS
联想新加坡官方网站:Lenovo Singapore
2017/10/24 全球购物
美国一站式电动和手动工具商店:International Tool
2020/11/26 全球购物
Linux面试经常问的文件系统操作命令
2016/10/04 面试题
网络程序员自荐信
2014/01/25 职场文书
十佳青年个人事迹材料
2014/01/28 职场文书
公司晚会策划方案
2014/05/17 职场文书
初中班级口号
2014/06/09 职场文书
委托培训协议书
2014/11/17 职场文书
法学专业求职信范文
2015/03/19 职场文书
好段摘抄大全(48句)
2019/08/08 职场文书
2019年教师节祝福语精选,给老师送上真诚的祝福
2019/09/09 职场文书