一个简单的JS鼠标悬停特效具体方法
更新时间：2013年06月17日 09:35:48 作者：
这个特效最终实现效果就是当鼠标移动到链接上，文字会横向移动一定距离，貌似总有人喜欢这些花花草草。添加此效果方法很简单。
首先，需加载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代码加到页面的头部：
复制代码 代码如下:
<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具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-08-08
这篇文章主要介绍了对于防止按钮重复点击的尝试，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
这篇文章主要介绍了基于打包工具Webpack进行项目开发实例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-05-05
这篇文章主要介绍了在js中如何准确的判断一个变量的类型，文中代码非常详细，帮助大家更好的学习，有兴趣的朋友可以了解下2020-06-06
html读出文本文件内容...2007-01-01
这篇文章主要介绍了微信小程序内拖动图片实现移动、放大、旋转的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了详解微信小程序「渲染层网络层错误」的解决方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-01-01
用JavaScript 判断用户使用的是 IE6 还是 IE7
判断IE浏览器的脚本，方便根据浏览器不懂，支持不同的代码的分别调用。2008-01-01
JavaScript 数组展平方法: flat() 和 flatMap()详解
从 ES2019 中开始引入了一种扁平化数组的新方法，可以展平任何深度的数组，这篇文章主要介绍了JavaScript 数组展平方法: flat() 和 flatMap()详解,需要的朋友可以参考下2023-06-06
以前最短的IE判定借助于IE不支持垂直制表符的特性搞出来的。2011-03-03
最新评论