一个简单的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 相关文章推荐
脚本吧 - 幻宇工作室用到js,超强推荐expand.js
Dec 23 Javascript
javascript instanceof 与typeof使用说明
Jan 11 Javascript
jQuery 动画弹出窗体支持多种展现方式
Apr 29 Javascript
jquery教程限制文本框只能输入数字和小数点示例分享
Jan 13 Javascript
jQuery使用prepend()方法在元素前添加内容用法实例
Mar 26 Javascript
实例详解AngularJS实现无限级联动菜单
Jan 15 Javascript
JavaScript如何实现组合列表框中元素移动效果
Mar 01 Javascript
浅谈vue中使用图片懒加载vue-lazyload插件详细指南
Oct 23 Javascript
详解JavaScript栈内存与堆内存
Apr 04 Javascript
JS如何调用WebAssembly编译出来的.wasm文件
Nov 05 Javascript
Vue中强制组件重新渲染的正确方法
Jan 03 Vue.js
JavaScript实现栈结构详细过程
Dec 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
星际实力自我测试
2020/03/04 星际争霸
php中array_column函数简单实现方法
2016/07/11 PHP
laravel 5.3中自定义加密服务的方案详解
2017/05/09 PHP
js cookies实现简单统计访问次数
2009/11/24 Javascript
jquery获取input表单值的代码
2010/04/19 Javascript
js下利用控制器载入对应脚本
2010/07/17 Javascript
ExtJs GridPanel简单的增删改实现代码
2010/08/26 Javascript
根据json字符串生成Html的一种方式
2013/01/09 Javascript
Knockout text绑定DOM的使用方法
2013/11/15 Javascript
谈谈对offsetleft兼容性的理解
2015/11/11 Javascript
js随机生成一个验证码
2017/06/01 Javascript
jQuery 表单序列化实例代码
2017/06/11 jQuery
form表单数据封装成json格式并提交给服务器的实现方法
2017/12/14 Javascript
Vue项目组件化工程开发实践方案
2018/01/09 Javascript
vuejs 制作背景淡入淡出切换动画的实例
2018/09/01 Javascript
vue项目动态设置页面title及是否缓存页面的问题
2018/11/08 Javascript
js瀑布流布局的实现
2020/06/28 Javascript
[03:23:49]2016.12.17日完美“圣”典全回顾
2016/12/19 DOTA
[01:00:11]DOTA2-DPC中国联赛 正赛 CDEC vs DLG BO3 第一场 2月7日
2021/03/11 DOTA
Python实现选择排序
2017/06/04 Python
简单实现python进度条脚本
2017/12/18 Python
Python实现基于C/S架构的聊天室功能详解
2018/07/07 Python
Python函数参数操作详解
2018/08/03 Python
使用Pandas对数据进行筛选和排序的实现
2019/07/29 Python
PIL对上传到Django的图片进行处理并保存的实例
2019/08/07 Python
tensorflow实现测试时读取任意指定的check point的网络参数
2020/01/21 Python
python正则过滤字母、中文、数字及特殊字符方法详解
2020/02/11 Python
python实现简单井字棋小游戏
2020/03/05 Python
python递归调用中的坑:打印有值, 返回却None
2020/03/16 Python
jupyter 使用Pillow包显示图像时inline显示方式
2020/04/24 Python
解决keras模型保存h5文件提示无此目录问题
2020/07/01 Python
戴森美国官网:Dyson美国
2016/09/11 全球购物
教师实习期自我鉴定
2013/10/06 职场文书
竞选劳动委员演讲稿
2014/04/28 职场文书
酒店采购员岗位职责
2015/04/03 职场文书
JavaScript控制台的更多功能
2021/04/28 Javascript