一个简单的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调用后台的三种方法实例
Oct 17 Javascript
js同比例缩放图片的小例子
Oct 30 Javascript
jQuery动画效果animate和scrollTop结合使用实例
Apr 02 Javascript
Javascript基础知识盲点总结之函数
May 15 Javascript
Javascript实现图片不间断滚动的代码
Jun 22 Javascript
bootstrap table实现x-editable的行单元格编辑及解决数据Empty和支持多样式问题
Aug 10 Javascript
vue.js实现只弹一次弹框
Jan 29 Javascript
jQuery中可见性过滤器简单用法示例
Mar 31 jQuery
详解vue中点击空白处隐藏div的实现(用指令实现)
Apr 19 Javascript
Vue 通过公共字段,拼接两个对象数组的实例
Nov 07 Javascript
Openlayers实现点闪烁扩散效果
Sep 24 Javascript
Vue vee-validate插件的简单使用
Jun 22 Vue.js
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冒泡排序
2014/12/30 PHP
PHP导出Excel实例讲解
2016/01/24 PHP
php json中文编码为null的解决办法
2016/12/14 PHP
PHP中-&gt;和=&gt;的含义及使用示例解析
2020/08/06 PHP
文本加密解密
2006/06/23 Javascript
JavaScript入门教程(2) JS基础知识
2009/01/31 Javascript
window.location.reload()方法刷新页面弹出要再次显示该网页对话框
2013/04/24 Javascript
浅谈javascript六种数据类型以及特殊注意点
2013/12/20 Javascript
JS获取select-option-text_value的方法
2013/12/26 Javascript
jQuery插件zoom实现图片全屏放大弹出层特效
2015/04/15 Javascript
JavaScrip数组删除特定元素的几种方法总结
2017/09/06 Javascript
详解基于Vue+Koa的pm2配置
2017/10/24 Javascript
layui select动态添加option的实例
2018/03/07 Javascript
解决vue页面DOM操作不生效的问题
2018/03/17 Javascript
VUE 自定义组件模板的方法详解
2019/08/30 Javascript
javascript实现超好看的3D烟花特效
2020/01/01 Javascript
VUE 单页面使用 echart 窗口变化时的用法
2020/07/30 Javascript
Vue3为什么这么快
2020/09/23 Javascript
[01:06:43]完美世界DOTA2联赛PWL S3 PXG vs GXR 第二场 12.19
2020/12/24 DOTA
玩转python爬虫之正则表达式
2016/02/17 Python
人生苦短我用python python如何快速入门?
2018/03/12 Python
python numpy 显示图像阵列的实例
2018/07/02 Python
Python 变量类型详解
2018/10/10 Python
浅谈tensorflow模型保存为pb的各种姿势
2020/05/25 Python
为什么说python适合写爬虫
2020/06/11 Python
Python猫眼电影最近上映的电影票房信息
2020/09/18 Python
美国宠物商店:Wag.com
2016/10/25 全球购物
英国水族馆和池塘用品购物网站:Warehouse Aquatics
2019/08/29 全球购物
Booking.com亚太地区:Booking.com APAC
2020/02/07 全球购物
《乌塔》教学反思
2014/02/17 职场文书
优秀应届毕业生自荐书
2014/06/29 职场文书
写给医院的感谢信
2015/01/22 职场文书
研究生导师推荐信
2015/03/25 职场文书
成品仓管员岗位职责
2015/04/01 职场文书
农业项目合作意向书
2015/05/08 职场文书
企业工会工作总结2015
2015/05/13 职场文书