收藏本站|设为首页

您现在的位置: 首页 > 新闻中心 > 建站经验 > 详细内容

网页问题链接滑腻右移效不美观

2012-08-22 16:52 来源: 卓杰科技 www.zhuojie.cc [ ]

分享本站问题链接滑腻右移效不美观


});
$(this).stop().animate({'marginLeft': '0px'}, 200);     

(想要知道有没有加载这个库文件的童鞋,在网页查看源代滤鱿脯搜索“jquery.min.js”,如不美观有就是有加载啦。)

上次发了一篇《分享本站LOGO发光效不美观的实现体例》,不知道有几个童鞋用上了,不喜欢的我也没辙啦,我只是分享我的体例嘛。

首先第一步要让主题加载jQuery库文件,此刻根基膳缦慊有主题没加载,所以第一步可以省略。

先给你问题的a标签样式添加以下CSS属性:

-webkit-transition: margin 0.2s ease-out;  

你还在嫌你的页面不够活跃不够活力吗?亲,那就看下面的教程折腾起来吧!

第一种体例,用的是jQuery。


//.entry-title a 改成你问题的样式名称,可以应用多个链接,用逗号离隔     

错误谬误:代码也很短,没什么错误谬误。

jQuery(document).ready(function($){      
$('.entry-title a').hover(function() {   
$(this).stop().animate({'marginLeft': '10px'}, 200);     
//鼠标移动到链接上的滑腻效不美观,200是毫秒,就是效不美观时刻,可以改成你需要的时刻     
}, function() {      
//鼠标分开链接后的滑腻效不美观,200同上     
});      

第二步就是将这个代码粘贴到主题加载的其一一个JS文件里,就OK了。

利益:兼容所有浏览器,搜罗IE什么的。

第二种体例,用的是CSS3。

利益:效不美观一样,没啥利益。

错误谬误:不兼容IE浏览器,在IE下会右移,可是没有滑腻效不美观,因为IE不撑持CSS3。


-moz-transition: margin 0.2s ease-out;  
-khtml-transition: margin 0.2s ease-out;

今天我要写的是鼠标移动到问题上,问题滑腻右移的效不美观,效不美观可以看我的主页。

再给这个a:hover添加:

margin-left:10px  /*移动距离可以自己调节*/ 

按以上体例改完就可以看到效不美观了,两种体例效不美观都一样,可是第一种体例能兼容所有浏览器,所以小V墙裂举荐用第一种体例。

本文链接地址:http://www.zhuojie.cc/?