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 相关文章推荐
jQuery对html元素取值与赋值的方法
Nov 20 Javascript
简单分析javascript面向对象与原型
May 21 Javascript
jQuery实现单击弹出Div层窗口效果(可关闭可拖动)
Sep 19 Javascript
js中substr,substring,indexOf,lastIndexOf,split,replace的用法详解
Nov 09 Javascript
jQuery实现内容定时切换效果完整实例
Apr 06 Javascript
jQuery Easyui快速入门教程
Aug 21 Javascript
详解JS-- 浮点数运算处理
Nov 28 Javascript
EasyUI为Numberbox添加blur事件的方法
Mar 05 Javascript
跟混乱的页面弹窗说再见
Apr 11 Javascript
JS实现移动端点击按钮复制文本内容
Jul 28 Javascript
解决vue+router路由跳转不起作用的一项原因
Jul 19 Javascript
vue打包静态资源后显示空白及static文件路径报错的解决
Sep 02 Javascript
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
Mysql的GROUP_CONCAT()函数使用方法
2008/03/28 PHP
基于php无限分类的深入理解
2013/06/02 PHP
PHP连接MySQL查询结果中文显示乱码解决方法
2013/10/25 PHP
PHP随机生成随机个数的字母组合示例
2014/01/14 PHP
PHP实现返回JSON和XML的类分享
2015/01/28 PHP
php函数重载的替代方法--伪重载详解
2015/05/08 PHP
PHP fprintf()函数用法讲解
2019/02/16 PHP
select组合框option的捕捉实例代码
2008/09/30 Javascript
JS实现漂亮的窗口拖拽效果(可改变大小、最大化、最小化、关闭)
2015/10/10 Javascript
Bootstrap 布局组件(全)
2016/07/18 Javascript
JS中的事件委托实例浅析
2018/03/22 Javascript
[01:39](回顾)各路豪强针锋相对,几经鏖战四强产生
2014/07/01 DOTA
Python中多线程及程序锁浅析
2015/01/21 Python
Python返回真假值(True or False)小技巧
2015/04/10 Python
编写Python CGI脚本的教程
2015/06/29 Python
Python科学计算之Pandas详解
2017/01/15 Python
python如何实现内容写在图片上
2018/03/23 Python
python实现二维数组的对角线遍历
2019/03/02 Python
Python-Flask:动态创建表的示例详解
2019/11/22 Python
对tensorflow中的strides参数使用详解
2020/01/04 Python
学习Python爬虫的几点建议
2020/08/05 Python
MAC平台基于Python Appium环境搭建过程图解
2020/08/13 Python
python 对一幅灰度图像进行直方图均衡化
2020/10/27 Python
电气工程及其自动化学生实习自我鉴定
2013/09/19 职场文书
交通法规咨询中心工作职责
2013/11/27 职场文书
实习生个人的自我评价
2013/12/08 职场文书
给女朋友的道歉信
2014/01/10 职场文书
《大禹治水》教学反思
2014/04/27 职场文书
空气环保标语
2014/06/12 职场文书
群众路线查摆问题及整改措施
2014/10/10 职场文书
KTV员工管理制度
2015/08/06 职场文书
Nginx Rewrite使用场景及配置方法解析
2021/04/01 Servers
FFmpeg视频处理入门教程(新手必看)
2022/01/22 杂记
SpringBoot中HttpSessionListener的简单使用方式
2022/03/17 Java/Android
InterProcessMutex实现zookeeper分布式锁原理
2022/03/21 Java/Android
HTML中实现音乐或视频自动播放案例详解
2022/05/30 HTML / CSS