如何制作网页标题链接平滑右移效果
点击次数:更新时间:2012-08-29 09:08:08【打印】【关闭】
今天我要写的是鼠标移动到标题上,标题平滑右移的效果,效果可以看我的主页。 你还在嫌你的页面不够生动不够活力吗?亲,那就看下面的教程折腾起来吧! 第一种方法,用的是jQuery。 优点:兼容所有浏览器,包括IE什么的。 缺点:代码也很短,没什么缺点。 jQuery(document).ready(function($){ 首先第一步要让主题加载jQuery库文件,现在基本上没有主题没加载,所以第一步可以省略。 (想要知道有没有加载这个库文件的童鞋,在网页查看源代码中,搜索“jquery.min.js”,如果有就是有加载啦。) 第二步就是将这个代码粘贴到主题加载的其中一个JS文件里,就OK了。 第二种方法,用的是CSS3。 优点:效果一样,没啥优点。 缺点:不兼容IE浏览器,在IE下会右移,但是没有平滑效果,因为IE不支持CSS3。 先给你标题的a标签样式添加以下CSS属性: -webkit-transition: margin 0.2s ease-out; 再给这个a:hover添加: margin-left:10px /*移动距离可以自己调节*/ 按以上方法改完就可以看到效果了,两种方法效果都一样,但是第一种方法能兼容所有浏览器,所以小V墙裂推荐用第一种方法。 |