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

2023-01-23 原文

class="htmlarea">

<title>ads</title>
<style type="text/css"> body{ font-size:12px; margin:0px; } /**for ads**/ h1{ font-size:14px; } .ads{ margin:0px auto; width:325px; height:190px; border:1px solid #ddd; } </style>
<h1>CSDN右下角悬挂效果</h1>  <style type="text/css"> #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; } </style>
<div id="ads_14" class="ads_14"> <h6 id="drag"><div id="head">
<em><img id="small" src="https://resources.devmax.cn/uploads/20230123/7ea5668189d7ace4818864aa8b00f6a9.gif" border="0"></em><em>&nbsp;&nbsp;&nbsp;</em><em><img id="close" src="https://resources.devmax.cn/uploads/20230123/1b30e2e2d2d7f56bdd6faaf08cd155e2.gif" border="0"></em>
</div></h6> <div id="msg_top"> <ul class="msg_top_left">
<li> <img src="https://resources.devmax.cn/uploads/20230123/9daca13dcdf4027384563ee40d9de9fa.bmp">
</li> </ul>
<ul class="msg_top_right">
<li>微软启动最严厉反盗版验证</li> <li>Mozilla建开发者工具实验室</li> <li>Google Apps安全漏洞揭秘</li> <li>微软发布Silverlight2 </li> <li>WinHEC邀您一起揭开Window</li> </ul>
</div> <div id="msg_buttom"> <ul>
<li>微软与您畅享[奇迹之</li> <li>汽车信息化机遇与挑战</li> <li>计算机程序的行为学</li> <li>独立思考能力从哪里来</li> </ul>
<ul>
<li>避免肥胖十五条法则</li> <li>清明节第一次相亲</li> <li>不要爱上论坛女人</li> <li>IBM</li> </ul>
</div> </div> <div id="hidden"></div>   <script language="javascript"> 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<0 ?0:a.clientX); if(!a.pageY)a.pageY = (a.clientY <0 ?0:a.clientY); var tx = a.pageX-x, ty = a.pageY-y; if(isIE){ ty = ty   document.documentElement.scrollTop - document.documentElement.clientTop; } container.style.position = "absolute"; container.style.left = tx "px"; container.style.top = ty "px"; }; d.onmouseup=function(){ if(drag.releaseCapture) drag.releaseCapture(); else if(window.captureEvents) window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP); d.onmousemove=null; d.onmouseup=null; }; }; }else{ container.style.cursor="pointer"; drag.style.cursor="move"; } }catch(e){ alert(e); } } } msgBox.prototype.$ = function(ele) { return document.getElementById(ele); } var msgBox1 = new msgBox(); msgBox1.auto(); </script>

[Ctrl A 全选注:引入外部Js需再刷新一下页面才能执行]

仿CSDN 右下角悬挂的浮动层效果的更多相关文章

Swift 字符串替换/过滤/切割/拼接

替换为/结果过滤过滤掉单个字符/结果过滤掉开头和结尾的空白结果切割对字符串使用/作为分隔符来切割，不允许空字符串使用split函数结果是一个数组对字符串使用/作为分隔符来切割，允许空字符串结果拼接结果
Swift教程之String的运用
CSDN社区之星杨宏焱：苹果开源Swift的那些事

本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至dio@foxmail.com举报，一经查实，本站将立刻删除。
Swift开发教程--字符串的操作

替换把?替换为/结果
工具类YJUtils

在Swift开发工程中，我们会封装一些常用的工具类，这里我封装了YJUtils。
jQuery实现的右下角广告窗体跟随效果示例

这篇文章主要介绍了jQuery实现的右下角广告窗体跟随效果,涉及jQuery结合时间函数动态操作页面元素属性的相关技巧,需要的朋友可以参考下
Js右下角视频广告代码(百度视窗)

发一个百度视窗的代码，Js右下角视频广告的代码，从百度网站扒下，没经任何修改，原汁原味，有需要请复制代码。
js右下角与漂浮广告代码(兼容多浏览器)

这个右下角QQ漂浮广告代码兼容多浏览器，确实不错，需要的朋友可以参考下。
右下角弹出窗口效果代码

右下角弹出广告代码一般用户广告代码中，这段代码用了iframe加载页面
javascript qq右下角滑出窗口 sheyMsg

在IE Tester V0.4.1 IE6/+,Firefox3.5,Chrome3.0,Opera 9.64以及Safari4.0.3下测试通过的qq 右下角

随机推荐

js中‘!.’是什么意思
Vue如何指定不编译的文件夹和favicon.ico

这篇文章主要介绍了Vue如何指定不编译的文件夹和favicon.ico，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
基于JavaScript编写一个图片转PDF转换器

本文为大家介绍了一个简单的 JavaScript 项目，可以将图片转换为 PDF 文件。你可以从本地选择任何一张图片，只需点击一下即可将其转换为 PDF 文件，感兴趣的可以动手尝试一下
jquery点赞功能实现代码点个赞吧!

点赞功能很多地方都会出现，如何实现爱心点赞功能，这篇文章主要为大家详细介绍了jquery点赞功能实现代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
AngularJs上传前预览图片的实例代码

使用AngularJs进行开发，在项目中，经常会遇到上传图片后，需在一旁预览图片内容，怎么实现这样的功能呢？今天小编给大家分享AugularJs上传前预览图片的实现代码，需要的朋友参考下吧
JavaScript面向对象编程入门教程

这篇文章主要介绍了JavaScript面向对象编程的相关概念，例如类、对象、属性、方法等面向对象的术语，并以实例讲解各种术语的使用，非常好的一篇面向对象入门教程,其它语言也可以参考哦
jQuery中的通配符选择器使用总结

通配符在控制input标签时相当好用,这里简单进行了jQuery中的通配符选择器使用总结,需要的朋友可以参考下
javascript 动态调整图片尺寸实现代码

在自己的网站上更新文章时一个比较常见的问题是：文章插图太宽，使整个网页都变形了。如果对每个插图都先进行缩放再插入的话，太麻烦了。
jquery ajaxfileupload异步上传插件

这篇文章主要为大家详细介绍了jquery ajaxfileupload异步上传插件，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
React学习之受控组件与数据共享实例分析

这篇文章主要介绍了React学习之受控组件与数据共享,结合实例形式分析了React受控组件与组件间数据共享相关原理与使用技巧,需要的朋友可以参考下