jquery 卷帘效果实现代码(不同方向)


Posted in Javascript onFebruary 05, 2013

jquery 卷帘效果实现代码(不同方向)
demo01.htm

<!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
/** 
* 不同方向的卷帘效果 
* 
**/ 
$.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(); 
}); 
} 
} 
); 
} 
});
Javascript 相关文章推荐
用js判断页面刷新或关闭的方法(onbeforeunload与onunload事件)
Jun 22 Javascript
jQuery Tools Dateinput使用介绍
Jul 14 Javascript
jquery 实现窗口的最大化不论什么情况
Sep 03 Javascript
jQuery实现购物车计算价格功能的方法
Mar 25 Javascript
JS基于面向对象实现的放烟花效果
May 07 Javascript
javascript运动详解
Jul 06 Javascript
jQuery定义插件的方法
Dec 18 Javascript
js print打印网页指定区域内容的简单实例
Nov 01 Javascript
vue获取input输入值的问题解决办法
Oct 17 Javascript
在vue项目中引入highcharts图表的方法(详解)
Mar 05 Javascript
微信小程序实现发送验证码按钮效果
Dec 20 Javascript
vue 使用饿了么UI仿写teambition的筛选功能
Mar 01 Vue.js
window.open关于浏览器拦截问题分析及解决方法
Feb 05 #Javascript
jQuery.prototype.init选择器构造函数源码思路分析
Feb 05 #Javascript
jQuery不间断滚动效果(模拟百度新闻支持文字/图片/垂直滚动)
Feb 05 #Javascript
得到jQuery detach()后节点中的某个值实现代码
Feb 05 #Javascript
jquery zTree异步加载简单实例分享
Feb 05 #Javascript
JS打印gridview实现原理及代码
Feb 05 #Javascript
漂亮的jquery提示效果(仿腾讯弹出层)
Feb 05 #Javascript
You might like
php开发工具之vs2005图解
2008/01/12 PHP
pdo中使用参数化查询sql
2011/08/11 PHP
thinkPHP多域名情况下使用memcache方式共享session数据的实现方法
2016/07/21 PHP
动态改变textbox的宽高的js
2006/10/26 Javascript
autoPlay 基于jquery的图片自动播放效果
2011/12/07 Javascript
Javascript图像处理—虚拟边缘介绍及使用方法
2012/12/27 Javascript
解决Extjs4中form表单提交后无法进入success函数问题
2013/11/26 Javascript
Javascript中常见的校验如域名、手机、邮箱等等
2014/01/02 Javascript
JavaScript中的类(Class)详细介绍
2014/12/30 Javascript
javascript中hasOwnProperty() 方法使用指南
2015/03/09 Javascript
使用JQuery在线制作ppt并在线演示源码特效
2015/09/08 Javascript
javascript之Boolean类型对象
2016/06/07 Javascript
jQuery的Each比JS原生for循环性能慢很多的原因
2016/07/05 Javascript
微信小程序 loading 详解及实例代码
2016/11/09 Javascript
详解VueJs前后端分离跨域问题
2017/05/24 Javascript
javascript 初学教程及五子棋小程序的简单实现
2017/07/04 Javascript
HTML5+JS+JQuery+ECharts实现异步加载问题
2017/12/16 jQuery
websocket4.0+typescript 实现热更新的方法
2019/08/14 Javascript
对pyqt5多线程正确的开启姿势详解
2019/06/14 Python
Python math库 ln(x)运算的实现及原理
2019/07/17 Python
用Pelican搭建一个极简静态博客系统过程解析
2019/08/22 Python
python numpy 矩阵堆叠实例
2020/01/17 Python
对pytorch的函数中的group参数的作用介绍
2020/02/18 Python
信用社实习人员自我鉴定
2013/09/20 职场文书
电子商务专业在校生实习自我鉴定
2013/09/29 职场文书
学生会主席就职演讲稿
2014/01/14 职场文书
公司应聘自荐书
2014/06/14 职场文书
县政府办公室领导班子个人对照检查材料
2014/09/16 职场文书
英语辞职信怎么写
2015/02/28 职场文书
大学生求职自荐信
2015/03/24 职场文书
2015年小学美术工作总结
2015/05/25 职场文书
python编写函数注意事项总结
2021/03/29 Python
python3.9之你应该知道的新特性详解
2021/04/29 Python
使用Nginx+Tomcat实现负载均衡的全过程
2022/05/30 Servers
Redis+AOP+自定义注解实现限流
2022/06/28 Redis
CSS中理解层叠性及权重如何分配
2022/12/24 HTML / CSS