一个简单的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的网页SELECT下拉框美化代码
Oct 28 Javascript
JS面向对象编程浅析
Aug 28 Javascript
javascript判断机器是否联网的2种方法
Aug 09 Javascript
分享JavaScript获取网页关闭与取消关闭的事件
Dec 13 Javascript
js 判断浏览器使用的语言示例代码
Mar 22 Javascript
JavaScript字符串对象charAt方法入门实例(用于取得指定位置的字符)
Oct 17 Javascript
EasyUI中实现form表单提交的示例分享
Mar 01 Javascript
jQuery EasyUI提交表单验证
Jul 19 Javascript
在JS中a标签加入单击事件屏蔽href跳转页面
Dec 16 Javascript
Angular4项目中添加i18n国际化插件ngx-translate的步骤详解
Jul 02 Javascript
vue学习笔记之过滤器的基本使用方法实例分析
Feb 01 Javascript
详解vue中v-for的key唯一性
May 15 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
用缓存实现静态页面的测试
2006/12/06 PHP
php图片缩放实现方法
2014/02/20 PHP
PHP中使用循环实现的金字塔图形
2014/11/08 PHP
图片按比例缩放函数
2006/06/26 Javascript
js模拟实现Array的sort方法
2007/12/11 Javascript
javascript innerHTML、outerHTML、innerText、outerText的区别
2008/11/24 Javascript
JavaScript入门教程(7) History历史对象
2009/01/31 Javascript
Javascript 日期对象Date扩展方法
2009/05/30 Javascript
利用JQuery为搜索栏增加tag提示
2009/06/22 Javascript
JavaScript中数组继承的简单示例
2015/07/29 Javascript
js判断手机号运营商的方法
2015/10/23 Javascript
详解JavaScript中this关键字的用法
2016/05/26 Javascript
DOM 事件的深入浅出(一)
2016/12/05 Javascript
JS实现焦点图轮播效果的方法详解
2016/12/19 Javascript
javascript算法之二叉搜索树的示例代码
2017/09/12 Javascript
JavaScript事件发布/订阅模式原理与用法分析
2018/08/21 Javascript
详解Vue的常用指令v-if, v-for, v-show,v-else, v-bind, v-on
2018/10/12 Javascript
Nodejs + Websocket 指定发送及群聊的实现
2020/01/09 NodeJs
JS实现网页烟花动画效果
2020/03/10 Javascript
pycharm 使用心得(五)断点调试
2014/06/06 Python
Python命令行参数解析模块optparse使用实例
2015/04/13 Python
python获取mp3文件信息的方法
2015/06/15 Python
Python对列表中的各项进行关联详解
2017/08/15 Python
python实现淘宝秒杀聚划算抢购自动提醒源码
2020/06/23 Python
Python用61行代码实现图片像素化的示例代码
2018/12/10 Python
CSS3实现可爱的小黄人动画
2016/07/11 HTML / CSS
使用HTML5 Canvas API中的clip()方法裁剪区域图像
2016/03/25 HTML / CSS
Daisy London官网:英国最大的首饰集团IBB旗下
2019/02/28 全球购物
德国大型和小型家用电器网上商店:Energeto
2019/05/15 全球购物
EM Cosmetics官网:由彩妆大神Michelle Phan创办的独立品牌
2020/04/27 全球购物
Happy Plugs官网:瑞典无线耳机品牌
2020/07/16 全球购物
恶意软件的定义
2014/11/12 面试题
人事专员的岗位职责
2014/03/01 职场文书
副职竞争上岗演讲稿
2014/05/12 职场文书
教师工作能力自我评价
2015/03/04 职场文书
少先队大队委竞选口号
2015/12/25 职场文书