jquery在wordpress模板中的简单运用

前段时间有网友在本站留言,对鼠标经过淡入淡出层的效果非常感兴趣,所以应网友的兴趣,小编特地写一篇技术分享的文章,分享一下这种简单的效果是如何实现的。
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

上一篇:

下一篇:

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

本文地址:https://www.themepark.com.cn/jquerywordpress.html

WordPress原创主题,高端网站模板建站,网站模板建站资源以及开发知识分享,尽在WEB主题公园
WEB主题公园致力于开发适合中国人习惯的中文WordPress网站模板,并提供全程视频教程,让您能够轻松的使用网站模板建立好自己的网站!

相关文章

文章评论

您好!请登录

取消回复

    个人中心我的

    联系我们x

    联系我们,从qq在线客服,电话和邮件

    售前客服-1[点击对话]

    购买之前想要了解和咨询

    售前客服-2[点击对话]

    购买之前想要了解和咨询

    售后客服[售后支持]

    购买后输入订单号加好友

    咨询热线:0731-8578 7193

    联系邮箱:
    info@themepark.com.cn

    请注意:在线客服以及咨询热线请在 工作日的9:30~18:00来电咨询 电子邮件在任何时间都会回复

    客服
    回到顶部 顶部