jQuery仿天猫侧边固定悬浮导航代码(带关闭)

所属分类:UI,导航-悬停,垂直导航

 62528  473  查看评论 (13)
分享到微信朋友圈
X
jQuery仿天猫侧边固定悬浮导航代码(带关闭) ie兼容7
var browser={
	versions:function(){
		var u = navigator.userAgent, app = navigator.appVersion;
		return {	//移动终端浏览器版本信息
			trident: u.indexOf('Trident') > -1, //IE内核
			presto: u.indexOf('Presto') > -1, //opera内核
			webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
			gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核
			mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
			ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
			android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或者uc浏览器
			iPhone: u.indexOf('iPhone') > -1 || u.indexOf('Mac') > -1, //是否为iPhone或者QQHD浏览器
			iPad: u.indexOf('iPad') > -1, //是否iPad
			webApp: u.indexOf('Safari') == -1 //是否web应该程序,没有头部与底部
		};
	}(),
	language:(navigator.browserLanguage || navigator.language).toLowerCase()
}
$(document).ready(function(){
	if(!browser.versions.mobile){
		var _st = $.cookie("fixed");
		if(!_st)_st=0;
		var _code = '<div id="fixed"><dl><dd><a href="http://www.jq22.com/" class="web">页游</a></dd><dd><a href="http:/www.jq22.com/" class="mb">手游</a></dd><dd><a href="http://www.jq22.com/" target="_blank" class="dj">动漫</a></dd><dd><a href="http://www.jq22.com/" target="_blank" class="mh">漫画</a></dd><dd><a href="http://www.jq22.com/" target="_blank" class="dh">动画</a></dd><dd><a href="http://www.jq22.com/" class="pk165">小说</a></dd><dd><a href="http://www.jq22.com/" class="w267">社区</a></dd><dt><a href="javascript:void(0);" class="close"></a></dt></dl></div>';
		if(_st==1){
			$(_code).hide().appendTo("body").fixed({x:-44,y:0}).fadeIn(500);
			$("#fixed dt a.close").width('68px');
		} else {
			$(_code).hide().appendTo("body").fixed({x:0,y:0}).fadeIn(500);
		}
		$("#fixed dt").click(function(){
			var _left = $("#fixed").offset().left;
			if(_left>=0){
				$.cookie("fixed",1,{path:'/'});
				$("#fixed").animate({left:-44},300,'swing',function(){
					$("#fixed dt a.close").hide().width('68px').fadeIn(500);
				});
			} else {
				$.cookie("fixed",0,{path:'/'});
				$("#fixed dt a.close").width('44px');
				$("#fixed").animate({left:0},300,'swing',function(){
				});
			}
		});
	}
});

相关插件-悬停,垂直导航

css3的button组件

css3的button组件,可以直接调用,使用方便,各种效果
  悬停
 34613  524

CSS3实现超酷的鼠标悬停效果

CSS3实现超酷的鼠标悬停效果
  悬停
 40799  589

各种鼠标移入效果

各种鼠标移入效果
  悬停
 44269  604

12种CSS3 hover效果插件

非常好看实用的CSS3的hover效果, 用transition 、amination 制造好看及实用的交互体验
  悬停
 58836  486

讨论这个项目(13)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    苦逼程序猿1 0
    2022/5/11 9:19:28
    剑走L偏锋 0
    2021/9/28 22:22:57
    感觉还不错啊,试试看
    回复
    EXCEL 0
    2016/8/19 15:08:40
    挺好的
        旅行的意义0
        2018/10/30 15:49:12
        能把资源发给我m,a

    回复
    年轻、诠释了我们的青春 0
    2016/8/16 10:08:41
    在这里找到好多需要的例子 回复
    zhouchong741 0
    2016/3/17 9:03:50
    好用,准备在项目中运用 回复
    dis.zhu 0
    2016/1/1 0:01:47

    不知道为什么chrome不兼容。。。

        i5428730570
        2017/6/20 16:17:34

        可以呀

    回复
    ?哓? Оoο 0
    2015/10/15 11:10:36
    blue_V 0
    2015/5/31 19:35:28
    看着挺好用的,下载试试 回复
    朝天小辣椒 0
    2015/4/1 9:48:54
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复