一个简单的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关闭父窗口时关闭子窗口
Apr 01 Javascript
js获取GridView中行数据的两种方法 分享
Jul 13 Javascript
IE下写xml文件的两种方式(fso/saveAs)
Aug 05 Javascript
原生javascript图片自动或手动切换示例附演示源码
Sep 04 Javascript
在JavaScript中处理时间之getHours()方法的使用
Jun 10 Javascript
文字垂直滚动之javascript代码
Jul 29 Javascript
Bootstrap免费字体和图标网站(值得收藏)
Mar 16 Javascript
js实现会跳动的日历效果(完整实例)
Oct 18 Javascript
详解Vue 事件修饰符capture 的使用
Dec 29 Javascript
js统计页面上每个标签的数量实例代码
May 29 Javascript
JQuery判断radio单选框是否选中并获取值的方法
Jan 17 jQuery
vue-cli3单页构建大型项目方案
Apr 07 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源代码
2006/10/09 PHP
献给php初学者(入门学习经验谈)
2010/10/12 PHP
PHP全概率运算函数(优化版) Webgame开发必备
2011/07/04 PHP
php中读写文件与读写数据库的效率比较分享
2013/10/19 PHP
utf-8编码引起js输出中文乱码的解决办法
2010/06/23 Javascript
javascript Array.prototype.slice使用说明
2010/10/11 Javascript
使用jquery为table动态添加行的实现代码
2011/03/30 Javascript
JavaScript中获取未知对象属性的代码
2011/04/27 Javascript
jquery text()方法取标签中的文本
2014/07/25 Javascript
javascript 事件处理示例分享
2014/12/31 Javascript
详解jQuery中的empty、remove和detach
2016/04/11 Javascript
Javascript中字符串和数字的操作方法整理
2017/01/22 Javascript
JS实现向iframe中表单传值的方法
2017/03/24 Javascript
JS实现匀速与减速缓慢运动的动画效果封装示例
2018/08/27 Javascript
vue基础之事件简写、事件对象、冒泡、默认行为、键盘事件实例分析
2019/03/11 Javascript
解决vue自定义指令导致的内存泄漏问题
2020/08/04 Javascript
js实现筛选功能
2020/11/24 Javascript
一行JavaScript代码如何实现瀑布流布局
2020/12/11 Javascript
python将多个文本文件合并为一个文本的代码(便于搜索)
2011/03/13 Python
python中尾递归用法实例详解
2015/04/28 Python
python数组复制拷贝的实现方法
2015/06/09 Python
Python编程深度学习绘图库之matplotlib
2018/12/28 Python
pywinauto自动化操作记事本
2019/08/26 Python
详解Pycharm第三方库的安装及使用方法
2020/12/29 Python
CSS3盒子模型详解
2013/04/24 HTML / CSS
HTML5实现签到 功能
2018/10/09 HTML / CSS
FOREO官方网站:LUNA露娜洁面仪
2016/11/28 全球购物
英国外籍人士的在线超市:British Corner Shop
2019/06/03 全球购物
Silk Therapeutics官网:清洁、抗衰老护肤品
2020/08/12 全球购物
共青团员自我评价范文
2014/09/14 职场文书
2014年设备管理工作总结
2014/11/26 职场文书
学校捐书活动总结
2015/05/08 职场文书
东京审判观后感
2015/06/01 职场文书
交通事故责任认定书
2015/08/06 职场文书
SpringBoot 集成Redis 过程
2021/06/02 Redis
Python将CSV文件转化为HTML文件的操作方法
2021/06/30 Python