直接看效果点这里
HTML
<!DOCTYPE html> <html> <head lang="zh-CN"> <meta charset="utf-8"> <title> 浮窗 </title> <style> * { margin: 0; padding: 0; } .staff { width: 1200px; margin: 0 auto; height: 800px; line-height: 800px; text-align: center; font-size: 40px; background-color: #ccc; } .mod { width: 100px; height: 100px; background-color: red; } </style> </head> <body style="height: 2000px"> <div class="staff">width*1200</div> <div class="mod t-l">top left</div> <div class="mod t-c">top center</div> <div class="mod t-r">top right</div> <div class="mod c-l">center left</div> <div class="mod c-c">center center</div> <div class="mod c-r">center right</div> <div class="mod b-l">bottom left</div> <div class="mod b-c">bottom center</div> <div class="mod b-r">bottom right <a href="javascript:;" class="J_BackTop">返回</a></div> <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script> <script src="jquery.popup.js"></script> <script> $('.t-l').popup({ 'pos': 'top left', 'screenWidth': 1200 }); $('.t-c').popup({ 'pos': 'top center', 'screenWidth': 1200 }); $('.t-r').popup({ 'pos': 'top right', 'screenWidth': 1200 }); $('.c-l').popup({ 'pos': 'center left', 'screenWidth': 1200 }); $('.c-c').popup({ 'pos': 'center center', 'screenWidth': 1200 }); $('.c-r').popup({ 'pos': 'center right', 'screenWidth': 1200 }); $('.b-l').popup({ 'pos': 'bottom left', 'screenWidth': 1200 }); $('.b-c').popup({ 'pos': 'bottom center', 'screenWidth': 1200 }); $('.b-r').popup({ 'pos': 'bottom right', 'screenWidth': 1200, 'backTop': 400 }); </script> </body> </html>
JS
/** * @description: 浮窗 * @author: jununx@gmail.com * @update: 2014/11/10 * * @param pos{string} 定位位置，可选 ['top left', 'top center', 'top right', 'center left', 'center center', 'center right', 'bottom left', 'bottom center', 'bottom right'] * @param screenWidth{number} 可选，贴近页面宽，例如：页面主体宽960，想让浮窗贴着主体对齐时设置这个宽度 * @param backTop{number|object} 如果有参数就表示这个对象或者里面的子元素有返回顶部，如果是number就表示speed，如果是object就给里面需要返回顶端功能的元素设置{'childClass': 'yourClassName', 'speed': number} */ ;(function($){ var methods = { init: function(opts){ this.bindEvents(opts); }, isIE6: function(){ return (!-[1,] && !window.XMLHttpRequest); }, setPos: function(opts){ var win = $(window), scrollLeft = this.isIE6() ? win.scrollLeft() : 0, scrollTop = this.isIE6() ? win.scrollTop() : 0, winW = win.width(), winH = win.height(), objW = opts.that.width(), objH = opts.that.height(), winHalfW = (winW - objW) / 2, winHalfH = (winH - objH) / 2, screenWidth = opts.screenWidth, screenLeft = screenWidth ? (winW - screenWidth) / 2 - objW : 0, screenRight = screenWidth ? (winW - screenWidth) / 2 + screenWidth : winW - objW, pos = { 'top left': { 'top': scrollTop, 'left': screenLeft }, 'top center': { 'top': scrollTop, 'left': winHalfW }, 'top right': { 'top': scrollTop, 'left': screenRight }, 'center left': { 'top': winHalfH + scrollTop, 'left': screenLeft }, 'center center': { 'top': winHalfH + scrollTop, 'left': winHalfW + scrollLeft }, 'center right': { 'top': winHalfH + scrollTop, 'left': screenRight }, 'bottom left': { 'top': winH - objH + scrollTop, 'left': screenLeft }, 'bottom center': { 'top': winH - objH + scrollTop, 'left': winHalfW + scrollLeft }, 'bottom right': { 'top': winH - objH + scrollTop, 'left': screenRight } }; if(this.isIE6()){ opts.that.css('position', 'absolute').css(pos[opts.pos]); }else{ opts.that.css('position', 'fixed').css(pos[opts.pos]); } }, bindEvents: function(opts){ var that = this; $(window).on('load scroll resize', function(){ that.setPos(opts); }); if (typeof opts.backTop === 'number') { opts.that.on('click', function(){ that.backTop(opts.backTop); }); } else if (typeof opts.backTop === 'object') { opts.that.find('.'+opts.backTop.childClass).on('click', function(){ that.backTop(opts.backTop.speed); }); } }, backTop: function(speed){ $('html, body').animate({'scrollTop': 0}, speed); return false; } }; $.fn.popup = function(opts){ opts = $.extend({ 'that': this, 'pos': 'bottom right', 'screenWidth': 0, 'backTop': 0 }, opts || {}); methods.init(opts); return this; }; })(jQuery); //use $('.t-l').popup({ 'pos': 'top left', 'screenWidth': 1200 }); $('.t-c').popup({ 'pos': 'top center', 'screenWidth': 1200 }); $('.t-r').popup({ 'pos': 'top right', 'screenWidth': 1200 }); $('.c-l').popup({ 'pos': 'center left', 'screenWidth': 1200 }); $('.c-c').popup({ 'pos': 'center center', 'screenWidth': 1200 }); $('.c-r').popup({ 'pos': 'center right', 'screenWidth': 1200 }); $('.b-l').popup({ 'pos': 'bottom left', 'screenWidth': 1200 }); $('.b-c').popup({ 'pos': 'bottom center', 'screenWidth': 1200 }); $('.b-r').popup({ 'pos': 'bottom right', 'screenWidth': 1200, 'backTop': 400 });