更新中。。。
1,在做下拉菜单时,为了带一些下拉效果,可以直接利用jQuery自带的slideUp和slideDown来进行设计,还有一种控制就是slideToggle.
如:$(".downlist").slideToggle();可以进行下拉与收起的动效。
有些时候下拉菜单的标题内会带有小三角标来标识下拉与收起,就涉及到了三角标的transform,可以把切换写在function内。
如:
$(".left .list-down").click(function () { $(this).find(".downlist").slideToggle(function () { if($(this).is(":hidden")){ $(this).parent().find("span.san").css("transform","rotate(0)"); }else{$(this).parent().find("span.san").css("transform","rotate(180deg)");} }); })
2,PC与移动端自适应切换
function browserRedirect() { var sUserAgent= navigator.userAgent.toLowerCase(); var bIsIpad= sUserAgent.match(/ipad/i) == "ipad"; var bIsIphoneOs= sUserAgent.match(/iphone os/i) == "iphone os"; var bIsMidp= sUserAgent.match(/midp/i) == "midp"; var bIsUc7= sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4"; var bIsUc= sUserAgent.match(/ucweb/i) == "ucweb"; var bIsAndroid= sUserAgent.match(/android/i) == "android"; var bIsCE= sUserAgent.match(/windows ce/i) == "windows ce"; var bIsWM= sUserAgent.match(/windows mobile/i) == "windows mobile"; if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) { window.location.href= 'http://www.ezhanlu.com/mobile/mhome.html'; } } browserRedirect();
//或者更简单的
function isMobileUserAgent(){
return (/iphone|ipod|android.*mobile|windows.*phone|blackberry.*mobile/i.test(window.navigator.userAgent.toLowerCase()));
}
if(isMobileUserAgent()){
window.location.href = "http://m.qidian.qq.com" + window.location.pathname + window.location.search;
}
3.点击直接进行qq对话
<a href="http://wpa.qq.com/msgrd?V=1&uin=QQ号&exe=qq&Site=qq&menu=yes" target="qidian"> <div class="list" id="callChat"> <img src="../../assets/images/fixed_QQ.png" alt=""> <p>QQ咨询</p> </div> </a>
<iframe width="" height="" name="qidian" style="display:none;"></iframe> //一个空的iframe来接收点击之后跳转的页面,来使点击直接提示qq聊天,而不跳转页面