html css子容器宽度超过父容器时不直接换行

图片说明

问题:当li的超过div的时候就自动换行,我现在要怎么让他不换行?
网上查了一下,whiteSpace无效,而且好像是文字的,貌似不能用在这种地方
还有说不设置左浮动的,但是我这里是li,不设置左浮动不行啊

1.想做的效果是:向下的时候,所有的li向右移动一格li的宽度,li[n]的img的宽高变成li[n+1]的宽高,最左边生成一个img更小的li,通过改变左边距移动到li[0]的位置,img慢慢变成li[0]的img的大小,最右边的li则是img慢慢变小,慢慢透明,超过div宽度的部分就hidden,完成以后就删掉

2.现在问题是出在向右移动的时候超过div宽度的时候直接换行了,那效果就变成到右边距的时候最右边就消失了

不是很会描述问题,麻烦各位没看懂的问题的大大说一下是效果没描述清楚还是问题没描述清楚,我再想想怎么问


//F12复制过来的节点的属性

//div
<div id="slider" style="padding: 0px; height: 320px; width: 1024px; margin-top: 50px; margin-left: 171px; background-color: red; white-space: nowrap;">


//li
<li style="margin-left: 212px; display: inline; float: left; list-style-type: none; width: 200px; height: 320px; background-color: blue;">
            <img src="1.jpg" style="display: block; width: 150px; height: 225px; float: none; margin-top: 37.5px; margin-left: 25px;">
        <a style="display: block; width: 40px; height: 20px; margin-left: 80px;">0000</a>
        </li>

10个回答

ul套个div容器,div设置width为9999999px,然后再放入红色的容器中,红色容器设置overflow auto或者hidden(需要用js设置ul div容器的scrollLeft才行移动显示隐藏的内容)

showbo
支付宝加好友偷能量挖 回复Yohohohoo: 大部分有些标签不支持width,height这种属性,如div,a,但是都支持css的width/height(内联元素无效),所以建议是尽量设置css,而不是属性
接近 2 年之前 回复
m0_37710580
Yohohohoo 回复C币出货Q155132206: 顺便再问一下,css和设置属性的区别在哪里
接近 2 年之前 回复
showbo
支付宝加好友偷能量挖 回复Yohohohoo: 用css,不要设置属性<div style="height:320px;width:5000px;background-color:green">
接近 2 年之前 回复
showbo
支付宝加好友偷能量挖 回复Yohohohoo: 套在li的容器ul上。
接近 2 年之前 回复
m0_37710580
Yohohohoo <div height="320px" width="5000px" background-color="green"> 把这个套在li上层,div下层。结果变成了320*0,请问什么情况
接近 2 年之前 回复

这个可以的,你试试

 <html>
    <style type="text/css">
        div {
            white-space:nowrap
        }
        div li{
            display:inline-block;
            width:200px;
            height:200px;
        }
        li img {
            width: 100%;
            height: 100%;
        }
    </style>
    <body>
        <div>
            <li><img src="a.jpg"></li>
            <li><img src="a.jpg"></li>
            <li><img src="a.jpg"></li>
            <li><img src="a.jpg"></li>
            <li><img src="a.jpg"></li>
        </div>
    </body>
<html>

再套一个div 这个div中宽度设为百分比如300%,将li 放进去 ,然后之前那个div设置宽度定值 超出隐藏即可

在你现在的li和div之间再插一个div,这个新增的div宽度给长点,比如9999px

内部li设置float:left;display:inline,外部的div设置overflow:scroll。这样子在里面的图片超过外面的div的宽度时里面的li就可以横向滚动而不是换行了。

首先你的需求讲的有的模糊,根据你的描述
几个解决方案:1.你不介意有滚动条,你就把最外圈的宽度设置成非常大,这样li就可以并排,不过会出现横向滚动条。
2.如果你不想有滚动条,可以1的基础在body那边设置overflow-x:hidden;但是这样有些li会呗隐藏,看不到。
3.如果你要的只是有个红色的背景 但是不包裹全部的li,你可以设置包裹的div的宽,高,背景色。然后将li一个一个设置绝对定位:position: absolute;然后一个一个去定位。

m0_37710580
Yohohohoo 红色是显示这个div位置的,让div居中,position这里应该还是用relative
接近 2 年之前 回复
m0_37710580
Yohohohoo 不要滚动条,我更新了问题,大佬再看一下
接近 2 年之前 回复

在li标签中设置,超过父标签宽度时自动隐藏

li和div分别设置一个宽度,在div的样式中加一个overflow:hidden,你这样试试

做一个人divde 百分比的限制条件。

li和div分别设置一个宽度,在div的样式中加一个overflow:hidden

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
easyui 表头宽度超出容器宽度,怎么解决
H5代码如下 ``` <div class="choise_content"> <table id="express"></table> </div> ``` CSS代码如下 ``` .choise_content{ width: 800px; height: 200px; margin: 0 auto; margin-top: 30px; border-bottom: 1px solid #D4D4D4; padding-bottom: 15px; } ``` JS代码如下 ``` function expressList(){ $('#express').datagrid({ // url : urlNew // rownumbers : true,//行号 // pagination : true,//分页空间 pageSize : 1, pageNumber : 1, fitColumns : true, fixed: true, fit : true, nowrap: true, singleSelect : true, striped : true, // toolbar: , columns : [[ {field : 'ltd',title : '22',width : '15%',align : 'center'}, {field : 'p',title : '33',width : '30%',align : 'center'}, {field : 'sever',title : '44',width : '35%',align : 'center'}, {field : 'time',title : '66',width : '15%',align : 'center'}, ]] }); }; ``` 在谷歌浏览器的控制台上显示的问题是 类名为class="datagrid-header-inner 的宽度10000px 求解 怎么解决 不用CSS解决能行不?
div 的float属性设置后,对div的宽度的影响
div如果不设置float属性时,宽度为默认父级容器的宽度,但是设置float:left后, div的宽度就会变为他里面内容的实际宽度,没明白是为什么? 求教
关于CSS布局问题脱了文档流
父容器的宽度是100%,它里面有两个子元素各是50%的宽度,为什么第一个在父容器正常显示,第二个却脱离了文档流?![图片说明](https://img-ask.csdn.net/upload/201702/12/1486905244_303429.png)
<div>宽度设置为100%,设置属性margin-left和margin-right时出现问题。
在一个父容器内包含三个子容器,设置效果为左侧和右侧的部分宽度固定,中间部分宽度随浏览器宽度的变化而自适应变化。 ``` <div id="A3"> <div id="DIV-A2"></div> <div id="DIV-C2"></div> <div id="DIV-B2"></div> </div> ``` ``` #A3{ margin-top:10px; } #DIV-A2{ width:50px; background-color:red; height:30px; float:left;/*设置浮也已经脱离文档流*/ } #DIV-C2{ width:50px; background-color:red; height:30px; float:right;/*设置浮也已经脱离文档流*/ } #DIV-B2{ background-color:blue; width:100%;/*设置百分比可实现宽度随浏览器窗口变化而变化*/ height:30px; } ``` ![图片说明](https://img-ask.csdn.net/upload/201703/02/1488447173_548044.png) 设置margin-left后变成这个样子,本想着把margin-right设置出来应该就会恢复原样。 ![图片说明](https://img-ask.csdn.net/upload/201703/02/1488447215_24263.png) 但发现这时候的margin-right的值无论多大都没有作用。 ![图片说明](https://img-ask.csdn.net/upload/201703/02/1488447249_259174.png) 注释掉left单独设置right,中间区域恢复原样,但是margin-right的值任然不起作用。 单独写了个demo发现在宽度设置为百分比的时候margin-right的值不会起作用, ``` <div id="A4"></div> #A4{ margin-top:10px; background-color:blue; width:100%;/*设置百分比可实现宽度随浏览器窗口变化而变化*/ height:30px; margin-right:200px; } ``` ![图片说明](https://img-ask.csdn.net/upload/201703/02/1488447288_941758.png) 由上图可见右边距没有发生任何变化,此时margin-right的值已经到200px了。这是为何?
关于css3的多列column
如题,当同时设置column-width与column-count与外层容器的width,此时的column-width似乎并没有什么卵用。 举例: ``` <style> body{font:14px/1.5 georgia,serif,sans-serif;} p{margin:0;padding:5px 10px;background:#eee;} h1{margin:10px 0;font-size:16px;} .test{ width:628px; border:10px solid #000; -moz-column-width:200px; -moz-column-count:3; -webkit-column-width:200px; -webkit-column-count:3; column-width:200px; column-count:3; } </style> <div class="test"> <p>This module describes multi-column layout in CSS. By using functionality described in this document, style sheets can declare that the content of an element is to be laid out in multiple columns. </p> <p>On the Web, tables have also been used to describe multi-column layouts. The main benefit of using CSS-based columns is flexibility; content can flow from one column to another, and the number of columns can vary depending on the size of the viewport. Removing presentation table markup from documents allows them to more easily be presented on various output devices including speech synthesizers and small mobile devices.</p> </div> ``` 此时,改变div的width属性,如果远大于width X count、内外边距以及边框所需的宽度,p的内容会根据column-count的数值来进行排版,column-width会随着width的变化而变化,与教程中所描述的的不一致,何解?
轮播图在火狐浏览器上时快时慢
代码如下,我用的是移动定位盒子的left,在火狐上很明显,不知道为什么,在谷歌和IE下没有时快时慢,可有时会有些卡顿,谢谢指教! ``` // 创建一个对象,DigsurGallery; DigsurGallery = {}; // 为对象 DigsurGallery,创造一个属性 Rolling; DigsurGallery.Rolling = function() { // 定义变量 speed,作用为速度; this.speed = 1; // 定义变量 timer ,作用为定时器名字; this.timer = null; } // initConfig 是对象下的一个方法,需要传入三个参数,盒子的id,数组的名字,是否需要滚动,是否需要点击按钮; DigsurGallery.Rolling.prototype.initConfig = function(Container, picArray, HasSlider, HasButton) { // 声明一个变量接收 Container; var ContainerName = $("#" + Container); // 声明变量 oBox,创建一个div,id名称为"DigsurFallery-Rolling-box"; var oBox = $("<div id='DigsurFallery-Rolling-box'></div>"); // 将 oBox 拼接到oName中; ContainerName.append(oBox); // 为 DigsurFallery-Rolling-box 设置样式; $("#DigsurFallery-Rolling-box").css({ "position": "relative", "width": "100%", "overflow": "hidden", "top": "20%", "border-radius": "5px", "-moz-user-select": "none", "-webkit-user-select": "none", "-ms-user-select": "none", "user-select": "none", }) // 声明变量 oBox,创建一个div,id名称为"DigsurFallery-Rolling-content"; var oContent = $("<div id='DigsurFallery-Rolling-content'></div>"); // 将 oContent 拼接到 oBox中; oBox.append(oContent); // 为 DigsurFallery-Rolling-content 设置样式; $("#DigsurFallery-Rolling-content").css({ "position": "absolute", "left": 0, "overflow": "hidden", "height": "100%", }) // 循环创建 img标签,将picArray中的值传入每一个img的src中,拼接到 oContent中; for(var i = 0; i < picArray.length; i++) { var oimg = $("<img />") $(oimg).attr('src', picArray[i]); oContent.append(oimg); } // 为 img加样式 ; $("#DigsurFallery-Rolling-box img").css({ "float": "left", "height": "90%", "box-shadow": "0px 0px 11px #211f1f", "-webkit-box-shadow": "0px 0px 11px #211f1f", "-moz-box-shadow": "0px 0px 11px #211f1f", "border-radius": "5px", "margin-top":"5px", }) // 为 DigsurFallery-Rolling-box 设置高度,高度为'window'宽度的35%; $("#DigsurFallery-Rolling-box").css("height", $(window).width() * 0.35); // 声明 BoxoffsetWidth,接收 DigsurFallery-Rolling-box的可视宽度; var BoxoffsetWidth = $("#DigsurFallery-Rolling-box")[0].offsetWidth; // 为DigsurFallery-Rolling-box下的img标签设置 margin-right,值为: DigsurFallery-Rolling-box的可视宽度的3%; $("#DigsurFallery-Rolling-box img").css("margin-right", BoxoffsetWidth / 100 * 3); // 声明变量,获取 DigsurFallery-Rolling-content下img的margin-right的 值; var ImgMarginRight = parseFloat($("#DigsurFallery-Rolling-content img").css('marginRight')); // 设置 DigsurFallery-Rolling-conten 下的img的宽度 为 DigsurFallery-Rolling-box的可视宽度; $("#DigsurFallery-Rolling-content img").css("width", BoxoffsetWidth); // 设置 DigsurFallery-Rolling-content 的宽度,值为 picArray的个数 乘 (DigsurFallery-Rolling-box的可视宽度+ DigsurFallery-Rolling-content下img的margin-right的 值); $("#DigsurFallery-Rolling-content").css("width", picArray.length * (BoxoffsetWidth + ImgMarginRight)); // 设置 speed的速度为1; this.speed = 1; // 判断 HasSlider 的值; if(HasSlider == true) { // 声明 _this = this,作用为指向 DigsurGallery.Rolling ; var _this = this; // 创造函数 move ; function move() { // 创建定时器timer; _this.timer = setInterval(function() { // 设置 DigsurFallery-Rolling-content 的left 为DigsurFallery-Rolling-content的做偏移量 - speed的值; $("#DigsurFallery-Rolling-content").css("left", $("#DigsurFallery-Rolling-content").offset().left - _this.speed); // 做判断,如果 DigsurFallery-Rolling-content 的左偏移量 小于picArray的个数-1乘以图片的可视宽度加上marginright的值 在乘以-1的值; if($("#DigsurFallery-Rolling-content").offset().left < (picArray.length - 1) * (oimg[0].offsetWidth + ImgMarginRight) * -1) { // DigsurFallery-Rolling-content 的left为0; $("#DigsurFallery-Rolling-content").css("left", 0); } }, 1) } // 启动定时器; move(); // 鼠标放上或者离开 容器 'DigsurFallery-Rolling-box'时清除或打开定时器; $("#DigsurFallery-Rolling-box").mouseenter(function() { clearInterval(_this.timer); }).mouseleave(function() { move(); }); } // 判断 HasButton的值; if(HasButton == true) { // 声明 oRetreat 创建 id为 'retreat' 的div; var oRetreat = $("<div id='retreat'></div>"); // 将 oRectreat 拼接到oBox中; oBox.append(oRetreat); // 声明 RetreatSpan,创建 span标签,内容为 < ,后退; var RetreatSpan = $("<span> < </span>") // 将RetreatSpan拼接到oRetreat中; oRetreat.append(RetreatSpan); // 声明oAdvance,创建 id为'advance'的div; var oAdvance = $("<div id='advance'></div>"); // 将oAdvance拼接到oBox中; oBox.append(oAdvance); // 声明AdvanceSpan,创建 span标签,内容为 > ,前进; var AdvanceSpan = $("<span> > </span>") // 将AdvanceSpan拼接到oAdvance中; oAdvance.append(AdvanceSpan); // retreat 的点击函数; $("#retreat").click(function() { // 声明index,获取 DigsurFallery-Rolling-content 的做偏移量 除以 图片的可视宽度的负值; var index = parseInt($("#DigsurFallery-Rolling-content").offset().left / -oimg[0].offsetWidth); // index 的值减1; index--; // 判断 如果index的值小于0的; if(index < 0) { // index 的值 等于 picArrat 的长度减去1; index = picArray.length - 1; } // 声明 temp 等于 图片的可视宽度加上图片的marginright的值 乘 index的 负值 ; var temp = (oimg[0].offsetWidth + ImgMarginRight) * index * -1; // 设置 DigsurFallery-Rolling-content 的left值为 temp的值 $("#DigsurFallery-Rolling-content").css("left", temp); }); // advance 的点击函数 $("#advance").click(function() { // 声明index,获取 DigsurFallery-Rolling-content 的做偏移量 除以 图片的可视宽度的负值; var index = parseInt($("#DigsurFallery-Rolling-content").offset().left / -oimg[0].offsetWidth); // index 的值加1 index++; // 判断 如果index的值大于 picArray的长度; if(index >= picArray.length) { // index 的值为 0; index = 0; } // 声明 temp 等于 图片的可视宽度加上图片的marginright的值 乘 index的 负值 var temp = (oimg[0].offsetWidth + ImgMarginRight) * index * -1; // 设置 DigsurFallery-Rolling-content 的left值为 temp的值 $("#DigsurFallery-Rolling-content").css("left", temp); }); } // 设置点击按钮的大小,需要传入三个值,分别为 最小值 min,和最大值max 和 中间值mid $.fn.fontFlex = function(min, max, mid) { // $this 指向调用的this var $this = this; // 窗口大小改变时函数 $(window).resize(function() { // 为 retreat 设置样式 $("#retreat").css({ "width": "7%", "height": $("#retreat").width() * 2.3, "position": "absolute", "left": 0, "top": "30%", "background-color": "rgba(0, 0, 0, 0.3)", "text-align": "center", "color": "rgba(255,255,255,0.5)", "cursor": "pointer", }).hover(function() { $("#retreat").css("color", "rgba(255,255,255,1)") }, function() { $("#retreat").css("color", "rgba(255,255,255,0.5)") }); // 为 retreat 下的span标签设置 line-height $("#retreat span").css("line-height", $("#retreat").height() + "px"); // 为 advance 设置样式 $("#advance").css({ "width": "7%", "height": $("#advance").width() * 2.3, "position": "absolute", "right": 0, "top": "30%", "background-color": "rgba(0, 0, 0, 0.3)", "text-align": "center", "color": "rgba(255,255,255,0.5)", "cursor": "pointer", }).hover(function() { $("#advance").css("color", "rgba(255,255,255,1)") }, function() { $("#advance").css("color", "rgba(255,255,255,0.5)") }); // 为 advance 下的span标签设置 line-height $("#advance span").css("line-height", $("#advance").height() + "px"); // 声明size,用window的宽度 除以 mid var size = window.innerWidth / mid; // 判断 如果 size的值 小于 min的值 if(size < min) { // size 的值 等于 min的值 size = min; } // 判断 如果size的值大于 max的值 if(size > max) { // size的值等于 max的值 size = max; } // 为调用的的标签设置 'font-size' $this.css("font-size", size + "px"); // 触发函数的时候执行 resize事件 }).trigger('resize'); }; $("#retreat span").fontFlex(23, 60, 20); $("#advance span").fontFlex(23, 60, 20); } ```
jQuery上传插件Uploadify 3.2在.NET下的详细例子
项目中要使用Uploadify 3.2来实现图片上传并生成缩略通的功能,特此记下来,以供各位参考! Uploadify下载地址:http://www.uploadify.com/download/ 下载下来解压后估计里面很多文件,其实有用的也就jquery.uploadify.min.js、uploadify.css、uploadify.swf和uploadify-cancel.png这四个文件。你还得下载jQuery库,我这里用的是jquery-1.7.2.min.js,另外和大多数JQ插件一样,同时也需要swfobject.js这个插件,我的是2.2的版本,东西都准备好了,那下面就开始。 前端界面: [html] view plain copy <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="jqUploadify._Default" %> <!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 runat="server"> <title>无标题页</title> <link href="scripts/uploadify.css" rel="stylesheet" type="text/css" /> <link href="scripts/default.css" rel="stylesheet" type="text/css" /> <script src="scripts/jquery-1.7.2.min.js" type="text/javascript"></script> <script src="scripts/swfobject.js" type="text/javascript"></script> <script src="scripts/jquery.uploadify.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ $("#file_upload").uploadify({ //开启调试 'debug' : false, //是否自动上传 'auto':false, 'buttonText':'选择照片', //flash 'swf': "scripts/uploadify.swf", //文件选择后的容器ID 'queueID':'uploadfileQueue', 'uploader':'scripts/upload.ashx', 'width':'75', 'height':'24', 'multi':false, 'fileTypeDesc':'支持的格式:', 'fileTypeExts':'*.jpg;*.jpge;*.gif;*.png', 'fileSizeLimit':'1MB', 'removeTimeout':1, //返回一个错误,选择文件的时候触发 'onSelectError':function(file, errorCode, errorMsg){ switch(errorCode) { case -100: alert("上传的文件数量已经超出系统限制的"+$('#file_upload').uploadify('settings','queueSizeLimit')+"个文件!"); break; case -110: alert("文件 ["+file.name+"] 大小超出系统限制的"+$('#file_upload').uploadify('settings','fileSizeLimit')+"大小!"); break; case -120: alert("文件 ["+file.name+"] 大小异常!"); break; case -130: alert("文件 ["+file.name+"] 类型不正确!"); break; } }, //检测FLASH失败调用 'onFallback':function(){ alert("您未安装FLASH控件,无法上传图片!请安装FLASH控件后再试。"); }, //上传到服务器,服务器返回相应信息到data里 'onUploadSuccess':function(file, data, response){ //alert(data); } }); }); function doUplaod(){ $('#file_upload').uploadify('upload','*'); } function closeLoad(){ $('#file_upload').uploadify('cancel','*'); } </script> </head> <body> <table width="704" border="0" align="center" cellpadding="0" cellspacing="0" id="__01"> <tr> <td align="center" valign="middle"> <div id="uploadfileQueue" style="padding: 3px;"> </div> <div id="file_upload"> </div> </td> </tr> <tr> <td height="50" align="center" valign="middle"> <img alt="" src="images/BeginUpload.gif" width="77" height="23" onclick="doUplaod()" style="cursor: hand" /> <img alt="" src="images/CancelUpload.gif" width="77" height="23" onclick="closeLoad()" style="cursor: hand" /> </td> </tr> </table> </body> </html> 后端的Handler: [csharp] view plain copy using System; using System.Collections; using System.Data; using System.Linq; using System.Web; using System.Web.Services; using System.Web.Services.Protocols; using System.Xml.Linq; using System.Web.SessionState; using System.IO; namespace jqUploadify.scripts { /// <summary> /// $codebehindclassname$ 的摘要说明 /// </summary> [WebService(Namespace = "http://tempuri.org/")] [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] public class upload : IHttpHandler, IRequiresSessionState { public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/plain"; context.Response.Charset = "utf-8"; HttpPostedFile file = context.Request.Files["Filedata"]; string uploadPath = context.Server.MapPath("..\\uploads\\"); if (file != null) { if (!Directory.Exists(uploadPath)) { Directory.CreateDirectory(uploadPath); } file.SaveAs(uploadPath + file.FileName); //生成缩略图 MakeThumbnail(uploadPath + file.FileName, uploadPath + "\\s\\" + file.FileName, 80, 80); } } private void MakeThumbnail(string sourcePath, string newPath, int width, int height) { System.Drawing.Image ig = System.Drawing.Image.FromFile(sourcePath); int towidth = width; int toheight = height; int x = 0; int y = 0; int ow = ig.Width; int oh = ig.Height; if ((double)ig.Width / (double)ig.Height > (double)towidth / (double)toheight) { oh = ig.Height; ow = ig.Height * towidth / toheight; y = 0; x = (ig.Width - ow) / 2; } else { ow = ig.Width; oh = ig.Width * height / towidth; x = 0; y = (ig.Height - oh) / 2; } System.Drawing.Image bitmap = new System.Drawing.Bitmap(towidth, toheight); System.Drawing.Graphics g = System.Drawing.Graphics.FromImage(bitmap); g.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.High; g.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.HighQuality; g.Clear(System.Drawing.Color.Transparent); g.DrawImage(ig, new System.Drawing.Rectangle(0, 0, towidth, toheight), new System.Drawing.Rectangle(x, y, ow, oh), System.Drawing.GraphicsUnit.Pixel); try { bitmap.Save(newPath, System.Drawing.Imaging.ImageFormat.Jpeg); } catch (Exception ex) { throw ex; } finally { ig.Dispose(); bitmap.Dispose(); g.Dispose(); } } public bool IsReusable { get { return false; } } } } 这样我们就是实现图片上传至uploads,生成的缩略图(这里设为80*80)存放在uploads下面的s文件夹中,是不是很简单呢!当然实际使用过程你还可能碰到一下的问题: 1、在火狐下session出现丢失的情况,可以参考这里:http://www.cnblogs.com/akingyao/archive/2012/09/04/2670794.html 2、IE9出现了按钮不能点击的问题,可以参考这里:http://www.uploadify.com/forum/#/discussion/9155/uploadify-version-3-2-does-not-work-in-ie9/p1 最后贴一个Uploadify参数说明: Uploadify Version 3.2 Options选项设置 auto 选择文件后自动上传 buttonClass 给“浏览按钮”加css的class样式 buttonCursor 鼠标移上去形状:arrow箭头、hand手型(默认) buttonImage 鼠标移上去变换图片 buttonText 按钮文字 checkExisting 在目录中检查文件是否已上传成功(1 ture,0 false) debug 是否显示调试框(默认不显示false) fileObjName 设置一个名字,在服务器处理程序中根据该名字来取上传文件的数据。默认为Filedata,$tempFile = $_FILES['Filedata']['tmp_name'] fileSizeLimit 设置允许上传文件最大值B, KB, MB, GB 比如:'fileSizeLimit' : '20MB' fileTypeDesc 选择的文件的描述。这个字符串出现在浏览文件对话框中文件类型下拉框处。默认:All Files fileTypeExts 允许上传的文件类型。格式:'fileTypeExts' : '*.gif; *.jpg; *.png' formData 附带值,需要通过get or post传递的额外数据,需要结合onUploadStart事件一起使用 height “浏览按钮”高度px itemTemplate <itemTemplate>节点表示显示的内容。这些内容中也可以包含绑定到控件DataSource属性中元素集合的数据。 method 上传方式。默认:post multi 选择文件时是否可以【选择多个】。默认:可以true overrideEvents 不执行默认的onSelect事件 preventCaching 随机缓存值 默认true ,可选true和false.如果选true,那么在上传时会加入一个随机数来使每次的URL都不同,以防止缓存.但是可能与正常URL产生冲突 progressData 进度条上显示的进度:有百分比percentage和速度speed。默认百分比 queueID 给“进度条”加背景css的ID样式。文件选择后的容器ID queueSizeLimit 允许多文件上传的数量。默认:999 removeCompleted 上传完成后队列是否自动消失。默认:true removeTimeout 上传完成后队列多长时间后消失。默认 3秒 需要:'removeCompleted' : true,时使用 requeueErrors 队列上传出错,是否继续回滚队列,即反复尝试上传。默认:false successTimeout 上传超时时间。文件上传完成后,等待服务器返回信息的时间(秒).超过时间没有返回的话,插件认为返回了成功。 默认:30秒 swf swf文件的路径,本文件是插件自带的,不可用其它的代替.本参数不可省略 uploader 上传处理程序URL,本参数不可省略 uploadLimit 限制总上传文件数,默认是999。指同一时间,如果关闭浏览器后重新打开又可上传。 width “浏览按钮”宽度px Events 事件 onCancel 当取消一个上传队列中的文件时触发,删除时触发 onClearQueue 清除队列。当'cancel'方法带着*参数时,也就是说一次全部取消的时候触发.queueItemCount是被取消的文件个数(另外的按钮) onDestroy 取消所有的上传队列(另外的按钮) onDialogClose 当选择文件对话框关闭时触发,不论是点的'确定'还是'取消'都会触发.如果本事件被添加进了'overrideEvents'参数中,那么如果在选择文件时产生了错误,不会有错误提示框弹出 onDialogOpen 当选择文件框被打开时触发,没有传过来的参数 onDisable 关闭上传 onEnable 开启上传 onFallback 检测FLASH失败调用 onInit 每次初始化一个队列时触发 onQueueComplete 当队列中的所有文件上传完成时触发 onSelect 当文件从浏览框被添加到队列中时触发 onSelectError 选择文件出错时触发 onSWFReady flash准备好时触发 onUploadComplete当一个文件上传完成时触发 onUploadError 当文件上传完成但是返回错误时触发 onUploadProgress上传汇总 onUploadStart 一个文件上传之间触发 onUploadSuccess 每个上传完成并成功的文件都会触发本事件 Methods 方法 cancel 取消一个上传队列 destroy 取消所有上传队列 disable 禁止点击“浏览按钮” settings 返回或修改一个 uploadify实例的settings值 stop 停止当前的上传并重新添加到队列中去 upload 上传指定的文件或者所有队列中的文件 最后是DEMO的下载地址:http://download.csdn.net/detail/wangqiuyun/566551
急急急,在线等,大家帮我看看哪里的问题
``` <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <style> #page1 {width: 70%;height: 437px;margin: 0 auto;margin-bottom: 130px;} </style> <body> <div id="page1" class="page Slide"></div> </body> </html> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> <script src="new_file.js"></script> <script type="text/javascript"> // 创建一个对象,DigsurGallery; DigsurGallery = {}; // 为对象 DigsurGallery,创造一个属性 Rolling; DigsurGallery.Rolling = function() { // 定义变量 speed,作用为速度; this.speed = 1; // 定义变量 timer ,作用为定时器名字; this.timer = null; } // initConfig 是对象下的一个方法,需要传入三个参数,盒子的id,数组的名字,是否需要滚动,是否需要点击按钮; DigsurGallery.Rolling.prototype.initConfig = function(Container, picArray, HasSlider, HasButton) { // 声明一个变量接收 Container; var ContainerName = $("#" + Container); // 声明变量 oBox,创建一个div,id名称为"DigsurFallery-Rolling-box"; var oBox = $("<div id='DigsurFallery-Rolling-box'></div>"); // 将 oBox 拼接到oName中; ContainerName.append(oBox); // 为 DigsurFallery-Rolling-box 设置样式; $("#DigsurFallery-Rolling-box").css({ "position": "relative", "width": "100%", "overflow": "hidden", "top": "20%", "border-radius": "5px", "-moz-user-select": "none", "-webkit-user-select": "none", "-ms-user-select": "none", "user-select": "none", }) // 声明变量 oBox,创建一个div,id名称为"DigsurFallery-Rolling-content"; var oContent = $("<div id='DigsurFallery-Rolling-content'></div>"); // 将 oContent 拼接到 oBox中; oBox.append(oContent); // 为 DigsurFallery-Rolling-content 设置样式; $("#DigsurFallery-Rolling-content").css({ "position": "absolute", "left": 0, "overflow": "hidden", "height": "100%", }) // 循环创建 img标签,将picArray中的值传入每一个img的src中,拼接到 oContent中; for(var i = 0; i < picArray.length; i++) { var oimg = $("<img />") $(oimg).attr('src', picArray[i]); oContent.append(oimg); } // 为 img加样式 ; $("#DigsurFallery-Rolling-box img").css({ "float": "left", "height": "90%", "box-shadow": "0px 0px 11px #211f1f", "-webkit-box-shadow": "0px 0px 11px #211f1f", "-moz-box-shadow": "0px 0px 11px #211f1f", "border-radius": "5px", "margin-top":"5px", }) // 为 DigsurFallery-Rolling-box 设置高度,高度为'window'宽度的35%; $("#DigsurFallery-Rolling-box").css("height", $(window).width() * 0.35); // 声明 BoxoffsetWidth,接收 DigsurFallery-Rolling-box的可视宽度; var BoxoffsetWidth = $("#DigsurFallery-Rolling-box")[0].offsetWidth; // 为DigsurFallery-Rolling-box下的img标签设置 margin-right,值为: DigsurFallery-Rolling-box的可视宽度的3%; $("#DigsurFallery-Rolling-box img").css("margin-right", BoxoffsetWidth / 100 * 3); // 声明变量,获取 DigsurFallery-Rolling-content下img的margin-right的 值; var ImgMarginRight = parseFloat($("#DigsurFallery-Rolling-content img").css('marginRight')); // 设置 DigsurFallery-Rolling-conten 下的img的宽度 为 DigsurFallery-Rolling-box的可视宽度; $("#DigsurFallery-Rolling-content img").css("width", BoxoffsetWidth); // 设置 DigsurFallery-Rolling-content 的宽度,值为 picArray的个数 乘 (DigsurFallery-Rolling-box的可视宽度+ DigsurFallery-Rolling-content下img的margin-right的 值); $("#DigsurFallery-Rolling-content").css("width", picArray.length * (BoxoffsetWidth + ImgMarginRight)); // 设置 speed的速度为1; this.speed = 1; console.log($("#DigsurFallery-Rolling-content").offset().left); console.log(this.speed); console.log((picArray.length - 1) * (oimg[0].offsetWidth + ImgMarginRight) * -1); // 判断 HasSlider 的值; if(HasSlider == true) { // 声明 _this = this,作用为指向 DigsurGallery.Rolling ; var _this = this; // 创造函数 move ; function move() { // 创建定时器timer; _this.timer = setInterval(function() { console.log($("#DigsurFallery-Rolling-content").css('left')); console.log($("#DigsurFallery-Rolling-content").offset().left); console.log(_this.speed); console.log((picArray.length - 1) * (oimg[0].offsetWidth + ImgMarginRight) * -1); // 设置 DigsurFallery-Rolling-content 的left 为DigsurFallery-Rolling-content的做偏移量 - speed的值; $("#DigsurFallery-Rolling-content").css("left", $("#DigsurFallery-Rolling-content").offset().left - _this.speed); // 做判断,如果 DigsurFallery-Rolling-content 的左偏移量 小于picArray的个数-1乘以图片的可视宽度加上marginright的值 在乘以-1的值; if($("#DigsurFallery-Rolling-content").offset().left < (picArray.length - 1) * (oimg[0].offsetWidth + ImgMarginRight) * -1) { // DigsurFallery-Rolling-content 的left为0; $("#DigsurFallery-Rolling-content").css("left", 0); } }, 1000) } // 启动定时器; move(); // 鼠标放上或者离开 容器 'DigsurFallery-Rolling-box'时清除或打开定时器; $("#DigsurFallery-Rolling-box").mouseenter(function() { clearInterval(_this.timer); }).mouseleave(function() { move(); }); } // 判断 HasButton的值; if(HasButton == true) { // 声明 oRetreat 创建 id为 'retreat' 的div; var oRetreat = $("<div id='retreat'></div>"); // 将 oRectreat 拼接到oBox中; oBox.append(oRetreat); // 声明 RetreatSpan,创建 span标签,内容为 < ,后退; var RetreatSpan = $("<span> < </span>") // 将RetreatSpan拼接到oRetreat中; oRetreat.append(RetreatSpan); // 声明oAdvance,创建 id为'advance'的div; var oAdvance = $("<div id='advance'></div>"); // 将oAdvance拼接到oBox中; oBox.append(oAdvance); // 声明AdvanceSpan,创建 span标签,内容为 > ,前进; var AdvanceSpan = $("<span> > </span>") // 将AdvanceSpan拼接到oAdvance中; oAdvance.append(AdvanceSpan); // retreat 的点击函数; $("#retreat").click(function() { // 声明index,获取 DigsurFallery-Rolling-content 的做偏移量 除以 图片的可视宽度的负值; var index = parseInt($("#DigsurFallery-Rolling-content").offset().left / -oimg[0].offsetWidth); // index 的值减1; index--; // 判断 如果index的值小于0的; if(index < 0) { // index 的值 等于 picArrat 的长度减去1; index = picArray.length - 1; } // 声明 temp 等于 图片的可视宽度加上图片的marginright的值 乘 index的 负值 ; var temp = (oimg[0].offsetWidth + ImgMarginRight) * index * -1; // 设置 DigsurFallery-Rolling-content 的left值为 temp的值 $("#DigsurFallery-Rolling-content").css("left", temp); }); // advance 的点击函数 $("#advance").click(function() { // 声明index,获取 DigsurFallery-Rolling-content 的做偏移量 除以 图片的可视宽度的负值; var index = parseInt($("#DigsurFallery-Rolling-content").offset().left / -oimg[0].offsetWidth); // index 的值加1 index++; // 判断 如果index的值大于 picArray的长度; if(index >= picArray.length) { // index 的值为 0; index = 0; } // 声明 temp 等于 图片的可视宽度加上图片的marginright的值 乘 index的 负值 var temp = (oimg[0].offsetWidth + ImgMarginRight) * index * -1; // 设置 DigsurFallery-Rolling-content 的left值为 temp的值 $("#DigsurFallery-Rolling-content").css("left", temp); }); } // 设置点击按钮的大小,需要传入三个值,分别为 最小值 min,和最大值max 和 中间值mid $.fn.fontFlex = function(min, max, mid) { // $this 指向调用的this var $this = this; // 窗口大小改变时函数 $(window).resize(function() { // 为 retreat 设置样式 $("#retreat").css({ "width": "7%", "height": $("#retreat").width() * 2.3, "position": "absolute", "left": 0, "top": "30%", "background-color": "rgba(0, 0, 0, 0.3)", "text-align": "center", "color": "rgba(255,255,255,0.5)", "cursor": "pointer", }).hover(function() { $("#retreat").css("color", "rgba(255,255,255,1)") }, function() { $("#retreat").css("color", "rgba(255,255,255,0.5)") }); // 为 retreat 下的span标签设置 line-height $("#retreat span").css("line-height", $("#retreat").height() + "px"); // 为 advance 设置样式 $("#advance").css({ "width": "7%", "height": $("#advance").width() * 2.3, "position": "absolute", "right": 0, "top": "30%", "background-color": "rgba(0, 0, 0, 0.3)", "text-align": "center", "color": "rgba(255,255,255,0.5)", "cursor": "pointer", }).hover(function() { $("#advance").css("color", "rgba(255,255,255,1)") }, function() { $("#advance").css("color", "rgba(255,255,255,0.5)") }); // 为 advance 下的span标签设置 line-height $("#advance span").css("line-height", $("#advance").height() + "px"); // 声明size,用window的宽度 除以 mid var size = window.innerWidth / mid; // 判断 如果 size的值 小于 min的值 if(size < min) { // size 的值 等于 min的值 size = min; } // 判断 如果size的值大于 max的值 if(size > max) { // size的值等于 max的值 size = max; } // 为调用的的标签设置 'font-size' $this.css("font-size", size + "px"); // 触发函数的时候执行 resize事件 }).trigger('resize'); }; $("#retreat span").fontFlex(23, 60, 20); $("#advance span").fontFlex(23, 60, 20); } var Rotate = new DigsurGallery.Rolling(); var arr = ["Image/1.jpg", "Image/2.jpg", "Image/3.jpg", "Image/4.jpg", "Image/5.jpg", "Image/6.jpg", "Image/7.jpg"]; Rotate.initConfig('page1', arr, true, true); </script> ``` 轮播倒着走去了啊,点击前进也没有用了,谢谢,在线等
关于用translate做动画一卡一卡的问题
![图片说明](https://img-ask.csdn.net/upload/201806/15/1529027959_822644.png) ![图片说明](https://img-ask.csdn.net/upload/201806/15/1529027969_754381.png) 图面在未点击的时候实际只显示中间部分,我让容器overfolw=hidden,然后平移图片实现 这时候有两种思路,一个是利用绝对定位,left,第二个是用translate 但是我用translate的时候,配合transition的动画效果为什么一卡一卡的 绝对定位,left实现就很流畅 **不管是哪种平移,都是用得固定宽度** 如果一定要用tranlate实现,要怎么优化,因为以前好像也用过scale()配合transition也是有点一卡一卡的
【新人求教】用写jQuery瀑布流定位布局,第一次打开网页布局正常,之后每次刷新图片定位都会出现不同的错乱
![图片说明](https://img-ask.csdn.net/upload/201901/08/1546924231_680628.png)![图片说明](https://img-ask.csdn.net/upload/201901/08/1546924243_321754.png)![图片说明](https://img-ask.csdn.net/upload/201901/08/1546924255_549083.png) ``` //瀑布流 function waterfall(wrap,box){ //获取可显示的列数 var boxwidth=box.eq(0).width()+20, windowwidth=$(window).width(), colsnumber=Math.floor(windowwidth/boxwidth); //设置容器宽度 wrap.width(boxwidth*colsnumber) //数组存储每一个高度 var i=0, colsheight=new Array(); for(i=0;i<box.length;i++){ if(i<colsnumber){ colsheight[i]=box.eq(i).height()+20; } else{ //找到目前最小高度 var I=0, minindex=0, minheight=colsheight[0]; for(I=0;I<colsheight.length;I++){ colsheight[I]<minheight?minheight=colsheight[I]:minheight; } //找到最小高度的box的索引 for(I=0;I<colsheight.length;I++){ colsheight[I]==minheight?minindex=I:minindex; } //设置定位 var leftvalue=box.eq(minindex).position().left, topvalue=minheight; box.eq(i).css({ "position":"absolute", "top":topvalue+"px", "left":leftvalue+"px" }) //更新数组中的高度值 colsheight[minindex]+=box.eq(i).height()+20; } } } $(document).ready(function(){ var wrap=$("#wrap"), box=$(".boxes"); waterfall(wrap,box); ```
extjs调用百度地图初始化失败,要二次加载
# extjs代码 ``` /* * 报警事项处理窗口 * yening 2015.2.7 * * paras.winTitle:窗口显示的标题 * paras.width:窗口宽度 * paras.height: * */ Ext.ns('Ext.ux.window'); Ext.ux.window.AlarmProcessWnd = function(paras) { var me = this; var xflwdwUrl = "./xflwdwInfo.do?reqCode=queryXflwdwInfoData";// 消防联网单位信息查询URl var xflwdwStaffUrl = "./xflwdwInfo.do?reqCode=queryXflwdwStaffData";// 消防联网单位人员信息查询URl var fireAlarmProcessUrl = "./fireAlarm.do?reqCode=updateAlarmProcessState";// 消防联网单位人员信息查询URl var processState = 0; var eventStore = null; // 初始化参数----------- Ext.applyIf(paras, { width : 1200, height : 460, winTitle : '' }); // 部门信息-------------- var deptStore = new Ext.data.Store({ proxy : new Ext.data.HttpProxy({ url : xflwdwUrl }), reader : new Ext.data.JsonReader({ totalProperty : 'TOTALCOUNT', root : 'ROOT' }, [ { name : 'deptid' }, { name : 'deptname' }, { name : 'address' }, { name : 'remark' } ]) }); deptStore.on("load", function(dStore) { deptPanel.getForm().loadRecord(dStore.getAt(0)); }) var deptPanel = new Ext.form.FormPanel({ id : 'deptPanel', height : 100, // title:'单位信息', // collapsible : true, name : 'deptPanel', defaultType : 'textfield', labelAlign : 'right', labelWidth : 80, frame : true, bodyStyle : 'padding:5 5 0', items : [ { fieldLabel : '单位名称', name : 'deptname', readOnly : true, allowBlank : true, anchor : '99%' }, { fieldLabel : '地址', name : 'address', allowBlank : true, readOnly : true, anchor : '99%' }, { fieldLabel : '说明', name : 'remark', allowBlank : true, readOnly : true, anchor : '99%' } ] }); // ---------------------部门人员信息-------------- var staffStore = new Ext.data.Store({ proxy : new Ext.data.HttpProxy({ url : xflwdwStaffUrl }), reader : new Ext.data.JsonReader({ totalProperty : 'TOTALCOUNT', root : 'ROOT' }, [ { name : 'name' }, { name : 'sex' }, { name : 'type' }, { name : 'phone1' }, { name : 'phone2' } ]) }); var staffCm = new Ext.grid.ColumnModel([ new Ext.grid.RowNumberer(), { header : '姓名', dataIndex : 'name', width : 80 }, { header : '性别', dataIndex : 'sex', width : 40, renderer : SEXRender, sortable : true }, { header : '类型', dataIndex : 'type', width : 100, renderer : XFLWDWSTAFFTYPERender, sortable : true }, { header : '联系电话1', dataIndex : 'phone1', width : 150, sortable : true }, { header : '联系电话2', dataIndex : 'phone2', width : 200, sortable : true } ]); var staffGrid = new Ext.grid.GridPanel({ // title : "联系人", height : 120, // width: 800, autoScroll : true, region : 'center', margins : '3 3 3 3', store : staffStore, loadMask : { msg : '正在加载表格数据,请稍等...' }, stripeRows : true, frame : true, cm : staffCm }); // ----------------------事项处理Panel-------------------- var store = new Ext.data.SimpleStore({ fields : [ 'name', 'code', 'remark' ], data : [ [ '误报模板', '001', '该信息是误报,XXX' ], [ '确认模板', '002', '火情已确认,XXXX' ] ] }); var processMode = new Ext.form.ComboBox({ id : 'id_mode', hiddenName : 'processMode', fieldLabel : '处理模板', triggerAction : 'all', store : store, displayField : 'name', valueField : 'code', mode : 'local', forceSelection : true, typeAhead : true, resizable : true, anchor : '99%', emptyText : '请选择' }); processMode.on("select", function(combo, record) { var txt = Ext.getCmp("processText"); var remark = record.get("remark"); txt.setValue(remark); }); var processForm = new Ext.form.FormPanel({ name : 'processForm', // title : "火警处理", labelWidth : 80, // 标签宽度 frame : true, // frame : true, //是否渲染表单面板背景色 defaultType : 'textfield', // 表单元素默认类型 labelAlign : 'right', // 标签对齐方式 bodyStyle : 'padding:5 5 5 5', // 表单元素和表单面板的边距 items : [ processMode, { id : "processText", fieldLabel : '处理结果', name : 'processText', xtype : 'textarea', height : 80, // 设置多行文本框的高度 emptyText : '请填写处理结果相关内容', // 设置默认初始值 allowBlank : false, anchor : '99%' }, { id : "eventid", name : 'eventid', fieldLabel : '事件id', hidden : true, anchor : '99%' }, { id : "processstate", name : 'processstate', fieldLabel : '事件处理状态', hidden : true, anchor : '99%' } ] }); var eventItemPanel = new Ext.Panel({ layout : 'form', resizable : false, draggable : true, closeAction : 'hide', modal : true, titleCollapse : true, maximizable : false, buttonAlign : 'right', border : false, animCollapse : true, animateTarget : Ext.getBody(), constrain : true, items : [ deptPanel, staffGrid, processForm ], buttons : [ { text : '火警误报', iconCls : 'exclamationIcon', handler : function() { processEventFunction(1); } }, { text : '火警确认', iconCls : 'acceptIcon', handler : function() { processEventFunction(2); } }, { text : '转119', iconCls : 'userIcon', handler : function() { processEventFunction(3); } }, { text : '关闭', iconCls : 'deleteIcon', handler : function() { eventItemWindow.hide(); } } ] }); // -------------------------GIS页面----------------------- var GISPanel = new Ext.Panel( { collapsible : false, margins : '3 3 3 3', html : '<iframe id="gis" name="gis" src="app/fireAlarm/js/GIS.htm" width="100%" height="100%" frameborder=0 scrolling=auto></iframe>' }); // ----------------------------------------------事项处理窗口------------------- // --- var eventItemWindow = new Ext.Window({ title : paras.winTitle, layout : 'column', width : paras.width, height : paras.height, closable : true, // 是否可关闭 closeAction : 'hide', maximizable : true,// 最大化 animateTarget : Ext.getBody(), collapsible : true, // 是否可收缩 border : true, modal : true, resizable : false, draggable : true, titleCollapse : true, animCollapse : true, margins : '3 3 3 3', pageY : 20, pageX : 50, // pageX : document.body.clientWidth / 2 - 420 / 2, constrain : true,// 设置窗口是否可以溢出父容器 items : [ { collapsible : true, columnWidth : .3, AutoHeight:true, region : 'west', autoScroll : true, items : [ eventItemPanel ] }, { region : 'center', columnWidth : .7, items : [ GISPanel ] } ] }); this.getProcessState = function() { return processState; }; /** * 显示窗口 */ this.showWindow = function(grid) { var record = grid.getSelectionModel().getSelected(); eventStore = grid.store; processState = 0; if (Ext.isEmpty(record)) { Ext.MessageBox.alert('提示', '请先选中要查看的事项'); return; } var eventID = record.get("eventid");// 事件ID var deptID = record.get("deptid");// 部门ID var longitudeInfo = record.get("longitude"); var latitudeInfo = record.get("latitude"); deptStore.load({ params : { deptid : deptID } }); staffStore.load({ params : { deptid : deptID } }); processForm.getForm().reset(); eventItemWindow.show(); Ext.getCmp("eventid").setValue(eventID); window.frames['gis'].theLocation(longitudeInfo, latitudeInfo); } /** * 获得经度 * */ function longitude() { for (var i = 0; i < deptStore.getCount(); i++) { var longitudeRecord = deptStore.getAt(i); longitudeInfo = longitudeRecord.get('longitude'); return longitudeInfo; } } /** * 获得纬度 * */ function latitude() { for (var i = 0; i < deptStore.getCount(); i++) { var latitudeRecord = deptStore.getAt(i); latitudeInfo = latitudeRecord.get('latitude'); return latitudeInfo; } } /** * 事件处理 */ function processEventFunction(precessState) { if (!processForm.form.isValid()) { alert("请填写火警处理结果信息。。。。"); return; } update(precessState); } /** * 事件处理 */ function update(precessState) { var cmpProcessState = Ext.getCmp("processstate"); cmpProcessState.setValue(precessState); processForm.form.submit({ url : fireAlarmProcessUrl, waitTitle : '提示', method : 'POST', waitMsg : '正在处理数据,请稍候...', success : function(form, action) { eventItemWindow.hide(); eventStore.reload(); form.reset(); }, failure : function(form, action) { var msg = action.result.msg; Ext.MessageBox.alert('提示', '数据修改失败:<br>' + msg); } }); } } ``` ## 百度地图代码 ``` <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> body, html{width: 100%;height: 100%;margin:0;font-family:"微软雅黑";} #allmap{height:500px;width:100%;} #r-result{width:100%; font-size:14px;} .anchorBL { display: none;} </style> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=WQOD7GtcqdZaEDDPVBqdqeYj"></script> <title>城市名定位</title> </head> <body> <div id="allmap"></div> </body> </html> <script type="text/javascript"> function initMap(longitudeInfo, latitudeInfo){ // 百度地图API功能 var new_point = new BMap.Point(longitudeInfo, latitudeInfo); var map = new BMap.Map("allmap"); // 创建Map实例 map.centerAndZoom(new_point,14); map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放 var marker = new BMap.Marker(new_point); // 创建标注 map.addOverlay(marker); // 将标注添加到地图中 marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画 } var longitude = 116.331398; var latitude = 39.897445; initMap(longitude, latitude); // 用经纬度设置地图中心点 function theLocation(longitude, latitude) { initMap(longitude, latitude); } </script> ```
Java学习的正确打开方式
在博主认为,对于入门级学习java的最佳学习方法莫过于视频+博客+书籍+总结,前三者博主将淋漓尽致地挥毫于这篇博客文章中,至于总结在于个人,实际上越到后面你会发现学习的最好方式就是阅读参考官方文档其次就是国内的书籍,博客次之,这又是一个层次了,这里暂时不提后面再谈。博主将为各位入门java保驾护航,各位只管冲鸭!!!上天是公平的,只要不辜负时间,时间自然不会辜负你。 何谓学习?博主所理解的学习,它是一个过程,是一个不断累积、不断沉淀、不断总结、善于传达自己的个人见解以及乐于分享的过程。
大学四年自学走来,这些私藏的实用工具/学习网站我贡献出来了
大学四年,看课本是不可能一直看课本的了,对于学习,特别是自学,善于搜索网上的一些资源来辅助,还是非常有必要的,下面我就把这几年私藏的各种资源,网站贡献出来给你们。主要有:电子书搜索、实用工具、在线视频学习网站、非视频学习网站、软件下载、面试/求职必备网站。 注意:文中提到的所有资源,文末我都给你整理好了,你们只管拿去,如果觉得不错,转发、分享就是最大的支持了。 一、电子书搜索 对于大部分程序员...
linux系列之常用运维命令整理笔录
本博客记录工作中需要的linux运维命令,大学时候开始接触linux,会一些基本操作,可是都没有整理起来,加上是做开发,不做运维,有些命令忘记了,所以现在整理成博客,当然vi,文件操作等就不介绍了,慢慢积累一些其它拓展的命令,博客不定时更新 free -m 其中:m表示兆,也可以用g,注意都要小写 Men:表示物理内存统计 total:表示物理内存总数(total=used+free) use...
Vue + Spring Boot 项目实战(十四):用户认证方案与完善的访问拦截
本篇文章主要讲解 token、session 等用户认证方案的区别并分析常见误区,以及如何通过前后端的配合实现完善的访问拦截,为下一步权限控制的实现打下基础。
比特币原理详解
一、什么是比特币 比特币是一种电子货币,是一种基于密码学的货币,在2008年11月1日由中本聪发表比特币白皮书,文中提出了一种去中心化的电子记账系统,我们平时的电子现金是银行来记账,因为银行的背后是国家信用。去中心化电子记账系统是参与者共同记账。比特币可以防止主权危机、信用风险。其好处不多做赘述,这一层面介绍的文章很多,本文主要从更深层的技术原理角度进行介绍。 二、问题引入 假设现有4个人...
程序员接私活怎样防止做完了不给钱?
首先跟大家说明一点,我们做 IT 类的外包开发,是非标品开发,所以很有可能在开发过程中会有这样那样的需求修改,而这种需求修改很容易造成扯皮,进而影响到费用支付,甚至出现做完了项目收不到钱的情况。 那么,怎么保证自己的薪酬安全呢? 我们在开工前,一定要做好一些证据方面的准备(也就是“讨薪”的理论依据),这其中最重要的就是需求文档和验收标准。一定要让需求方提供这两个文档资料作为开发的基础。之后开发...
网页实现一个简单的音乐播放器(大佬别看。(⊙﹏⊙))
今天闲着无事,就想写点东西。然后听了下歌,就打算写个播放器。 于是乎用h5 audio的加上js简单的播放器完工了。 演示地点演示 html代码如下` music 这个年纪 七月的风 音乐 ` 然后就是css`*{ margin: 0; padding: 0; text-decoration: none; list-...
Python十大装B语法
Python 是一种代表简单思想的语言,其语法相对简单,很容易上手。不过,如果就此小视 Python 语法的精妙和深邃,那就大错特错了。本文精心筛选了最能展现 Python 语法之精妙的十个知识点,并附上详细的实例代码。如能在实战中融会贯通、灵活使用,必将使代码更为精炼、高效,同时也会极大提升代码B格,使之看上去更老练,读起来更优雅。
数据库优化 - SQL优化
以实际SQL入手,带你一步一步走上SQL优化之路!
2019年11月中国大陆编程语言排行榜
2019年11月2日,我统计了某招聘网站,获得有效程序员招聘数据9万条。针对招聘信息,提取编程语言关键字,并统计如下: 编程语言比例 rank pl_ percentage 1 java 33.62% 2 cpp 16.42% 3 c_sharp 12.82% 4 javascript 12.31% 5 python 7.93% 6 go 7.25% 7 p...
通俗易懂地给女朋友讲:线程池的内部原理
餐盘在灯光的照耀下格外晶莹洁白,女朋友拿起红酒杯轻轻地抿了一小口,对我说:“经常听你说线程池,到底线程池到底是个什么原理?”
经典算法(5)杨辉三角
杨辉三角 是经典算法,这篇博客对它的算法思想进行了讲解,并有完整的代码实现。
腾讯算法面试题:64匹马8个跑道需要多少轮才能选出最快的四匹?
昨天,有网友私信我,说去阿里面试,彻底的被打击到了。问了为什么网上大量使用ThreadLocal的源码都会加上private static?他被难住了,因为他从来都没有考虑过这个问题。无独有偶,今天笔者又发现有网友吐槽了一道腾讯的面试题,我们一起来看看。 腾讯算法面试题:64匹马8个跑道需要多少轮才能选出最快的四匹? 在互联网职场论坛,一名程序员发帖求助到。二面腾讯,其中一个算法题:64匹...
面试官:你连RESTful都不知道我怎么敢要你?
干货,2019 RESTful最贱实践
SQL-小白最佳入门sql查询一
不要偷偷的查询我的个人资料,即使你再喜欢我,也不要这样,真的不好;
项目中的if else太多了,该怎么重构?
介绍 最近跟着公司的大佬开发了一款IM系统,类似QQ和微信哈,就是聊天软件。我们有一部分业务逻辑是这样的 if (msgType = "文本") { // dosomething } else if(msgType = "图片") { // doshomething } else if(msgType = "视频") { // doshomething } else { // doshom...
漫话:什么是平衡(AVL)树?这应该是把AVL树讲的最好的文章了
这篇文章通过对话的形式,由浅入深带你读懂 AVL 树,看完让你保证理解 AVL 树的各种操作,如果觉得不错,别吝啬你的赞哦。 1、若它的左子树不为空,则左子树上所有的节点值都小于它的根节点值。 2、若它的右子树不为空,则右子树上所有的节点值均大于它的根节点值。 3、它的左右子树也分别可以充当为二叉查找树。 例如: 例如,我现在想要查找数值为14的节点。由于二叉查找树的特性,我们可...
“狗屁不通文章生成器”登顶GitHub热榜,分分钟写出万字形式主义大作
一、垃圾文字生成器介绍 最近在浏览GitHub的时候,发现了这样一个骨骼清奇的雷人项目,而且热度还特别高。 项目中文名:狗屁不通文章生成器 项目英文名:BullshitGenerator 根据作者的介绍,他是偶尔需要一些中文文字用于GUI开发时测试文本渲染,因此开发了这个废话生成器。但由于生成的废话实在是太过富于哲理,所以最近已经被小伙伴们给玩坏了。 他的文风可能是这样的: 你发现,...
程序员:我终于知道post和get的区别
是一个老生常谈的话题,然而随着不断的学习,对于以前的认识有很多误区,所以还是需要不断地总结的,学而时习之,不亦说乎
《程序人生》系列-这个程序员只用了20行代码就拿了冠军
你知道的越多,你不知道的越多 点赞再看,养成习惯GitHub上已经开源https://github.com/JavaFamily,有一线大厂面试点脑图,欢迎Star和完善 前言 这一期不算《吊打面试官》系列的,所有没前言我直接开始。 絮叨 本来应该是没有这期的,看过我上期的小伙伴应该是知道的嘛,双十一比较忙嘛,要值班又要去帮忙拍摄年会的视频素材,还得搞个程序员一天的Vlog,还要写BU...
开源并不是你认为的那些事
点击上方蓝字 关注我们开源之道导读所以 ————想要理清开源是什么?先要厘清开源不是什么,名正言顺是句中国的古代成语,概念本身的理解非常之重要。大部分生物多样性的起源,...
加快推动区块链技术和产业创新发展,2019可信区块链峰会在京召开
11月8日,由中国信息通信研究院、中国通信标准化协会、中国互联网协会、可信区块链推进计划联合主办,科技行者协办的2019可信区块链峰会将在北京悠唐皇冠假日酒店开幕。   区块链技术被认为是继蒸汽机、电力、互联网之后,下一代颠覆性的核心技术。如果说蒸汽机释放了人类的生产力,电力解决了人类基本的生活需求,互联网彻底改变了信息传递的方式,区块链作为构造信任的技术有重要的价值。   1...
程序员把地府后台管理系统做出来了,还有3.0版本!12月7号最新消息:已在开发中有github地址
第一幕:缘起 听说阎王爷要做个生死簿后台管理系统,我们派去了一个程序员…… 996程序员做的梦: 第一场:团队招募 为了应对地府管理危机,阎王打算找“人”开发一套地府后台管理系统,于是就在地府总经办群中发了项目需求。 话说还是中国电信的信号好,地府都是满格,哈哈!!! 经常会有外行朋友问:看某网站做的不错,功能也简单,你帮忙做一下? 而这次,面对这样的需求,这个程序员...
网易云6亿用户音乐推荐算法
网易云音乐是音乐爱好者的集聚地,云音乐推荐系统致力于通过 AI 算法的落地,实现用户千人千面的个性化推荐,为用户带来不一样的听歌体验。 本次分享重点介绍 AI 算法在音乐推荐中的应用实践,以及在算法落地过程中遇到的挑战和解决方案。 将从如下两个部分展开: AI算法在音乐推荐中的应用 音乐场景下的 AI 思考 从 2013 年 4 月正式上线至今,网易云音乐平台持续提供着:乐屏社区、UGC...
【技巧总结】位运算装逼指南
位算法的效率有多快我就不说,不信你可以去用 10 亿个数据模拟一下,今天给大家讲一讲位运算的一些经典例子。不过,最重要的不是看懂了这些例子就好,而是要在以后多去运用位运算这些技巧,当然,采用位运算,也是可以装逼的,不信,你往下看。我会从最简单的讲起,一道比一道难度递增,不过居然是讲技巧,那么也不会太难,相信你分分钟看懂。 判断奇偶数 判断一个数是基于还是偶数,相信很多人都做过,一般的做法的代码如下...
《C++ Primer》学习笔记(六):C++模块设计——函数
专栏C++学习笔记 《C++ Primer》学习笔记/习题答案 总目录 https://blog.csdn.net/TeFuirnever/article/details/100700212 —————————————————————————————————————————————————————— 《C++ Primer》习题参考答案:第6章 - C++模块设计——函数 文章目录专栏C+...
8年经验面试官详解 Java 面试秘诀
作者 |胡书敏 责编 | 刘静 出品 | CSDN(ID:CSDNnews) 本人目前在一家知名外企担任架构师,而且最近八年来,在多家外企和互联网公司担任Java技术面试官,前后累计面试了有两三百位候选人。在本文里,就将结合本人的面试经验,针对Java初学者、Java初级开发和Java开发,给出若干准备简历和准备面试的建议。 Java程序员准备和投递简历的实...
面试官如何考察你的思维方式?
1.两种思维方式在求职面试中,经常会考察这种问题:北京有多少量特斯拉汽车?某胡同口的煎饼摊一年能卖出多少个煎饼?深圳有多少个产品经理?一辆公交车里能装下多少个乒乓球?一个正常成年人有多少根头发?这类估算问题,被称为费米问题,是以科学家费米命名的。为什么面试会问这种问题呢?这类问题能把两类人清楚地区分出来。一类是具有文科思维的人,擅长赞叹和模糊想象,它主要依靠的是人的第一反应和直觉,比如小孩...
so easy! 10行代码写个"狗屁不通"文章生成器
前几天,GitHub 有个开源项目特别火,只要输入标题就可以生成一篇长长的文章。 背后实现代码一定很复杂吧,里面一定有很多高深莫测的机器学习等复杂算法 不过,当我看了源代码之后 这程序不到50行 尽管我有多年的Python经验,但我竟然一时也没有看懂 当然啦,原作者也说了,这个代码也是在无聊中诞生的,平时撸码是不写中文变量名的, 中文...
知乎高赞:中国有什么拿得出手的开源软件产品?(整理自本人原创回答)
知乎高赞:中国有什么拿得出手的开源软件产品? 在知乎上,有个问题问“中国有什么拿得出手的开源软件产品(在 GitHub 等社区受欢迎度较好的)?” 事实上,还不少呢~ 本人于2019.7.6进行了较为全面的回答,对这些受欢迎的 Github 开源项目分类整理如下: 分布式计算、云平台相关工具类 1.SkyWalking,作者吴晟、刘浩杨 等等 仓库地址: apache/skywalking 更...
MySQL数据库总结
一、数据库简介 数据库(Database,DB)是按照数据结构来组织,存储和管理数据的仓库。 典型特征:数据的结构化、数据间的共享、减少数据的冗余度,数据的独立性。 关系型数据库:使用关系模型把数据组织到数据表(table)中。现实世界可以用数据来描述。 主流的关系型数据库产品:Oracle(Oracle)、DB2(IBM)、SQL Server(MS)、MySQL(Oracle)。 数据表:数...
20行Python代码爬取王者荣耀全英雄皮肤
引言 王者荣耀大家都玩过吧,没玩过的也应该听说过,作为时下最火的手机MOBA游戏,咳咳,好像跑题了。我们今天的重点是爬取王者荣耀所有英雄的所有皮肤,而且仅仅使用20行Python代码即可完成。 准备工作 爬取皮肤本身并不难,难点在于分析,我们首先得得到皮肤图片的url地址,话不多说,我们马上来到王者荣耀的官网: 我们点击英雄资料,然后随意地选择一位英雄,接着F12打开调试台,找到英雄原皮肤的图片...
中年危机,35 岁定律,见鬼去吧!
中年危机,35 岁定律,相信你都听说过,每次触及还会让你感到丝丝焦虑,毕竟时间这把杀猪刀不会放过任何一个人。中年危机或 35 岁定律是客观存在的,你迟早都会遭遇的,那你是否有信心战胜它呢? 中年危机之所以让人害怕,一则是你没有把握打赢这场遭遇战,再则中年是一个输不起的阶段。古人云:知己知彼,百战不殆。恐惧,主要源自对敌人和自己的不了解,不知道敌人的优劣势,也不清楚自己的长短板,常常以己之所短攻彼...
张小龙-年薪近3亿的微信之父,他是如何做到的?
张小龙生于湖南邵东魏家桥镇, 家庭主要特点:穷。 不仅自己穷,亲戚也都很穷,可以说穷以类聚。爷爷做过铜匠,总的来说,标准的劳动阶级出身。 家有兄弟两人, 一个小龙,一个小虎。 小虎好动,与邻里打成一片, 小龙好静,喜好读书。 “文静的像个妹子。”张小龙的表哥如是说。 穷文富武,做个读书郎是个不错的选择。 87年至94年, 华中科技大学本硕连读。 本科就读电信系, 不喜欢上课...
阿里靠什么武功秘籍渡过“双十一“的天量冲击
双十一大概会产生多大的数据量呢,可能大家没概念,举个例子央视拍了这么多年电视新闻节目,几十年下来他存了大概80P的数据。而今年双11一天,阿里要处理970P的数据,做为一个IT人,笔者认为今年”双十一“阿里最大的技术看点有有以下两个: 阿里的数据库,也就是刚刚拿下TPC冠军的OcceanBase,处理峰值也达到了骇人听闻的6100万次/秒, 阿里核心系统百分百上云了。 如果把信息系统比做一个武...
西游记团队中如果需要裁掉一个人,会先裁掉谁?
2019年互联网寒冬,大批企业开始裁员,下图是网上流传的一张截图: 裁员不可避免,那如何才能做到不管大环境如何变化,自身不受影响呢? 我们先来看一个有意思的故事,如果西游记取经团队需要裁员一名,会裁掉谁呢,为什么? 西游记团队组成: 1.唐僧 作为团队teamleader,有很坚韧的品性和极高的原则性,不达目的不罢休,遇到任何问题,都没有退缩过,又很得上司支持和赏识(直接得到唐太宗的任命,既给袈...
iOS Bug 太多,苹果终于坐不住了!
开源的 Android 和闭源的 iOS,作为用户的你,更偏向哪一个呢? 整理 | 屠敏 出品 | CSDN(ID:CSDNnews) 毋庸置疑,当前移动设备操作系统市场中,Android 和 iOS 作为两大阵营,在相互竞争的同时不断演进。不过一直以来,开源的 Android 吸引了无数的手机厂商涌入其中,为其生态带来了百花齐放的盛景,但和神秘且闭源的 iOS 系统相比,不少网友...
相关热词 c# clr dll c# 如何orm c# 固定大小的字符数组 c#框架设计 c# 删除数据库 c# 中文文字 图片转 c# 成员属性 接口 c#如何将程序封装 16进制负数转换 c# c#练手项目
立即提问