| jQuery实现小米官网 | 您所在的位置：网站首页 › 小米官网网页制作代码 › jQuery实现小米官网 |
jQuery实现小米官网
|
1. 实现导航栏中“下载App”，和“购物车”,的下拉效果
分析：第一步还是先把要操作的元素获取过来。不论是JS还是jQuery，你要对哪个元素做某件事，都是要先选定这个元素，再在这基础上给它绑定方法。因为要实现这个效果很简单，所以代码也不是很多。 jQeury代码示例： $("#download").hover(function() { //向下滑动 $(".download").stop().slideDown(); //show() 显示 $(this).children("i").show(); }, function() { //向上滑动 $(".download").stop().slideUp(); //hide() 隐藏 $(this).children("i").hide(); });这里用到的是$("属性名").hover([over,]out) 事件切换 （1）over: 鼠标移到元素上要触发的函数（相当于 mouseenter） （2）out: 鼠标移出元素要触发的函数（相当于 mouseleave） 1.事件切换 hover 就是鼠标经过和离开的复合写法。hover(function(){ 鼠标移动到元素上要进行的操作},function(){鼠标移出元素要进行的操作}) . 2. 事件切换 hover 如果只写一个函数，那么鼠标经过和鼠标离开都会触发这个函数
这个购物车效果也一样，用了hover(); 滑动效果用了slideToggle()；在显示和隐藏状态之间切换 jQeury代码示例： $(".h_cart").hover(function() { //滑动效果切换 $(".cart_menu").stop().slideToggle(); }); 2. 实现二级导航栏中商品显示效果
jQeury代码示例： $(".mnavli").hover(function() { $(this).children(".mn_container").show(); }, function() { $(this).children(".mn_container").hide(); }); 3. 实现侧边导航栏中商品显示效果
附上一篇JS编写的侧边栏的商品显示效果博客分析，大家可以对比一下JS和jQuery的代码量和写法。小米商城左侧菜单布局和效果实现（分析+代码）_李易峰是温柔本身.-CSDN博客 jQeury代码示例： $(".bnavli").hover(function() { $(this).children(".bncontainer").show(); //ul的宽度 console.log($(this).children('.bncontainer').children('ul').width()); //ul的长度（个数） //console.log($(this).children(".bncontainer").children("ul").length); //console.log($(this).children(".bncontainer>ul").length); $(".bncontainer").css("width", $(this).children('.bncontainer').children('ul').width() * $(this).children(".bncontainer").children("ul").length); }, function() { $(this).children(".bncontainer").hide(); }); 4. 实现登录注册的切换
分析：登录和注册写在一个页面的，点击那一个就显示对应的内容区域，隐藏另外的内容区域。 jQeury代码示例： $(".login").click(function() { //点击登录，登录显示，注册隐藏 $('.box_login').show(); $(".box_regist").hide(); //css("属性名","属性值") $(this).css("borderBottomColor", "#FF5700"); $(".regist").css("borderBottomColor", ""); }); $(".regist").click(function() { //点击注册，登录隐藏，注册显示 $('.box_login').hide(); $(".box_regist").show(); $(this).css("borderBottomColor", "#FF5700"); $(".login").css("borderBottomColor", ""); }); 5. 页面跳转
分析：从主页点击登录跳转登录/注册页面并显示登录对应的内容；从主页点击注册跳转登录/注册页面并显示注册对应的内容。 主页的jQeury代码示例： //登录注册 $("#indexDL").click(function() { window.event.returnValue = false; //传值方式，来区分点击的是登录还是注册 window.location.href = 'login.html' + '?' + 1; }); $("#indexZC").click(function() { window.event.returnValue = false window.location.href = 'login.html' + '?' + 2; });登录/注册的jQeury代码示例： /* --登录注册-- */ var temp3 = window.location.search.substr(1); if (temp3 === '1') { //手动调用登录点击事件 $(".login").click(); } if (temp3 === '2') { $(".regist").click(); } 总结jQuery封装了JavaScript常用的函数功能，优化了DOM操作、事件处理、动画设计和Ajax交互。加快了前端人员的开发速度，方便调用和使用它，提高开发效率。
|
【本文地址】
公司简介
联系我们