文字链接平滑左右移动的效果代码
当然,花点时间改一下效果会非常棒,下面就贴出代码吧:
html代码 :
代码如下 | 复制代码 |
<div><a href="#1">Test 测试</a></div> |
css代码:
代码如下 | 复制代码 |
.test a{background-color:#446CB3; color:#ffffff; padding:10px; text-decoration:none; |
当然,要知道css3动画不兼容ie10以下浏览器,所以这个效果在IE内核的低版本中是没有啥效果的,但是这个效果实现起来非常简单,我们可以结合jquery
当然我们知道css3动画不兼容ie10以下浏览器,那么我们可以使用jq代码来实现,具体代码为:
代码如下 | 复制代码 |
$(function(){ },function(){ |
大家可能很疑惑,为什么css里面由一个position:relative呢?其实这是我的另外一种写法,jq代码如下
代码如下 | 复制代码 |
$(function(){ $(this).stop().animate({“left”:”10px”},300); |
是不是很简单的效果呢?值得试试。
您可能感兴趣的文章:
40个有创意的jQuery图片、内容滑动及弹出插件收藏集之一
文字链接平滑左右移动的效果代码
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之三
JavaScript制作滚动字幕
HTML5单页面手势滑屏切换原理分析
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之二
用jquery实现自定义风格的滑动条实现代码
jQuery创建平滑的页面滚动(顶部或底部)
对css滑动门技术的一些总结和归纳
jquery必须知道的一些常用特效方法及使用示例(整理)