wordpress主题建站,选择WEB主题公园中文原创企业网站模板!

WordPress技术博客 news
您现在的位置:首页 > WordPress技术博客 > jquery在wordpress模板中的简单运用

本周推荐网站模板

WordPress主题视频教程

最近更新的WordPress主题
最新更新过的网站模板

jquery在wordpress模板中的简单运用

发布时间:2012/09/12 WordPress技术博客 wp应用技术 2463 0

前段时间有网友在本站留言,对鼠标经过淡入淡出层的效果非常感兴趣,所以应网友的兴趣,小编特地写一篇技术分享的文章,分享一下这种简单的效果是如何实现的。
jquery是目前非常流行也是使用的非常多的一种效果代码,jquery的基本应用也是非常简单的,她可以实现非常多的酷炫效果,并且只需要加载jquery库,几行非常简单的效果就能够实现了。

下面,我们就介绍一下常用的jquery效果,这些效果都是在网页设计中非常实用并且常见的。使用这些简单的效果,可以让你的wordpress网站更加的酷炫同时兼容性更加的好!

淡入淡出的:hover效果。
对于:hover  相信了解前端基本知识的朋友都会知道,CSS的hover效果是非常直接变化,有时候会让我们觉得有些生硬,使用简单的一句jquery,便能够非擦酷炫的使hover的效果变成淡入淡出的形式,并且对IE6的hover   bug(不支持a标签以外的hover)有非常好的兼容。

首先你需要了解的是CSS种的定位(position)  绝对定位(absolute)和相对定位(relative),使用jquery做hover的效果并不是CSS中真正的hover效果,而是使用定位(position)和层级z-index 在你想要发生变化的层上面加上一个变化的效果层,并使用显示方式(display)隐藏这个层,当鼠标经过这个层的时候,变化的层就使用淡入淡出的方式显示出来。html和CSS如下图:

jquery在wordpress模板中的简单运用

 

jquery部分:

$('#fuji').hover(  //输入父级标签CSS名称或 ID

function() {
$(this).children('.ziji').stop(true, true).fadeIn('1000');
},//输入子级标签CSS名称或 ID,鼠标移入淡入显示

function() {
$(this).children('ziji').stop(true, true).fadeOut('1000');
}).click (function () {
//输入子级标签CSS名称或 ID,鼠标移出淡出消失

});

这里 你只需要填写id CSS名称 查找到父级的容器,然后在查找子级的id或css

id  书写方式  #id名称    CSS 书写方式 .CSS名称

查找被变化的不止是子级,可以是任何的标签,范例中是children,也就是查找子级,还有更多的方式可以参考jquery的手册  不同的动画形式,不同的查找方法,和删除添加元素等,都有详细介绍。

文章写得可能不是很详细,请下载文件,有详细注释,看看文件可能更加的容易理解了!

了解了jquery的简单运用模式,你可以参阅jquery手册,举一反三,做出更多形式更多效果的酷炫网页了!

附件:简单运用的jquery

WordPress原创主题,高端网站模板建站,网站模板建站资源以及开发知识分享,尽在WEB主题公园

如未标明出处,所有文章均为WEB主题公园原创,如需转载,请附上原文地址,感谢您的支持和关注。

============关于WEB主题公园=============

WEB主题公园致力于开发适合中国人习惯的中文WordPress网站模板,并提供全程视频教程,让您能够轻松的使用网站模板建立好自己的网站!

分享WordPress开发,网站维护经验,分享更多有用的WordPress知识

WEB主题公园--做最好的中文原创WordPress主题,网站模版。