![](https://img-blog.csdnimg.cn/20201014180756926.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
myWork--
文章平均质量分 62
java_zhaoyanli
不忘初衷,善始善终。
展开
-
Echarts折线图
js:var myChart = echarts.init(document.getElementById('fold_line'));option = { title: { text: '', subtext: '危险行为次数:10次',// left: 'right', top:'-13px', right:'4%', ...原创 2018-08-24 14:33:09 · 743 阅读 · 0 评论 -
jquery控制超出2行写省略号
$(function () { $(".figcaption").each(function (i) { var divH = $(this).height(); var $p = $("p", $(this)).eq(0); while ($p.outerHeight() > divH) {原创 2016-12-15 11:37:38 · 1507 阅读 · 0 评论 -
jquery控制td里面超出部分写省略号..
//限制td字符个数 var self=$('#userManageTable tr td'); self.each(function(){ var objString = $(this).text(); var objLength = $(this).text().length;原创 2016-12-15 11:33:19 · 1427 阅读 · 0 评论 -
jQuery实现表格选中行变色
jQuery实现表格选中行变色.s1 { background-color: yellow;} $(function() { $("tbody tr").click(function() { $(this).addClass("s1").siblings().removeClass("s1"); $(this).find(":radio").attr("check翻译 2016-12-02 11:27:22 · 3474 阅读 · 0 评论 -
jquery实现展开和收缩,且里面的选中背景变色,同步
id="c1"> 入库检测 待检测原创 2016-12-01 14:43:46 · 735 阅读 · 0 评论 -
整套网页头部和底部的内容一样,只切换中间的内容(自己的项目总结)
做页面的时候,一定先分析好是否需要写一些公共的东西来调用,千万不要做没用工!!!1,写的时候标注好注释,方便代码多容易乱,无头绪的问题发生。2,对于遮罩层和弹出框可以写在主页,遮罩层要全部遮住!3,对于header.html里面的按钮,点击按钮会弹出弹框的问题,可以把弹框写在index.html里面,在header.js里面控制,eg:$('.pwd').cli原创 2016-11-29 10:20:49 · 3573 阅读 · 0 评论 -
鼠标移动到按钮上是蓝色,选中是黄色,默认是白色
//鼠标移入按钮 $('.tab_btn button').mouseover(function () { $(this).attr('style', 'background-color:#016cae;color:#fff'); }); //鼠标移出按钮 $('.tab_btn button').mouseout(function () {原创 2016-10-19 17:55:15 · 1420 阅读 · 0 评论 -
鼠标移到隔行变色的表格上,有背景变化,并且点击的时候选中复选框和背景色
changecolor(); //隔行变色 function changecolor() { var i = 0; var jian = 0; $('.bugtable tr').each(function () { i++; jian = i - 1; if (原创 2016-10-19 17:48:28 · 1039 阅读 · 0 评论 -
进度条(点击一次进一点,意思是后台传入一个数就进度就多一点)
进度条 body{ text-align:center; } .graph{ width:450px; border:1px solid #F8B3D0; height:25px; } #bar{ display:block; background:#FFE7F4; fl原创 2016-10-19 17:41:30 · 1352 阅读 · 0 评论 -
点击输入框,下拉弹框,点击页面的其他部分,弹框消失
点击下拉框,下面会弹出一个框,再点击收回,点击页面的其他内容,此下拉弹出框也会消失: //选择查询的类型弹出框 $('.query_select').hide(); $('#select').click(function (e) { if ($('.query_select').is(':hidden')) { $(".quer原创 2016-09-22 14:15:20 · 8005 阅读 · 0 评论 -
对highcharts的总结(饼图、柱状图、折线图、曲线图)
1,饼图 Highcharts Example g.highcharts-grid:nth-child(6) > path { stroke-width: 0; } .highcharts-background{ fill:transparent !importan原创 2016-10-25 10:55:09 · 4009 阅读 · 0 评论 -
点击图标切换(包括点击图标下面的文字也切换)
HTML: 全部 温湿度原创 2016-10-25 10:17:58 · 2937 阅读 · 1 评论 -
jQuery插件transform旋转焦点图的准备工作
1,【JQery.transform是基于jquery库的插件】IE8以下不支持css3,首先加载jQuery的函数库,$(function(){ $('#test1').transform({rotate:'60deg'});//旋转60度$('#test1').animate({rotate:'60deg'});//有动画的旋转60度})2,【定时器】原创 2016-09-22 11:36:53 · 715 阅读 · 0 评论 -
CSS DIV高度不确定如何设置高度
CSS DIV高度不确定如何设置高度,是否需要加上height:auto属性?在CSS布局中,常常最外层的DIV盒子不能确定具体的height高度值,不确定内容是否可多可少而不能确定父级盒子究竟设置多高。此时一般新手喜欢设置个height:auto(高度自适应)样式。这里DIVCSS5可以告诉大家,一般最外层的DIV盒子,或不确定内容(子级)占用多高时,此时对此父级DIV不需要设置heig转载 2016-12-21 15:18:45 · 1184 阅读 · 0 评论 -
让canvas的高度自适应
html: js:$(function () { var winH = $(window).height(); $(".musicbg .colnumbg .item1 .canvas").height(winH * 187 / 6原创 2016-12-23 16:37:21 · 3473 阅读 · 0 评论 -
HTML 提高页面加载速度的方法
(1)减少 HTTP 的请求。(合并资源文件 和 使用图片精灵 ;(2)把CSS 放头部,把 JavaScript 放到 body 标签尾部;(3)定义图片的宽和高;(4)定义字符集;(5)避免空的 src 和 href 属性, html里这样写:?1ahref="javascript:;"class="tri转载 2017-03-21 17:23:08 · 2878 阅读 · 0 评论 -
Echarts 实现动态地图
<html lang="en"><head><meta charset="utf-8"><title>地图分布动画特效</title><style> *{ margin: 0; padding: 0; }</style></head转载 2018-08-24 11:17:21 · 7513 阅读 · 0 评论 -
地图皮肤切换(高德)
说到地图,可以调用高德的接口。api:http://lbs.amap.com/api/javascript-api/gettingstarted<!--图表,下面7行和皮肤切换无关--><script type="text/javascript" src="js/colnum.js" defer="defer"></script> <s原创 2018-08-24 11:12:02 · 2207 阅读 · 0 评论 -
NetBeans无法运行的可能错误
首先,1,配置文件 D:\My-work\ruanjian\Environment\iAMP_WORK\variable\configdown下来这个文件后,先看配置文件的名字和本地的名字是否一致,环境变量:2,检查jar包是否下载好了,可以手动导入。可以手动导入,也可以放到C盘C:\Users\xryc\.m2\repository\org\ap...原创 2018-08-24 10:59:44 · 9133 阅读 · 0 评论 -
不同图标切换时候高亮
var lib = $(".libg"); var imgurl = $(lib).find('img').attr('src'); var str1 = imgurl.substring(0, imgurl.lastIndexOf("/") + 1); var str2 = imgurl.substring(imgurl.lastIndexOf("/") + 1); var url =原创 2017-12-28 17:43:42 · 968 阅读 · 0 评论 -
css实现渐变色,从做到右,从上到下
1,从左到右的渐变色:background:#74F195; background:-webkit-linear-gradient(left,#74F195,#C8FF9A); background:-o-linear-gradient(right,#74F195,#C8FF9A); background:-moz-linear-gradient(right,#74F195,#C8FF9原创 2017-12-28 17:05:44 · 32733 阅读 · 2 评论 -
click事件,同一位置切换两个图标
1,可能最简单的就是toggle,但是这个属性只有是jquery.1.8.1.js才可以用,右局限性。2,用click实现:点一下显示下拉内容,再点一下消失 $('.vdts-left-bottom .select').click(function() { var statebox = $('.optionbox').css('display'); if(statebox原创 2017-12-28 17:23:12 · 1774 阅读 · 0 评论 -
highcharts实现实时动态的折线面积图
首先去highcharts官网下载highcharts.js1,HTML Document #container { background: transparent !important; fill: transparent !important; } . highcharts-backgro原创 2017-12-08 15:59:47 · 1262 阅读 · 0 评论 -
左侧菜单切换后小图标跟随变化成选中的图标
不同的图标,切换时候变化:我给左侧灰色图标起名XX,鼠标选中后变白的图标相对应的叫:hua_XX$(function() { //左侧 var lib = $(".libg"); var imgurl = $(lib).find('img').attr('src'); var str1 = imgurl.substring(0, imgurl.last原创 2017-12-08 15:41:33 · 921 阅读 · 0 评论 -
桌面系统(web前端)jQuery制作Web桌面系统界面类似WebQQ桌面布局
源码不是我写的,但是我在基础上修改了一些内容。可参考,http://www.xwcms.net/webAnnexImages/fileAnnex/20140220/82693/index.htmljQuery制作Web桌面系统界面类似WebQQ桌面布局js有些修改。左边是图标,双击可弹出弹框,弹框之间可进行切换,弹框可缩小放大,右下角的小图标内容是缩略图。原创 2017-12-08 14:05:12 · 7382 阅读 · 0 评论 -
canvas写仪表盘
electricity.html 电压电流表 #meter_canvas1, #meter_canvas2, #meter_canvas3, #meter_canvas4, #meter_canvas5, #meter_canvas6{ background:url('img/hui.png原创 2017-03-14 18:36:36 · 3787 阅读 · 2 评论 -
渐变色的3D柱子,超出100%后变红
html colnum.html input[name^='resize-']:checked + l原创 2017-03-31 17:14:08 · 592 阅读 · 0 评论 -
easyUI的可编辑树
用户管理 /*1级*/ .easyui-tree > li > div { width: 100%; height: 36px; background-color: rgba(14,156,245,0.4);原创 2017-03-14 18:04:56 · 626 阅读 · 0 评论 -
全屏切换效果
预备:HTML语言css样式-class、选择器、背景css动画JavaScript基本语法,闭包,单例模式jQuery基础功能$(select), .data(),.animate(),事件等1,可以使用sublime text插件,安装 Emmet插件!->Tab 就可生成HTML模板【闭包】(function($){})(jque原创 2016-09-21 17:43:55 · 518 阅读 · 0 评论 -
伪元素
伪元素:让HTML更干净;把不重要的放到微元素里面;伪元素本质就是模拟一个元素;比如放一些箭头,小图标,小装饰#div2{ width:120px;height:120px;border:5px #273fie solid;top:90px;}#div::before{ content:'9999'}AA66666原创 2016-09-21 15:43:38 · 300 阅读 · 0 评论 -
三级菜单的展开与收起功能
HTML: 磁带生成单位 科委 农委 纪委原创 2016-09-08 18:38:36 · 4441 阅读 · 0 评论 -
隐藏元素的hide方法
让页面上的元素不可见,一般可以通过设置css的display为none属性。但是通过css直接修改是静态的布局,如果在代码执行的时候,一般是通过js控制元素的style属性,这里jQuery提供了一个快捷的方法.hide()来达到这个效果$elem.hide()提供参数:.hide( options )当提供hide方法一个参数时,.hide()成为一个动画方法。.hide()方法将为匹配原创 2016-08-01 23:04:43 · 3026 阅读 · 0 评论 -
分页代码的制作
使用什么标签来完成分页页码:标签前一页和当前页不需要a标签,可以用span标签前一个和后一页如果用>和翻译 2016-08-01 19:21:29 · 250 阅读 · 0 评论 -
用jQuery实现焦点图轮播(底部是小圆点)
图片轮播 body, div, ul, li, a, img { margin: 0; padding: 0; } ul, li { list-style: none; } a { text-decorati原创 2016-08-01 17:27:43 · 7847 阅读 · 0 评论 -
用jQuery实现广告轮播的效果
图片轮播 jq(左右切换) body, div, ul, li, a, img { margin: 0; padding: 0; } ul, li { list-style: none; } a { text-翻译 2016-08-01 15:31:22 · 7159 阅读 · 0 评论 -
基于jQuery实现轮播特效(原理)
首先是html结构,一个简单的轮播,单张图片无缝轮播,主要分为三大层:div>ul>li,li里面的img图片。其次,css样式:div固定住宽高,overflow:hidden;ul的宽度建议是动态获取(下一步会讲是怎么获取);关于li我习惯使用浮动,让他们依次排列,在ul上要记得清楚浮动(clear:both)。重要的是jquery的方法,主要有用到的有animate(),setInt翻译 2016-08-01 11:22:49 · 468 阅读 · 0 评论 -
js实现选项卡的切换
选项卡的切换 .on{ background:#399; color:#fff;} .box div{ width:300px; height:300px; border:1px solid #000; display:none; margin-top:-2px;} window.onload=function(){翻译 2016-08-01 10:57:49 · 2282 阅读 · 0 评论 -
实现两个小图片的相互切换
function change_pic(){var imgObj = document.getElementById("caocao_pic");var Flag=(imgObj.getAttribute("src",2)=="images/caocao.png")imgObj.src=Flag?"images/diaochan.png":"images/caocao.png";}翻译 2016-08-01 10:41:46 · 2665 阅读 · 0 评论 -
reset.css
html标签在浏览器里有默认的样式,不同浏览器的默认样式之间也有差别,比如ul默认有缩进的样式,在ie下,它的缩进是通过margin实现的,而Firefox下,它的缩进样式是由padding实现的,在开发页面的饿时候,浏览器的默认样式往往会带来麻烦,那么就用reset.css来解决。*{padding:0;margin:0;}原创 2016-07-30 17:37:35 · 410 阅读 · 0 评论 -
用canvas实现小方块的音符跳动
//绘制小方块 function videobg(x,y,canvasGradient){ var c1 = document.getElementById("canvas"); //var r=112+(Math.random()*223); if(c1.getContext('2d')){ var ctx = c1.getContext("2d");原创 2016-06-12 18:26:39 · 1522 阅读 · 0 评论