您的位置：首页 > Web前端 > JQuery

jquery实战1：鼠标右击事件，回到顶部特效

2015-06-06 12:22 746 查看

jquery实战1：鼠标右击事件，回到顶部特效

<!doctype html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="Generator" content="EditPlus®">

<meta name="Author" content="作者">

<meta name="Keywords" content="关键词">

<meta name="Description" content="描述">

<title>标题</title>

<style type="text/css">

*{margin:0px;padding:0px;}

body{width:100%;height:900px;background:url("images/bg.jpg") no-repeat center;}

#coniter{}

/*#coniter .rightClick{background:#fff;border:1px solid red;height:300px;width:200px;}*/

#coniter .rightClick ul{background:#fff;width:200px;font-size:15px;font-weight:bold;font-family:"微软雅黑";line-height:35px;position:absolute;top:200px;left:200px;list-style:none;text-indent:24px;box-shadow:10px 10px 20px #000;display:none;}

#coniter .rightClick ul li{border-bottom:1px solid #cccccc;}

#coniter .rightClick ul li:hover{ background:#6699cc;border-bottom:1px solid #fff;}

#coniter .rightClick ul li a{text-decoration:none;color:#000;text-shadow:0px 0px 1px #000;}

#coniter .rightClick ul li a:hover{color:#ccc;padding-bottom:5px;white-space:nowrap;border-bottom:1px solid rgb(0,0,0,0.5);text-shadow:1px 1px 1px #000;padding:0 0 6 0;

border-bottom-color:0;

border-bottom-width:1px;

border-bottom-style:solid;

}

#coniter #top{width:50px;height:40px;position:fixed;bottom:40px;right:40px;background:#000;border-radius:5px;cursor:pointer;box-shadow:0 1px 5px rgba(0,0,0,.7);display:none;}/*圆角，手型鼠标，阴影的样式border-radius:5px;cursor:pointer;box-shadow:0 1px 5px rgba(0,0,0,.7);*/

#coniter #top img{margin:6px 11px;}

</style>

</head>

<body>

<div id="coniter">

<div class="rightClick">

<ul>

<li onclick="tz_menu(1);"><a href="#">添加应用</a></li>

<li onclick="tz_menu(2);"><a href="#">获取课程</a></li>

<li onclick="tz_menu(3);"><a href="#">添加笔记</a></li>

<li onclick="tz_menu(4);"><a href="#">刷新</a></li>

<li onclick="tz_menu(5);"><a href="#">上传资料</a></li>

<li onclick="tz_menu(6);"><a href="#">更换背景</a></li>

<li onclick="tz_menu(7);"><a href="#">注销</a></li>
</ul>

</div>

<div id="top">

<img src="./images/icon_top.png">

</div>

</div>

<script type="text/javascript" src='./js/jquery-1.11.1.min.js'></script>

<script type="text/javascript" >

document.oncontextmenu= function(){

return false;//返回值为false 表示禁止右击显示原来的浏览器菜单

};//屏蔽浏览器自带的右击菜单功能函数function(){}及方法oncontextmenu

$(document).mousedown(function(e){//此处的e只是个占位符参数，名称可以自定义

var key=e.which;

//alert(key);//打印出鼠标点击事件的普通鼠标三个序列号：1代表左击事件，2代表点击了中间的滚轮3代表右击事件。

if(key==3){

var x=e.clientX; //捕获到鼠标点击时候的X坐标并赋值给变量x

var y=e.clientY;//捕获到鼠标点击时候的Y坐标并赋值给变量y

var menuHeight=$(".rightClick ul").height();//获取右击菜单的高度

var menuWidth=$(".rightClick ul").width();//获取右击菜单的宽度

var clientHeight=getClientHeight();//获取浏览器的可见高度

var clientWidth=getClientWidth();//获取浏览器的可见宽度

/*保证下面不超出可见高度*/

if(menuHeight+y>clientHeight){

y=clientHeight-menuHeight-5;

};//如果菜单的高度加上鼠标右击时的Y轴坐标大于浏览器的可见高度，即超出了范围，菜单的一部分会不遮到，则重置右击菜单的位置保证不被遮盖到，满足此条件后的重设高度为clientHeight-menuHeight,此时，菜单底部正好与浏览器底部一齐，-5后为保证与底部有5个像素的距离
/*保证右边不超出可见宽度度*/

if(menuWidth+x>clientWidth){

x=clientWidth-menuWidth-10;

};

$(".rightClick ul").show().css({left:x,top:y});//3代表鼠标右键点击事件，当监听到key为3时，根据选择器查找到ul元素，用show()方法显示出本来已经影藏的元素ul标签并赋予标签新的样式：本质上讲就是利用绝对定位动态的改变元素的位置变化，这个变化是由鼠标点击时候的位置值决定的。

};

});
$(document).click(function(){//获取整个文档对象，对整个文档进行点击时

$(".rightClick ul").hide();//点击任意键菜单消失，当是右击的时候还是会执行上面的右击事件显示菜单只是显示位置的改变

});

function tz_menu(i){//在上面的标签中给出了参数i的值，当然这里也可以用语句获取索引来区别点击不同<li>标签的事件，但是用索引的话会麻烦些，这里只用简单的方式处理。

//alert(i);

if(i==1){//根据传递来的i参数值，做判断后执行相应的代码块；同样可以用swich方法实现此功能。

alert("添加应用");//这里只是打印出内容，具体做什么拓展，可自己定于代码来实现。

}else if(i==2){

}else if(i==3){

}else if(i==4){
}else if(i==5){
}else if(i==6){
}else{

};
};

//浏览器可见高度兼容性的写法所有浏览器都可用

function getClientHeight(){

var clientHeight=0;

if(document.body.clientHeight && document.documentElement.clientHeigt){

clientHeight=(document.body.clientHeight<document.documentElement.clientHeight)?document.body.clientHeight:document.documentElement.clientHeight;

}else{

clientHeight=(document.body.clientHeight>document.documentElement.clientHeight)?

document.body.clientHeight:document.documentElement.clientHeight;

}

return clientHeight;

}
//浏览器可见宽度兼容性的写法所有浏览器都可用

function getClientWidth(){

var clientWidth=0;

if(document.body.clientWidth && document.documentElement.clientWidth){

clientWidth=(document.body.clientWidth<document.documentElement.clientWidth)?document.body.clientWidth:document.documentElement.clientWidth;

}else{

clientWidth=(document.body.clientWidtht>document.documentElement.clientWidth)?

document.body.clientWidth:document.documentElement.clientWidth;

}

return clientWidth;

}
$(window).scroll(function(){//滚动条滚动触发的事件判断什么条件下影藏和显示回到顶部的图标

if($(window).scrollTop()>=100){//滚动条滚动到距离顶部scrollTop大于100px时，显示出回到顶部的图标

$("#top").fadeIn(300);//大于100则用300毫秒淡入fadeIn的方式进来

}else{

$("#top").stop(true, true).fadeOut("300");//否则，不大于100则用300毫秒淡出fadeOut的方式消去，不用stop的方法会有BUG ，当你来回滚动滚动条时候，会进过多次闪烁图标。用stop来阻止此BUG

};

});
$("#top").click(function(){//点击返回顶部图标元素的时候触发的函数

$("html,body").animate({//html和body两个元素的动画。

scrollTop:0//滚动条用2000毫秒的时间，把滚定条距离顶部的高度变化为0px.

},2000);
});

</script>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航