一个抖动和弹窗的页面特效

做一个通用式的弹窗：

 

//加载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下还有点小差异。