div | 易学教程

js弹出可拖动div

阅读更多关于 js弹出可拖动div

JS 弹出可拖动DIV 2010-09-01 18:03:37 | 分类：学习总结 | 标签： js 弹出可移动div | 字号大中小订阅文章分类: Web前端弹出DIV同时加入背景层实现方式很多，有原创也有借助js框架实现的，这些弹出的div功能都比较强悍，实际项目中有时候根本不需要如此般复杂操作，只是弹出div进行数据展现或者是有效的操作而已，以上述的方式加入无疑让简单的东西复杂化，使程序执行效率降低。繁复的东西技术含量的确挺高（EXT），同时不可避免会有其它方面的牺牲，以下弹出DIV简单高效，代码也很简洁，发出了一起看看，全部源代码如下，保存为html文件即可观看运行效果。 /** ** 源码部分开始 **/ <html> <head> <title>可拖动 DIV</title> <script type="text/javascript"> function showProc(){ message_box.style.visibility='visible'; // 创建灰色背景层 procbg = document.createElement("div"); procbg.setAttribute("id","mybg"); procbg.style.background = "#000"; procbg.style.width = "100%";

Codeforces Round #582 (Div. 3) F. Unstable String Sort

阅读更多关于 Codeforces Round #582 (Div. 3) F. Unstable String Sort

传送门题意：你需要输出一个长度为n的字符序列(由小写字母组成)，且这个字符串中至少包含k个不同的字符。另外题目还有要求：给你两个长度为p和q的序列，设字符序列存在s中那么就会有s[Pi]<=s[P(i+1)] (i<p) 　　　　　s[Qi]<=s[Q(i+1)] (i<q) 如果你能找出来满足这些条件的字符串s，就输出YES和s，否则输出NO 这会得到一个非递减字符串题解：因为最后的结果是一个非递减字符串，那么肯定对整个字符串s，会有s[i]<=s[i+1] （0<=i<strlen(s)-1）那么这样的话，只有当Pi>P(i+1)或者Qi>Q(i+1)的时候，才会影响字符串在[P(i+1),Pi]或者[Q(i+1),Qi]的取值，这一段区间内的字符肯定要相等因为题目上要求字符串s至少要有k个不同的字符，所以只要不遇到上面这种情况，那么每一个位置的字符都要比上一个字符大(我们这里是先用a，再用b等等) 所以我们只需要注意Pi>P(i+1)或者Qi>Q(i+1)这种区间就可以了想到这里正解就出来了，对每个P[i]找到最小的jjj，使得P[j]的位置在Q中位于P[i]的后方（为了方便，认为i自身也是一个合法的jjj），那么P[j..i]就必须同字母。如果两个同字母段相交，那么合并起来的整一段都必须同字母，因此处理完所有字母段再扫一遍，把相交的同字母段合并

点击div和某些控件之外的地方隐藏div，点击div不隐藏。对象 click和document click冲突有关问题

阅读更多关于点击div和某些控件之外的地方隐藏div，点击div不隐藏。对象 click和document click冲突有关问题

帮朋友解决这个问题，我发现用以往想想像的方式来实现，貌似不太可行，所以从网上找了一些解决办法，进行优化，这篇比较详细，所以拿来备忘，另一方面也希望可以帮助需要的同学！问题背景： jQuery 事件问题！！对象 click和document click冲突问题我想点击某个元素显示一个对象，点击页面任意处，隐藏这个对象 //点击look对象，显示隐藏mydiv $("#look").bind("click", function () { $("#mydiv").toggle(); }) //点击任意地方，隐藏显示的mydiv $(document).bind("click", function () { if ($("#mydiv").css("display") == "block") { $("#mydiv").hide(); } }) 这样两个事件冲突了，点击look对象，不会显示mydiv ------解决方案-------------------- 防止点击事件冒泡 return false; ------解决方案-------------------- 不是冲突。。是冒泡了，， $("#look").bind("click", function (e) { $("#mydiv").toggle(); e.stopPropagation }) 试试 ------解决方案

Dom实现div跟随鼠标

阅读更多关于 Dom实现div跟随鼠标

由于本人是菜鸟对javascrit理解不深入，如果疏漏请大家多多包涵多多题型。近来看到网页上的地图上有个东西跟着鼠标动，上面显示着X和Y的坐标，通过学习和理解终于自己完成了一个。遗憾的是FF上不兼容，但是还是拿出来请大家多多评论指正。下面请看代码： 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml" > 3 <head> 4 <title>无标题页</title> 5 <script type="text/javascript"> 6 function load(){ 7 8 var xPoint=window.event.clientX; 9 var yPoint=window.event.clientY; 10 div2.innerHTML="X="+xPoint+",Y="+yPoint; 11 div2.style.marginLeft=xPoint+"px"; 12 div2.style.marginTop=yPoint+"px"; 13 div1.onmousemove

在可编辑div的光标下插入html

阅读更多关于在可编辑div的光标下插入html

function pasteHtmlAtCaret(html, selectPastedContent) {//参数1为要插入的html //参数2为boolean 是否选中插入的html 默认为false var sel, range; if (window.getSelection) { // IE9 and non-IE sel = window.getSelection(); if (sel.getRangeAt && sel.rangeCount) { range = sel.getRangeAt(0); range.deleteContents(); // Range.createContextualFragment() would be useful here but is // only relatively recently standardized and is not supported in // some browsers (IE9, for one) var el = document.createElement("div"); el.innerHTML = html; var frag = document.createDocumentFragment(), node, lastNode; while ( (node = el.firstChild)

div、span

阅读更多关于 div、span

1.Html区块元素　　HTML可以通过<div>和<span>将元素组合起来　　大多数HTML元素被定义为块级元素或内联元素，　　而块级元素在浏览器显示时，通常会以新行来开始（或结束）。如：<h1>,<p>,<ul>,<table> 　　内联元素在显示时通常不会以新行开始。如：<b>,<td>,<a>,<img> 2.<div>元素　　HTML <div> 元素是块级元素，它是可用于组合其他 HTML 元素的容器。　　<div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。　　如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。　　<div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。默认情况下，浏览器通常会在<div>元素前后放置一个换行符。（可以通过css改变这种情况　　1.设置float 　　设置float:left样式让div对象靠左，这样div会失去本身的宽度样式 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>无标题文档</title> 6 <style> 7

html中div加滚动条

阅读更多关于 html中div加滚动条

div 加滚动条的两种方法：一、 <div style=" overflow:scroll; width:400px; height:400px;”></div> 记住宽和高一定要设置噢，否则不成的不过在不超出时，会有下面的滚动条，所以不是最好的选择二、 <div style=" overflow-y:auto; overflow-x:auto; width:400px; height:400px;”></div> 记住宽和高一定要设置噢，否则不成的这样比较好的是，在宽和高不超出时，只是一条线三、说明直接为div指定overflow属性为auto即可，但是必须指定div的高度，如下： <div style="position:absolute; height:400px; overflow:auto"> </div> 如果要出现水平滚动条，则： overflow-x:auto 同理，垂直滚动条为： overflow-y:auto 如果该div被包含在其他对象例如td中，则位置可设为相对：position:relative 来源： https://www.cnblogs.com/yanl55555/p/12543994.html

Js实现两列div高度自适应

阅读更多关于 Js实现两列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="Content-Type" content="text/html; charset=utf-8" /> <title>两列div高度需要自适应的问题</title> <style> *{ margin:0px; padding:0px;} #wrap{ width:776px; border:1px solid #f00; background: url(bg1.png) repeat; overflow:auto;} #cloumn1{ float:left; width:298px; border:1px solid #ccc;} #cloumn2{ float:right; width:474px; border:1px solid #00F;} .clear{ clear:both;} </style> </head> <body> <div id="wrap"> <div id=

两个(div)元素使用了display：inline-block后出现错位问题解决

阅读更多关于两个(div)元素使用了display：inline-block后出现错位问题解决

问题：当两个div使用了display：inline-block样式后，会出现错位的情况：问题分析出现这种情况的原因是，第二个外层的div会相对于第一个外层div 中最后渲染出来的内层div 的顶部对齐，所以才出现了这种错位的情况，如下所示：解决给每个外层div设置 vertical-align:top 样式，把每个外层div的顶端与行中最高元素的顶端对齐。添加该样式后：来源： https://www.cnblogs.com/Knowledge-is-infinite/p/12536439.html

js 实现div跟随鼠标移动

阅读更多关于 js 实现div跟随鼠标移动

今天看到了一个自己可以随心所欲的拖到div到页面的任意位置。感觉挺好的，就心血来潮的查询了一下，看看网友做的代码如下： <script> function doit(){ var obj = document.getElementById("pad"); obj.style.left = event.x+10; obj.style.top = event.y+10; } window.onload=function(){ document.body.onmousemove = doit; } </script> <div id="pad" style="padding:0px;margin:0px;width:10px;height:10px;left:0px;top:0px;background-color:#ff0000;position:absolute;z-index:100;"></div> 这个网友说不支持FF！！ <script> function doit(e){ var obj = document.getElementById("pad"); obj.style.left = e.pageX+10; obj.style.top = e.pageY+10; } window.onload=function(){ document.body.onmousemove

订阅 div