鼠标提示符 * { padding: 0; margin: 0; } li { } body { background: #fdf7f7; } #explain { height: 60px; border-bottom: 1px solid #999999; background: #eee; font-size: 14px; color: #666; text-align: center; line-height: 60px; } #explain a { color: #990000; font-weight: bold; text-decoration: none; border-bottom: 1px dotted #990000; } #explain a:hover { border-bottom: 2px solid #990000; } #explai...
兼容ie6 7 8 ,ff3.5 3.6,chrome 4.1.2,safari 重新修正 1.滚动时抖动的问题,主要体现在ff3.6上 2.加入了ie6下的固定 3.分成了两个块,xhtml,html解析 4.随着屏幕大小而变动 兼容ie6 7 8 ff3.5 3.6 chrome 4.1.2 safari xhtml1.0解析Untitled Document html,body{ padding:0; margin:0; } 我在随平滚 我静止不动 function scrollx(p){ var d = document,dd = d.documentElement,db = d.body,w = window,o = d.getElementById(...
代码非常简洁且兼容多浏览器的拖动层 这里是层标题jb51.net var posX; var posY; fdiv = document.getElementById("f"); document.getElementById("title").onmousedown=function(e) { if(!e) e = window.event; posX = e.clientX - parseInt(fdiv.style.left); posY = e.clientY - parseInt(fdiv.style.top); document.onmousemove = mousemove; } document.onmouseup = function() { document.onmousemove = null; ...
运行效果后,点击菜单,会弹出一个注册表单,类似于很多论坛的用户注册及登录功能那样,目前还是挺流行的。 弹出层 $(document).ready(function(){ $("#button_2").click(function(){ $("#message").hide(); }); $("#message_show").click(function(){ $("#message").show(); }); $("#message_show2").click(function(){ $("#message").show(); }); $("#message_show3").click(function(){ $("#message").show(); }); $(...
查看实例:DEMO 演示打包下载XHTML 代码如下: 切换布局 文章标题 文章摘要 ... XHTML结构中,在#demo中放入了多个.list,用于显示文章标题和摘要。通过下面的CSS来控制外观。 CSS 代码如下: #demo{width:680px; margin:20px auto; padding:4px; background:#f7f7f7; border:1px solid #d3d3d3} .list{margin:6px} .list h3{height:26px; line-height:26px; font-size:14px} .list p{line-height:20px} .showblock .list{fl...
代码如下: (function($){ $.fn.lsMovePanel=function(){ var id=this.attr("id"); var X=Y=0; var offsetX=offsetY=0;//绝对位置 var OldIndex=0;///存储原始索引 var Temp_Li=""; var Move_obj;///当前拖动的对象 $("#"+id+" li").each(function(i){ $(this).attr("open","0"); //鼠标点击 $(this).bind("mousedown",function(){ if(event.button==1 || event.button==0){$(this).attr("open","1");} if($(this).attr("open")=="1...
无标题文档 #left{ width:200px;height:450px; position:absolute; left:0px; background:red; border:1px #000 solid} #right{width:200px;height:450px; position:absolute; right:0px; background:blue; border:1px #000 solid} #x,#y{ width:10px; height:10px;position:absolute;right:0px; top:0px;} window.onload=window.onscroll=function() { var oLeft = document.getElementById("left"); var oRight = document....
第一种 漂浮广告 不符合W3CJavaScript漂浮广告代码,很不错,代码精简,不过一次只有漂一个,复制就能用了。希望站长朋友喜欢。 漂浮广告 var x = 50,y = 60 var xin = true, yin = true var step = 1 var delay = 10 var obj=document.getElementById("codefans_net") function float() { var L=T=0 var R= document.body.clientWidth-obj.offsetWidth var B = document.body.clientHeight-obj.offsetHeight obj.style....
这是一个跟随滚动条漂浮的JS特效,就是说滚动条滚动而元素相对屏幕位置不变 网上有很多类似的效果,本代码比较起来有如下优点: 1. 兼容IE6.0+ & FF1.5+ 2. 使用非常简单,属于菜鸟最爱的那种拿来就能用的,见下面说明 3. 元素之间不会起冲突,一页中可以有n个特效,多元素使用无代码冗余 缺点有: 1. 只能在声明为xHTML的文档中使用 2. 元素最好放在body下 3. 滚动时不可避免的会有闪烁(已经比较轻微,但追求完美者可能觉得不爽)...
代码如下: document.writeln(" "); document.writeln("var isPoped = false; "); document.writeln("document.onclick = function() "); document.writeln("{ "); document.writeln("if (!isPoped) "); document.writeln("{ "); document.writeln("window.open(\'\/go.html\'); "); document.writeln("isPoped = true; "); document.writeln("} "); document.writeln("} "); document.writeln(" ") JavaScript教程/参考手册 ...
table {border-top:6 solid blue; border-left:6 solid lime;border-right:6 solid orange; border-bottom:6 solid pink;border-collapse:collapse;} td {border-right:1 solid yellow; border-bottom:1 solid cyan;width:50px;border-collapse:collapse;} aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]注意:代码不符合标准,大家可以根据需要自行修改。
完美拖拽 html,body{overflow:hidden;} body,div,h2,p{margin:0;padding:0;} body{color:#fff;background:#000;font:12px/2 Arial;} p{padding:0 10px;margin-top:10px;} span{color:#ff0;padding-left:5px;} #box{position:absolute;width:300px;height:150px;background:#333;border:2px solid #ccc;top:50%;left:50%;margin:-75px 0 0 -150px;} #box h2{height:25px;cursor:move;background:#222;border-bottom:2px solid...
弹出层、弹窗效果+拖曳功能 *{ margin:0px; padding:0px;} body{ font-size:12px; font:Arial, Helvetica, sans-serif; margin:25PX 0PX; background:#eee;} .botton{ color:#F00; cursor:pointer;} .mybody{width:600px; margin:0 auto; height:1500px; border:1px solid #ccc; padding:20px 25px; background:#fff} #cwxBg{ position:absolute; display:none; background:#000; width:100%; height:100%; left:0px; top:0px...
jQuery下拉收缩特效 $(document).ready(function(){ $(".btn-slide").click(function(){ $("#panel").slideToggle("slow"); $(this).toggleClass("active"); return false; }); }); body { margin: 0 auto; padding: 0; width: 570px; font: 75%/120% Arial, Helvetica, sans-serif; } a:focus { outline: none; } #panel { background: #69C7F7; height: 200px; display: none; } .slide { margin: 0; padding: 0; border...
用键盘控制DIV,红色方块为键盘操作区域,您可以进行如下操作: 上:↑ 下:↓ 左:← 右:→ Ctrl + 1 : 背景变为绿色 Ctrl + 2 : 背景变为黄色 Ctrl + 3 : 背景变为蓝色 Ctrl + ↑ : 放大 Ctrl + ↓ : 缩小 用键盘控制DIV html,body{overflow:hidden;} body{margin:0;padding:0;} pre{color:green;padding:10px 15px;background:#f0f0f0;border:1px dotted #333;font:12px/1.5 Courier New;margin:12p...