![](https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
web前端
疯子和傻子的爱情故事
这个作者很懒,什么都没留下…
展开
-
easyUI中droppable,draggable用法列子修改
在项目中要用到拖动效果,之前写了一点不够完善,今天做了一点优化,在以前的基础上可以相互拖动了,改动的地方不大,但为了不影响之前的效果,我还是重新记录一下.HTML和我之前记录的文章一样,我就不重复了。。。以下是js:var targetFlag=false;//判断从框中拖出去是否拖到了另一个框 $('.items li').draggable({ prox原创 2017-05-04 14:50:17 · 516 阅读 · 0 评论 -
js mouseover,mouseout出现闪烁情况
$("#id").hover(function(){ var that=this; t=setInterval(function(){ $(that).toggleClass("on"); },1...原创 2018-07-26 09:19:24 · 3114 阅读 · 0 评论 -
利用vue的transition实现多种轮播效果
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>切换测试</title> <link rel="stylesheet" href="./vue原创 2018-07-26 09:38:01 · 3556 阅读 · 1 评论 -
vue声明一个新对象不被监听
vue的对象监听特别灵敏,比如一个对象A,我们想获取一个新的对象B(B和A相同,但不被监听)如果是普通的一级对象,可以使用Object.assign(B,A),但是这种方法只能保证最外层不被监听,但是里面还是被监听,对于多级就没用了。所以建议使用最直接的方法,通过对象》》字符串》》对象如: var B = JSON.parse(JSON.stringify(A));...原创 2018-09-16 17:46:03 · 2467 阅读 · 0 评论 -
iframe结束标签
iframe的坑,之前从来没有注意过,在页面上添加iframe的时候结束标签使用以下写法:<iframe src='' id='' frameborder='0' style='width:100%;height:100%'/>发现iframe之后的dom全都不见了,经检查发现原来iframe是一个封闭标签,结束时必须使用完整写法</iframe>,即:<...原创 2018-10-26 16:51:59 · 344 阅读 · 0 评论 -
vue v-if方法扩展写法
在使用vue的时候,经常会使用到v-if、v-else-if、v-else通过条件来判断具体显示某种信息,这种方法虽然可以实现,在整体代码看起太过低级,可用以下两种方式来替代:例1:<span v-if="YJLX=='1'">收件箱</span><span v-else-if="YJLX=='2'">发件箱</span><spa原创 2018-11-05 16:52:03 · 6253 阅读 · 0 评论 -
css实现动态正在加载图标
利用keyframes动画实现, .er-button-loading .er-button-style:before { content: "\f110"; font-family: "FontAwesome"; display: inline-block; z-index: 2; background: inherit; font-size: 1.4em; ...原创 2018-11-20 10:38:11 · 3351 阅读 · 0 评论 -
ios(safari)浏览器滑动卡顿,橡皮筋效果解决
滑动卡顿: html,body{ width:100%; height:100%; } *{ -webkit-overflow-scrolling: touch; }设置 -webkit-overflow-scrolling: touch;则可以解决大部分问题橡皮筋效果:...原创 2019-02-25 18:15:50 · 2744 阅读 · 0 评论 -
浏览器tab标签切换时触发事件
document.addEventListener('visibilitychange',function(){ //浏览器切换事件 if(document.visibilityState=='hidden') { //离开当前tab标签 console.log("离开当前tab标签"); }else {/////回到当前tab标签 console.log("回到当前tab...原创 2019-04-09 14:52:29 · 5396 阅读 · 0 评论 -
利用vue自定义指令directive实现拖动elementUI的dialog
<template> <el-dialog :visible.sync="testDialog" title="测试弹框拖拽" v-dialogDrag="{ x: transformX, y: transformY }" :close-on-click-modal="false" :append-to-body="true" :modal-append-to-...原创 2019-07-01 11:31:41 · 1626 阅读 · 0 评论 -
页面打开新窗口被拦截
1.采用间接a标签打开新页面的方式方法:function opennew(url) { var a = $("<a>", { href: url, id: "new_" + parseInt(Math.random() * 1000), target: "_blank" }).append("<span&g...原创 2018-07-09 10:31:20 · 1154 阅读 · 0 评论 -
input[type='number']中去掉右边上下箭头,并禁用滚动加减
设置css样式(去除右边箭头)/*去掉谷歌,火狐下的type="number"中的右边箭头*/input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{ -webkit-appearance: none !important;}input[type="number"]{-moz-appearance:te转载 2017-04-25 13:36:44 · 6600 阅读 · 1 评论 -
有关easyUI的拖动操作中droppable,draggable用法例子
这个demo展示的效果为:从上面可以拖动到下面相应的框中(原有的不能再拖动),拖动框中的东西到外面可以取消-----------以下为HTML品类工厂跟高跟型单价级联统计指标列指标-------------以下为js代码var tab = [];$('.items li').draggable({proxy: 'clone',revert转载 2017-04-26 18:38:17 · 2550 阅读 · 0 评论 -
图片懒加载
在一个项目中,如果同时加载的图片太多的话,会导致页面卡顿,这个时候就会用到懒加载。懒加载的实现原理是监听浏览器的滚动条事件,先加载出前面几张图片,然后当滚动条滚动的时候再依次加载剩余的图片。(先在图片那里设置属性data-img="";然后调用方法,在适当的时候把src设置为data-img的值)----------------------JS如下(HTML省略)//懒加载图片var转载 2017-04-27 17:39:38 · 872 阅读 · 0 评论 -
js,jquery获取各种屏幕的高度,宽度
关于js,jquery获取各种屏幕的高度宽度老是要记混,现在就在这里稍稍总结一下:Javascript:网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网页可见区域宽: document.body.offsetWidth (包括边线的宽)网页可见区域高: document.bo转载 2017-04-27 17:52:41 · 556 阅读 · 0 评论 -
vue实现图片滚动(类似走马灯效果)
上次写了一个简单的图片轮播,这个相当于在上面的一些改进。这个组件除了可以进行图片滚动外,也可以嵌入任何内容的标签进行滚动,里面用了slot进行封装。父: -----使用子组件传过来的值,封装slot原创 2017-06-07 14:47:31 · 37627 阅读 · 3 评论 -
有关html5的postMessage跨域发送消息
昨天在项目中遇到一个问题,需要在主页面把数据传递给iframe的页面,同时需要iframe在进行操作之后把数据传递给主页面,之前想的是用隐藏域的方法,但终究没有实现,后来发现用html5中的postMessage能够很好的实现这个功能,详解如下:主页面发送消息到iframe页面:(通过监听message来接受iframe发送过来的数据,通过postMessage来发送数据给iframe)原创 2017-06-22 09:17:34 · 719 阅读 · 0 评论 -
location的hash对象
location的hash对象,主要是设置或返回从井号 (#) 开始的 URL(锚),通过location.hash来调用,是一个可读可写的字符串例如当前地址的url是:http://write.blog.csdn.net/postedit?id=1&name=2#123_234_567那么location.hash="#123_234_567";另:location.sear原创 2017-06-22 09:56:05 · 377 阅读 · 0 评论 -
Vue在页面数据渲染完成之后调用
在使用Vue框架的时候,有时候需要在Vue在页面数据渲染完成之后调用方法,不然获取不到准确的数据,特别是在获取列表的高度的时候,由于数据没有加载完,获取不到准确的高度。之前在使用jquery的时候,有ready可以帮助我们实现,但是Vue不存在此类方法,我们需要结合watch和this.$nextTick()来实现。nextTick:在下次 DOM 更新循环结束之后执行延迟回调。watch:用于观...原创 2018-02-08 18:03:53 · 54211 阅读 · 6 评论 -
获取当前位置到窗口顶部的距离
var offset=$(obj).offset();/////获取某个位置到窗口顶部的距离,obj为当前dom千万不能用obj.offsetTop,obj.offsetLeft获取如果带有滚动条,则需要加上$(window).scrollTop(),$(window).scrollLeft()...原创 2018-03-08 18:07:01 · 4677 阅读 · 0 评论 -
js实现搜索字高亮
<script type="text/javascript">//<![CDATA[ //--------begin function fHl(o, flag, rndColor, url)------------------// function fHl(o, flag, rndColor, url){ /// <summary> ...转载 2018-03-30 14:34:52 · 2539 阅读 · 0 评论 -
css自适应布局
左侧固定,右侧自适应<!--flex和box是两种不同的自适应布局方式,功能类似,但写法不同,flex的兼容性更高 以下布局优先使用box布局(不兼容时使用flex)display:flex放在最后--><div class="all"> <div class="left"> aaa </div>...原创 2019-08-24 11:52:44 · 322 阅读 · 1 评论