共享网页页面题目连接光滑右移实际效果

2021-04-03 15:08| 发布者: | 查看: |


共享网页页面题目连接光滑右移实际效果


之前发过一篇《共享本网站LOGO发亮实际效果的完成方式》,不知道道几个朋友用到了,讨厌的因为我没辙啦,我仅仅共享我的方式嘛。

今日我想写的是电脑鼠标移动到题目上,题目光滑右移的实际效果,实际效果能看我的首页。

你要在嫌你的网页页面不足栩栩如生不足魅力吗?亲,那么就看看面的实例教程瞎折腾起來吧!

第一种方式,用的是jQuery。

优势:适配全部访问器,包含IE甚么的。

缺陷:编码也很短,没有什么缺陷。

jQuery(document).ready(function($){

$( .entry-title a ).hover(function() {

//.entry-title a 改为你题目的款式名字,能够运用好几个连接,用分号分隔

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

//电脑鼠标移动到连接上的光滑实际效果,200是毫秒,便是实际效果時间,能够改为你必须的時间

}, function() {

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

//电脑鼠标离去连接后的光滑实际效果,200跟上面一样

});

});

最先第一步要让主题风格载入jQuery库文档,如今大部分沒有主题风格没载入,因此第一步能够省去。

(要想了解有木有载入这一库文档的朋友,在网页页面查询源码中,检索 jquery.min.js ,假如有便是能加载啦。)

第二步便是将这一编码黏贴到主题风格载入的在其中一个JS文档里,就OK了。

第二种方式,用的是CSS3。

优势:实际效果一样,没啥优势。

缺陷:兼容问题IE访问器,在IE下能右移,可是沒有光滑实际效果,由于IE不兼容CSS3。

先让你题目的a标识款式加上下列CSS特性:

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

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

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

再给这一a:hover加上:

margin-left:10px /*移动间距能够自身调整*/

按之上方式改完便可以见到实际效果了,二种方式实际效果都一样,可是第一种方式能适配全部访问器,因此小V墙裂强烈推荐用第一种方式。

文中连接详细地址:

<
>

 
QQ在线咨询
售前咨询热线
18720358503
售后服务热线
18720358503
返回顶部