一个抖动和弹窗的页面特效
2014-02-08 14:23
218 查看
做一个通用式的弹窗:
jquery集成抖动效果:
用法:
这个效果在页面不为当前页的时候会积累抖动时间,不好用。
推荐:
用法:
另外监视滚动:
计算页面滚动:
注:document.body是DOM中Document对象里的body节点, document.documentElement是文档对象根节点(html)的引用。 document.body.scrollHeight是body元素的滚动高度,document.documentElement.scrollHeight为页面的滚动高度,且 document.documentElement.scrollHeight在IE和Firefox下还有点小差异。
//加载jquery document.writeln("<script type=\"text/javascript\" src=\"/js/jquery-1.7.2.min.js\" charset=\"gb2312\"></script>"); //加载弹窗的样式 document.writeln("<style type=\"text/css\">"); document.writeln("#qqshark_mid{width:287px; height: 158px; top: 250px; position: fixed; left: 448px; background-position: initial initial;display:none;z-index: 200;}"); //注意z-index值弹窗层的值要比遮盖层的高一些,不然会被其遮住 document.writeln(".swt_tcqq{position:absolute;z-index: 10002;}.leftexit{float:left;width:55px;height:31px;z-index: 10003;}"); document.writeln(".swt_tchf{display:none;position:absolute;width:289px; height:54px; margin:170px 0 0 15px;}"); document.writeln("#mcover {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.7);display: none;z-index: 10000;}"); document.writeln(".qqshark_swtDisplay{width:168px; height:527px;position:fixed;_position:absolute;display:none;right:2px;top:5px;}"); document.writeln("</style>"); document.writeln("<div id=\"qqshark_mid\">"); document.writeln("<div id=\"mcover\" > </div>"); //弹窗 document.writeln(" <div class=\"swt_tcqq\"><a style=\"width:55px; height:32px; top:0px; left:0px; position:absolute;\" href=\"javascript:leftexit();\" target=\"_self\" title=\"关闭\">...</a><a href=\"tel:0371-60325095\" target=\"_blank\"><img src=\"./手机站_files/20130701_bj.gif\" border=\"0\" usemap=\"#qqshark_MapTc\" /></a>"); document.writeln("</div>"); document.writeln(" </div>"); //是否被关闭 var upprev_closed = true; function showtime(){ $('#qqshark_mid').css('display', 'block'); $('#mcover').css('display', 'block'); play_click('sound.mp3'); } function leftexit(){ $('#qqshark_mid').css('display', 'none'); $('#mcover').css('display', 'none'); upprev_closed=!upprev_closed; } //最后执行 $(function() { var a = $('#qqshark_mid').width(); //$(window).width()取得页面可见部分的宽度 var leftnum = ($(window).width() -a) / 2; var b = $('#qqshark_mid').height(); var topnum = ($(window).height()-b ) / 2; $('#qqshark_mid').css('left', leftnum + 'px').css('top', topnum + 'px'); setInterval(function(){ if(upprev_closed){ upprev_closed=!upprev_closed; //函数调用要写在匿名函数中 setTimeout(function(){showtime()},4000) } },1000); $('#qqshark_mid').css('display', 'none'); })
jquery集成抖动效果:
jQuery.fn.shake = function(intShakes /*Amount of shakes*/, intDistance /*Shake distance*/, intDuration /*Time duration*/) { this.each(function() { var jqNode = $(this); jqNode.css( {'position': 'fixed'} ); for (var x=1; x<=intShakes; x++) { jqNode.animate({ right: "-="+(intDistance) },(((intDuration / intShakes) / 4))) .animate({ bottom: "-="+(intDistance) },(((intDuration / intShakes) / 4))) .animate({ right: "+="+intDistance*2 },((intDuration/intShakes)/2)) .animate({ bottom: "+="+intDistance*2 },((intDuration/intShakes)/2)) .animate({ right: "-="+(intDistance) },(((intDuration/intShakes)/4))) .animate({ bottom: "-="+(intDistance) },(((intDuration/intShakes)/4))); } }); return this;
用法:
setInterval(function(){ $('#qqshark').shake(6,4,120); },3000);
这个效果在页面不为当前页的时候会积累抖动时间,不好用。
推荐:
function shake(){ var a=['bottom','right'],b=0; var u=setInterval(function(){ $('#qqshark').css( a[b%2] , (b++)%4<2?0:4 ); if(b>17){ clearInterval(u); b=0; } },30) }
用法:
setInterval(function(){ shake(); },3000);
另外监视滚动:
$(window).scroll(function() { if ($(".wzy_shangx").length > 0) lastScreen = getScrollY() + $(window).height() < $(".wzy_shangx").offset().top * 1 ? false : true; else lastScreen = getScrollY() + $(window).height() < $(document).height() * 1 ? false : true; if (lastScreen && !upprev_closed) { $('#mid').css('display', 'block'); } }); })
计算页面滚动:
function getScrollY() { scrOfY = 0; //pageYOffset:属于window对象,IE9+ 、firefox、chrome,opera均支持。另scrollY: 属于window对象,firefox、chrome,opera支持,IE不支持 if( typeof( window.pageYOffset ) == "number" ) { scrOfY = window.pageYOffset; //页面如果未定义doctype文档头,所有的浏览器都支持document.body.scrollTop属性获取滚动高度。 } else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) { scrOfY = document.body.scrollTop; } else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) { scrOfY = document.documentElement.scrollTop; } return scrOfY; }
注:document.body是DOM中Document对象里的body节点, document.documentElement是文档对象根节点(html)的引用。 document.body.scrollHeight是body元素的滚动高度,document.documentElement.scrollHeight为页面的滚动高度,且 document.documentElement.scrollHeight在IE和Firefox下还有点小差异。
相关文章推荐
- 一个页面弹窗多个
- 一个页面跳转向另一个页面的不同系统特效
- 一个关于LigerUI打开一个弹窗页面并将数据返回的方法
- 分享一个2014年圣诞节倒计时页面特效
- dialog使用方法(同一页面,调用一个js代码,实现多个不同样式的弹窗)
- 纯JS焦点图特效(可一个页面多用)
- 分享一个自己利用javascript中的window.setInterval()定时器实现页面背景图片变换的特效(同时淡入淡出效果)
- 用bootstrap写弹窗,页面抖动问题
- 登录按钮点击之后本页出现一个小的页面,类似于弹窗
- 【特效】弹窗效果(多个页面可统一调用,带遮罩背景)
- 一个不错的页面特效
- 纯JS焦点图特效实例(可一个页面多用)
- 一个简单的页面跳转特效
- 一个简单的页面弹窗插件 jquery.pageMsgFrame.js
- js页面弹出一个带有输入框的弹窗,并判断点击的是确定还是取消按钮
- 单个页面多个按钮调用同一个弹窗,和滚屏展示效果,关闭后,5秒自动弹出滚屏展示!
- JS弹窗广告特效代码,一个IP只弹出1次
- 偶然发现的一个页面加载缓冲特效 sonic
- 一个完整页面应该包含的三个部分。加载中加载完都有不同的特效
- 同一个页面多个ajax提交,速度缓慢