51dev.com IT技术开发者社区

51dev.com 技术开发者社区

效果

禁止文本(文字)选中效果

禁止文本(文字)选中效果

//js方法一<script>window.onload=function(){  if(document.all){    document.onselectstart=function(){returnfalse;};//forie  }  else{    document.onmousedown=f...

ionic3解决多个ion-content push pop动画效果问题(含有侧边栏)

ionic3解决多个ion-content push pop动画效果问题(含有侧边栏)

//都是在原有基础上添加下面import{ViewController}from'ionic-angular';constructor(privateviewCtrl:ViewController){  this.patchViewControllerContent(this.viewCtrl);}patchViewC...

checkbox多选、全选js效果

checkbox多选、全选js效果

//全选checkboxfunctionallCheck(){//全选inputvarall=$("input[name='all']");//全部的inputtype="checkbox"varchecboxs=$(".ys_manage_tbodyinput[name='checkbox']");//选中的inpu...

jQuery中的事件和动画    以及视频展示效果实例

jQuery中的事件和动画 以及视频展示效果实例

经过这几天学习jQuery中的事件和动画,对jQuery更深的认识,接下来先把视频展示效果的代码贴出来,最后把我在学习jQuery事件和动画之后总结的思维导图 <!doctypehtml><html><head><metacharset="utf-8"><...

Web 开发中很实用的10个效果【附源码下载】

Web 开发中很实用的10个效果【附源码下载】

在工作中,我们可能会用到各种交互效果。而这些效果在平常翻看文章的时候碰到很多,但是一时半会又想不起来在哪,所以养成知识整理的习惯是很有必要的。这篇文章给大家推荐10个在Web开发中很有用的效果,记得收藏!超炫的页面切换动画效果  今天我们想与大家分享一组创意的页面切换熊效果集合。我们已经在示例中罗列了一组动画,可以被应...

JS倒计时效果

JS倒计时效果

[html]<divid="time"></div><script>varpad=function(num){returnnum<10?"0"+num:num;};varfresh=function(){varnowtime=newDat...

CSS3 页面跳转的动画效果

CSS3 页面跳转的动画效果

从左侧弹出:varwindowWidth=window.innerWidth;$(atlas_list).css({"transition":"none","-webkit-transition":"none","transform":"translate3d("+(windowWidth)+"px,0,0)"});w...

css自定义三角形效果

css自定义三角形效果

废话不说了,直接上代码element{width:0px;height:0px;border-left:10px;border-right:10px;border-bottom:10px;border-color:#aaa;}显示为一个宽20,高10向上的三角形.注意:定义border重叠的地方才会显示。...

Flutter实现抽屉动画效果

Flutter实现抽屉动画效果

这篇会深化View拖拽实例,利用FlutterAnimation、插值器以及AnimatedBuilder教大家实现带动画的抽屉效果。通过构思,我们可以设想到实现抽屉的方式就是用Stack控件将两个Widget叠加显示,用GestureDetector监听手势滑动,动态移动顶层的Widget,当监听到手势结束的时候根据...

网站footer沉底效果的三种解决方案

网站footer沉底效果的三种解决方案

很多网站设计一般是两个部分,content+footer,content里面装的是网站主体内容,footer里面展示网站的注册信息等等,因为网站内容高度不定的原因,会出现下面两种情况: 1.内容较少时,这个footer固定在在页面的底部。如下所示:2.内容较长时,footer跟在内容后面滑动,大致表现如下图红...

多种方式实现吸顶效果

多种方式实现吸顶效果

js 无敌大法好。兼容极佳,但是体验上就比较感人了。这里不过多介绍。 fixed是基于浏览器的定位,在组件中显的不是很适用。而且在iOS也有兼容性问题。 sticky是新加的position的值,可以用于实现粘性定位。但是显示上会抖动,demo2 demo3,组件接收一个&nbs...

Js实现动态轮播图效果

Js实现动态轮播图效果

功能描述:1.鼠标经过左右侧箭头显示,鼠标离开箭头隐藏2.动态添加底部小圆圈并绑定单击事件,并且让小圆圈的点击事件和左右箭头点击事件同步3.拷贝第一张图片添加到ul最后可以实现动态添加图片4.给箭头绑定单击事件,并且使图片可以无缝轮播5.实现自动轮播(动画函数) 具体实现代码:1.鼠标移入左右侧箭头显示,鼠标...

CSS :placeholder-shown伪类实现输入框浮动文字效果

CSS :placeholder-shown伪类实现输入框浮动文字效果

在这篇文章中,我们将使用:placeholder-shown伪类创建一个浮动的问题标签效果,使用纯css实现。当我们处理输入框时,会想方设法提供给用户更好的体验。有两个标签属性是我们经常会用到的:label标签是关联表单元素,提供说明信息最适合的元素。输入框的placeholder属性允许您指定没有输入内容时出现在&l...

css实现开关效果

css实现开关效果

首先是构思我们使用<inputtype="checkbox">标签来实现这个效果。checkbox的选中、未选中的特性,刚好对应开关的打开、关闭on:打开off:关闭<labelfor="ck2"><inputtype="checkbox"id="ck2"><span>未...

CSS :placeholder-shown伪类实现Material Design占位符交互效果

CSS :placeholder-shown伪类实现Material Design占位符交互效果

一、MaterialDesign规范中占位符交互效果MaterialDesign风格占位符交互效果官方示意见此demo页面。现在这种设计在移动端很常见,相信不少人设计项目中有实现过这种交互,而且,大部分是利用js实现的。(ps:weex不支持这个样式)实际上,我们可以借助css :placeholder-sh...