服装商城管理系统日常小结1

最新推荐文章于 2024-09-06 20:37:29 发布

原创最新推荐文章于 2024-09-06 20:37:29 发布 · 292 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #js

本文介绍如何使用jQuery实现网站的换肤功能、折叠菜单效果以及动态列表项的滚动效果。通过简单的代码示例，展示了如何利用jQuery的功能特性提升用户体验。

部署运行你感兴趣的模型镜像

前言：这个项目使用jquery实现所有特效

换肤、折叠菜单、动态LI

一、换肤

原理：拼接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)

			})

您可能感兴趣的与本文相关的镜像

HunyuanVideo-Foley

语音合成

HunyuanVideo-Foley是由腾讯混元2025年8月28日宣布开源端到端视频音效生成模型，用户只需输入视频和文字，就能为视频匹配电影级音效