仿CSDN 右下角悬挂的浮动层效果

ads

body{
font-size:12px;
margin:0px;
}
/**for ads**/
h1{
font-size:14px;
}
.ads{
margin:0px auto;
width:325px;
height:190px;
border:1px solid #ddd;
}

CSDN右下角悬挂效果

#ads_14{
float:right;
font-family: verdana,sans-serif;
}
#ads_14 H6
{
width:282px;
height:27px;
padding:0px;
margin:0px;
background:url(images/skin/bg.gif) no-repeat;
}
#ads_14 #drag
{
cursor:move;
}
#ads_14 #head
{
float:right;
width:45px;
height:27px;
line-height:27px;
cursor:pointer;
}
#msg_top
{
width:279px;
height:105px;
border-left:#CDCDCD 1px solid;
border-right:#CDCDCD 1px solid;
}
ul
{
padding:0px;
margin:0px;
list-style:none;
}
.msg_top_left
{
float:left;
width:80px;
height:105px;
padding-right:10px;
border-bottom:#CDCDCD 1px dashed;
}
.msg_top_right
{
float:left;
width:175px;
height:105px;
padding-left:10px;
border-bottom:#CDCDCD 1px dashed;
}
.msg_top_right a
{
font-size:12px;
text-decoration:none;
line-height:20px;
}
#msg_buttom
{
width:279px;
height:100px;
border-left:#CDCDCD 1px solid;
border-right:#CDCDCD 1px solid;
border-bottom:#CDCDCD 1px solid;
}
#msg_buttom ul
{
float:left;
width:120px;
height:102px;
line-height:20px;
padding:5px;
}

   

var data = {
'bs' : 'http://www.test.com',
'as': 'http://localhost/adsformat/',
'ad' :[['2','images/2007032256654.jpg', 'rd?go=eJxNjk1rwz']]
};
function msgBox()
{
this.container = "ads_14";
this.dragArea = "drag";
this.width = 282;
this.height = 235;
this.smallHeight = 27;
this.smallId = "small";
this.closeId = "close";
this.area = ( document.compatMode.toLowerCase()=="css1compat" ) ? document.documentElement : document.body;
this.space = 15;
this.timer;
this.timeOut = 150;
this.smalled = false;
window.msgBoxListener = this;
this.$(this.smallId).onclick= function(){msgBoxListener.toSmall()};
this.$(this.closeId).onclick = function(){msgBoxListener.close()};
}
msgBox.prototype.flow = function()
{
this.$(this.container).style.position = "absolute";
this.$(this.container).style.zIndex = "1000";
if(this.smalled)
{
this.$(this.container).style.top = this.area.scrollTop + this.area.clientHeight - this.smallHeight - this.space + "px";
}else{
this.$(this.container).style.top = this.area.scrollTop + this.area.clientHeight - this.height - this.space + "px";
}
this.$(this.container).style.left = this.area.scrollLeft + this.area.clientWidth - this.width - this.space + "px";
}
msgBox.prototype.toSmall = function()
{
if(this.smalled)
{
this.$(this.smallId).src = "images/skin/small.gif";
this.$(this.container).style.marginTop = -this.height + "px";
this.$(this.container).style.height = this.height + "px";
this.$(this.container).style.overflow = "hidden";
this.smalled = false;
this.flow();
this.$(this.container).style.marginTop = "0px";
}else{
this.$(this.smallId).src = "images/skin/big.gif";
this.$(this.container).style.height = this.smallHeight + "px";
this.$(this.container).style.overflow = "hidden";
this.smalled = true;
this.flow();
}
}
msgBox.prototype.close = function()
{
document.body.removeChild(this.$(this.container));
}
msgBox.prototype.auto = function()
{
this.flow();
window["onresize"]=function(){msgBoxListener.flow();};
window["onscroll"]=function(){msgBoxListener.flow();};
document.onmousedown = function(){clearInterval(msgBoxListener.timer);msgBoxListener.drag(msgBoxListener.container, msgBoxListener.dragArea);};
}
msgBox.prototype.drag = function(container, drag)
{
var IMOUSEDOWN = true;
var isIE = (navigator.appVersion.indexOf("MSIE") != -1) ? true : false;
container = document.getElementById(container);
drag = document.getElementById(drag);
if(drag)
{
try{
if(IMOUSEDOWN){
drag.onmousedown=function(a){
var d=document;
if(!a)a=window.event;
drag.style.cursor="move";
var x=a.layerX?a.layerX:a.offsetX,y=a.layerY?a.layerY:a.offsetY;
if(drag.setCapture)
drag.setCapture();
else if(window.captureEvents)
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
d.onmousemove=function(a){
if(!a)a=window.event;
if(!a.pageX)a.pageX = (a.clientX

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

(0)

相关推荐

  • MooTools 页面滚动浮动层智能定位实现代码

    HTML代码: 复制代码 代码如下: <div class="float" id="float"> 我是个腼腆羞涩的浮动层... </div> JS代码: 复制代码 代码如下: var $smartFloat = function(elements) { var position = function(element) { var top = element.getPosition().y, pos = element.getStyle(&q

  • jQuery powerFloat万能浮动层下拉层插件使用介绍

    一.写插件的缘由 为什么想写此插件,想来想去,归结为一个字:"懒".不想为明明两个类似的功能分别写代码,本应喝茶看美女的休闲时光晃荡在本可避免的代码上,对于我来讲,就是白白耗费自己的青春.于是,干脆,一鼓作气,把这些类似的功能集合到一起,一个插件搞定,一了百了了.这种感觉就好比<大话西游>里悟空一巴掌拍死唐僧这只苍蝇一样.那,这里提及的类似的功能是指?当当当当,就是与某元素有位置关系的浮动层(例如tip类效果,鼠标经过显示大图,下拉列表等). 二.插件概述 插件名为jque

  • 基于jquery的浮动层效果代码

    本浮动层基于jQuery1.6.2,对于研究1.6版本的jquery很有帮助意义. jquery浮动层 #Float {background-color: #000;height: 200px;width: 100px;position: absolute;top: 80px;right: 20px;} $(document).ready(function(){ $(window).scroll(function (){ var offsetTop = $(window).scrollTop()

  • 关于flash遮盖div浮动层的解决方法

    网上的解决方案: From:http://codingforums.com/showthread.php?t=95109 (a) place Flash embed script in <div> container (I use SWFObject.js)[将flash嵌入脚本放到一个div容器中] (b) add wmode=transparent to Flash embed script[增加wmode=transparent 到flash嵌入脚本] (c) set <div i

  • 超级兔子让浮动层消失的前因后果

    刚搞定了瑞星卡卡,又冲来个超级兔子.不过超级兔子的枪法真的有待改善. 还是同样的问题:安装了超级兔子IE工具条的用户购买自动发货商品时,LightBox形式的购买提醒框刚一显示就消失了.而灰蒙的遮蔽层依然显示,用户又无法继续操作了. 根据研究,超级兔子对屏蔽广告的屏蔽原则更为武断,只要是在JavaScript代码中出现类似 "div.style.position=absolute" 的代码,div 就会被隐藏,不仅如此,超级兔子还会检查页面中的元素,只要一个元素以inline形式设置了

  • jQuery页面滚动浮动层智能定位实例代码

    HTML代码: 复制代码 代码如下: <div class="float" id="float"> 我是个腼腆羞涩的浮动层... </div> JS代码: 复制代码 代码如下: $.fn.smartFloat = function() { var position = function(element) { var top = element.position().top, pos = element.css("position&q

  • 经典的带阴影的可拖动的浮动层

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><title>MyPixbot</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><script language

  • jQuery实现页面滚动时层智能浮动定位实例探讨

    各位兄弟可能碰到定位的问题,特别是在博客或者微博上面也会见到这个效果,于是产品人员在策划的时候就会要人家那种效果,,,而苦逼的我们需要去实现,实现实现.....没办法,谁让我们是攻城师呢,攻吧: 效果图如下,滚动条下拉的时候黑色的块TOP为0:固定显示: 代码如下: 复制代码 代码如下: <!DOCTYPE html> <html > <head> <title>jQuery实现页面滚动时层智能浮动定位</title> <meta name

  • js 浮动层菜单收藏

    使用说明 即仅需把附件中的 JS 文件和 CSS 文件引用到网页里,如: 复制代码 代码如下: <script type="text/javascript" src="DivMenu.js"></script> <link href="DivMenu.css" rel="stylesheet" type="text/css" /> 在线演示 http://img.jb51

  • 仿CSDN 右下角悬挂的浮动层效果

    ads body{ font-size:12px; margin:0px; } /**for ads**/ h1{ font-size:14px; } .ads{ margin:0px auto; width:325px; height:190px; border:1px solid #ddd; } CSDN右下角悬挂效果 #ads_14{ float:right; font-family: verdana,sans-serif; } #ads_14 H6 { width:282px; heig

  • js实现仿Discuz文本框弹出层效果

    本文实例讲述了js实现仿Discuz文本框弹出层效果.分享给大家供大家参考.具体如下: 这是一个在经典论坛曾经热讨论的问题,记得在QQ邮箱里也有类似功能,Discuz7.0论坛里同样也有,当你的鼠标单击文本框的时候,会弹出一个包含文字.图片.表单无素的DIV层,里面的元素都可以进行操作,很方便,选中的值会自动添加到文本框内.本代码经过了多次修正,没有进行过多美化,你美工好的话可以自己美化. 运行效果截图如下: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//D

  • JS实现仿微博可关闭弹出层效果

    本文实例讲述了JS实现仿微博可关闭弹出层效果.分享给大家供大家参考.具体如下: 这里推荐给大家一款真心不错的JavaScript网页弹出层,仿微博JS弹出层可关闭,点击按钮才弹出来,可制作成网页客服之类的,比如在网页的右侧显示这么一个按钮,当点击的时候,展开层,显示客服QQ,效果还是很不错的! 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-f-weibo-close-able-alert-codes/ 具体代码如下: <!DOCTYPE

  • js 右侧浮动层效果实现代码(跟随滚动)

    实现代码一. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <!--**

  • jQuery实现浮动层随浏览器滚动条滚动的方法

    本文实例讲述了jQuery实现浮动层随浏览器滚动条滚动的方法.分享给大家供大家参考.具体如下: 这是jQuery实现的一个浮动层效果,随浏览器滚动条而滚动,并一直保持在顶部位置,请使用火狐测试,IE下表现不尽理想. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-float-follow-nav-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0

  • jQuery简单实现仿京东分类导航层效果

    本文实例讲述了jQuery简单实现仿京东分类导航层效果.分享给大家供大家参考,具体如下: <script src="jquery-1.11.1.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { var alink01 = $(".item > ul"); al

  • 基于javascript实现右下角浮动广告效果

    本文实例为大家分享了基于javascript实现右下角浮动广告效果,供大家参考,具体内容如下 效果图: 具体代码: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>右下角广告代码</title> <script type="text/javascript&q

  • jQuery实现弹出带遮罩层的居中浮动窗口效果

    本文实例讲述了jQuery实现弹出带遮罩层的居中浮动窗口效果.分享给大家供大家参考,具体如下: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>pop window</title> <style> *{ padding: 0; margin: 0; } .hide{ display: none

  • jQuery实现div浮动层跟随页面滚动效果

    复制代码 代码如下: <!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=&qu

随机推荐