扫一扫
分享文章到微信
扫一扫
关注官方公众号
至顶头条
来源：中国IT实验室 2013年3月7日
关键字： Jquery
ZDNet至顶网软件频道： jQuery 是一个快速、简单的JavaScript library, 它简化了HTML 文件的traversing,事件处理、动画、Ajax 互动,从而方便了网页制作的快速发展，本文的代码示例是jquery不同方向的卷帘效果。
demo01.htm
[html]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>方向反馈</title>
<style type="text/css">
html,body{margin:0;padding:50px;}
#wrap{position:relative;width:400px;height:300px;background:#33aa00;margin:50px;display:inline-block;font-size:50px;text-align:center;line-height:300px;overflow:hidden;}
</style>
<body>
<div id="wrap">
方向反馈
</div>
<div id="result" >
<span style="color:#FFF;">反馈方向</span>
</div>
<script src="/jquery-1.8.0.min.js" type="text/javascript"></script>
<script src="rollingMask-0.1.0.js" type="text/javascript"></script>
<script type="text/javascript">
$（document）。ready（function（）{
$.rollingMask（{
objId:"wrap",
content:$（"#result"）。html（）
}）；
}）；
</script>
</body>
</html>
rollingMask-0.1.0.js
[javascript]
/**
* 不同方向的卷帘效果
*
**/
$.extend（{
rollingMask:function（opt,callback）{
this.defaults = {
objId:"", // 容器id
content:"test", // 卷帘内容
opacity: 0.8,
fadeSpeed:150 // 卷帘消失的时间
};
// 参数初始化
var opts = $.extend（this.defaults,opt）；
var contentId = opts.objId + "_content";
var showId = opts.objId + "_show";
$（"#" + opts.objId）。bind（"mouseenter mouseleave",
function（e） {
var w = $（this）。width（）；
var h = $（this）。height（）；
var x = （e.pageX - this.offsetLeft - （w / 2）） * （w > h ? （h / w） : 1）；
var y = （e.pageY - this.offsetTop - （h / 2）） * （h > w ? （w / h） : 1）；
var direction = Math.round（（（（Math.atan2（y, x） * （180 / Math.PI）） + 180） / 90） + 3） % 4;
var eventType = e.type;
if（e.type == 'mouseenter'）{
$（"#" + opts.objId）。append（"<div id=\"" + contentId+ "\">" + opts.content + "</div>"）；
$（"#" + contentId）。css（{
"position":"absolute",
"width":w + "px",
"height":h + "px",
"top":"0px",
"left":"0px",
"background":"#F55",
opacity:opts.opacity
}）；
switch（direction）{
case 0:
$（"#" + contentId）。css（"top",-h + "px"）；
break;
case 1:
$（"#" + contentId）。css（"left",w + "px"）；
break;
case 2:
$（"#" + contentId）。css（"top",h + "px"）；
break;
case 3:
$（"#" + contentId）。css（"left",-w + "px"）；
break;
}
$（"#" + contentId）。animate（{"top":"0px","left":"0px"}）；
}else{
$（"#" + contentId）。fadeOut（opts.fadeSpeed, function（）{
$（"#" + contentId）。remove（）；
}）；
}
}
）；
}
}）；
jQuery 是一个快速、简单的JavaScript library, 它简化了HTML 文件的traversing,事件处理、动画、Ajax 互动,从而方便了网页制作的快速发展。
如果您非常迫切的想了解IT领域最新产品与技术信息，那么订阅至顶网技术邮件将是您的最佳途径之一。
现场直击｜2021世界人工智能大会
直击5G创新地带，就在2021MWC上海
5G已至 转型当时——服务提供商如何把握转型的绝佳时机
寻找自己的Flag
华为开发者大会2020（Cloud）- 科技行者
京公网安备 11010802021500号