一个简单的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 相关文章推荐
Some tips of wmi scripting in jscript (1)
Apr 03 Javascript
javascript replace方法与正则表达式
Feb 19 Javascript
jquery获取URL中参数解决中文乱码问题的两种方法
Dec 18 Javascript
jquery插件jTimer(jquery定时器)使用方法
Dec 23 Javascript
js计算德州扑克牌面值的方法
Mar 04 Javascript
jQuery动态效果显示人物结构关系图的方法
May 07 Javascript
js实现表单Radio切换效果的方法
Aug 17 Javascript
jQuery基于排序功能实现上移、下移的方法
Nov 26 Javascript
fckeditor部署到weblogic出现xml无法读取及样式不能显示问题的解决方法
Mar 24 Javascript
ES6中let 和 const 的新特性
Sep 03 Javascript
vue监听用户输入和点击功能
Sep 27 Javascript
js this 绑定机制深入详解
Apr 30 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常用hash加密函数
2014/11/22 PHP
Smarty实现页面静态化(生成HTML)的方法
2016/05/23 PHP
一直复略了的一个问题,关于表单重复提交
2007/02/15 Javascript
JavaScript 数组的 uniq 方法
2008/01/23 Javascript
js left,right,mid函数
2008/06/10 Javascript
js cookies 常见网页木马挂马代码 24小时只加载一次
2009/04/13 Javascript
基于javascript 闭包基础分享
2013/07/10 Javascript
js charAt的使用示例
2014/02/18 Javascript
Javascript前端UI框架Kit使用指南之kitjs事件管理
2014/11/28 Javascript
JavaScript判断一个字符串是否包含指定子字符串的方法
2015/03/18 Javascript
jQuery使用hide方法隐藏指定元素class样式用法实例
2015/03/30 Javascript
JavaScript实现动画打开半透明提示层的方法
2015/04/21 Javascript
JavaScript中getUTCMinutes()方法的使用详解
2015/06/10 Javascript
jQuery 移动端artEditor富文本编辑器
2016/01/11 Javascript
JQuery EasyUI的一些常用组件
2017/07/12 jQuery
以BootStrap Tab为例写一个前端组件
2017/07/25 Javascript
input type=file 选择图片并且实现预览效果的实例
2017/10/26 Javascript
js与jQuery实现的用户注册协议倒计时功能实例【三种方法】
2017/11/09 jQuery
微信小程序 image组件遇到的问题
2019/05/28 Javascript
微信小程序点击保存图片到本机功能
2019/12/13 Javascript
vue请求数据的三种方式
2020/03/04 Javascript
微信小程序分享小程序码的生成(带参数)以及参数的获取
2020/03/25 Javascript
微信小程序自定义扫码功能界面的实现代码
2020/07/02 Javascript
五句话帮你轻松搞定js原型链
2020/12/09 Javascript
[04:15]DOTA2-DPC中国联赛 正赛 Ehome vs Aster 选手采访
2021/03/11 DOTA
python Django模板的使用方法
2016/01/14 Python
Python3 循环语句(for、while、break、range等)
2017/11/20 Python
LRUCache的实现原理及利用python实现的方法
2017/11/21 Python
pycham查看程序执行的时间方法
2018/11/29 Python
python和node.js生成当前时间戳的示例
2020/09/29 Python
python的scipy.stats模块中正态分布常用函数总结
2021/02/19 Python
浅析canvas元素的html尺寸和css尺寸对元素视觉的影响
2019/07/22 HTML / CSS
新生入学欢迎词
2015/01/26 职场文书
入党介绍人意见2015
2015/06/01 职场文书
2016年国培研修日志
2015/11/13 职场文书
Python爬虫之爬取最新更新的小说网站
2021/05/06 Python