前言:这个项目使用jquery实现所有特效
一、换肤
原理:拼接href
路径,替换即可。
/*换肤*/
$(function() {
$("#skin li").click(function() {
var css = "styles/skin/" + $(this).attr("id") + ".css";
$("#cssfile").attr("href", css);
$(this).addClass("selected").siblings().removeClass("selected");
})
})
二、折叠菜单
原理:分析web页面代码得出,使用slideToggle()
(通过使用滑动效果,在显示和隐藏状态之间切换)实现效果,然后使用图片路径替换。
/*最新动态折叠*/
$(function() {
$(".global_module.news .module_up_down img").click(function() {
var $this = $(this);
$(".scrollNews").slideToggle(1000, function() {
var img = $this.attr("src");
if(img == "images/up.gif") {
img = "images/down.gif";
} else {
img = "images/up.gif";
}
$this.attr("src", img);
})
})
})
/*产品分类折叠*/
$(function() {
$(".global_module.procatalog .module_up_down img").click(function() {
var $this = $(this);
$(".m-treeview").slideToggle(1000, function() {
var img = $this.attr("src");
if(img == "images/up.gif") {
img = "images/down.gif";
} else {
img = "images/up.gif";
}
$this.attr("src", img);
})
})
})
三、动态LI
原理:使用appendTo()
自定义动画,把li
追加到最后实现动态效果。
//最新动态,实现动态li
$(function() {
setInterval(function() {
$(".scrollNews li:first").remove().appendTo($(".scrollNews ul"))
}, 1000)
})