没有更多推荐了，
加入CSDN，享受更精准的内容推荐，与500万程序员共同成长！html(网页)浮动窗口，如何制作html(网页)浮动窗口？_百度知道
html(网页)浮动窗口，如何制作html(网页)浮动窗口？
就是这个浮动窗口在页面上飘来飘去
我有更好的答案
制作方法：将下列代码输入html软件页面初始化效果：问题分析：HTML中的浮动窗口，可以使用CSS的定位方式完成，同时使用这种方式来完成这个功能也是一种较为简单的方式，只需要有HTML以及CSS的知识就可以完成了。举例如下：在以下示例中，将演示页面左右两侧分别放置一个高度为500像素，宽度为200像素的浮动窗口。示例中使用的定位方式为：固定定位（fixed），所有它们将永远的跟随页面进行滚动。超文本标记语言，标准通用标记语言下的一个应用。“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。超文本标记语言的结构包括“头”部分（英语：Head）、和“主体”部分（英语：Body），其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。
采纳率：75%
这个很简单呀！需要浮动的话，只需要在样式上的position设置fixed即可。比如：&div style=&position: z-index:1;&&&/div&这样写就浮动了，然后只需要用top、bottom、left、right来定位就行了如果需要飘来飘去的浮动，需要配合js来完成，js可以去牛图库上找，里面有很多插件，改下样式就可以使用了。
在哪里设置top、bottom、left、right？&&&如果不用CSS，如何设置div的位置？
你的截图不是已经标明了嘛，在第一排position的属性值设置fixed，在Clip里面不是有Top、Right、Bottom、Left四个值的设置。
本回答被网友采纳
浮动窗口可以很简单的弄个，就是一个div 样式&div style=& position: top:50%; left:50%; width:100 height:50 margin:-25px 0 0 -50
&&内容&/div&
父级元素设置： position:子集元素设置：position: 用left、right、top、bottom 来控制距离；position:
同理用left、right、top、bottom 来控制距离；
如何制作？
那要看具体情况来做了，没看见图，我怎么给你说啊
是啊，比如说你现在做的项目什么的，或者提供个设计图让我瞅瞅
就是有个小窗口在页面上飘来飘去
那个那个应该是叫层，然后是层和时间轴配合，记录移动轨迹，形成在页面上飘来飘去
如何制作？
自己查，层
1条折叠回答
其他2条回答
为您推荐：
其他类似问题
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。&nbsp>&nbsp
&nbsp>&nbsp
&nbsp>&nbsp
实现一个带浮动标签的输入框
摘要：现在带浮动标签的输入框也是一个很常见的东西了,在材料设计里面有一个TextInputLayout的控件,我们可以用它实现这个效果。但是材料设计控件的样式比较固定,并不能满足我们产品设计的脑洞。这里提供一个用属性动画实现的方法。还是先看看效果吧:大概的思路是这样的:控件有两层,一层是浮动的标签,一层是输入框。当点击控件后,标签同时执行一个横向和纵向的缩放动画,还有一个向上移动的动画,让输入框获取到焦点并弹出键盘。当输入框失去焦点时,判断是否有内容,如果没有则让标签执行一个复原的
现在带浮动标签的输入框也是一个很常见的东西了,在材料设计里面有一个TextInputLayout的控件,我们可以用它实现这个效果。但是材料设计控件的样式比较固定,并不能满足我们产品设计的脑洞。这里提供一个用属性动画实现的方法。
还是先看看效果吧:
大概的思路是这样的:
控件有两层,一层是浮动的标签,一层是输入框。
当点击控件后,标签同时执行一个横向和纵向的缩放动画,还有一个向上移动的动画,让输入框获取到焦点并弹出键盘。
当输入框失去焦点时,判断是否有内容,如果没有则让标签执行一个复原的动画。
下面看看控件的布局:
&?xml version=&1.0& encoding=&utf-8&?&
&FrameLayout xmlns:android=&http://schemas.android.com/apk/res/android&
android:id=&@+id/fl_content&
android:layout_width=&match_parent&
android:layout_height=&55dp&
android:background=&@color/white&
android:orientation=&vertical&
android:paddingLeft=&20dp&&
android:id=&@+id/et_content_name&
android:layout_width=&match_parent&
android:layout_height=&30dp&
android:layout_gravity=&center_vertical&
android:background=&@color/white&
android:textColor=&@color/black&
android:textCursorDrawable=&@null&
android:textSize=&14sp&
android:visibility=&gone& /&
android:id=&@+id/tv_content_hint&
android:layout_width=&match_parent&
android:layout_height=&wrap_content&
android:layout_gravity=&center_vertical&
android:text=&标题&
android:textColor=&@color/text_gray&
android:textSize=&14sp&
android:transformPivotX=&0dp&
android:transformPivotY=&-30dp& /&
&/FrameLayout&
由于EditText会默认获取到焦点,所以我先把它隐藏了。这里面值得注意的是transformPivotXY这个参数,等下会讲到。
然后我们创建标签向上缩放的方法,代码如下:
public void animationUp() {
ObjectAnimator scaleX = ObjectAnimator.ofFloat(tvHint, &scaleX&, 0.6f);
ObjectAnimator scaleY = ObjectAnimator.ofFloat(tvHint, &scaleY&, 0.6f);
AnimatorSet animatorSet = new AnimatorSet();
animatorSet.setDuration(100);
animatorSet.setInterpolator(new DecelerateInterpolator());
animatorSet.play(scaleX).with(scaleY); //两个动画同时开始
animatorSet.start();
animatorSet.addListener(new Animator.AnimatorListener() {
public void onAnimationStart(Animator animation) {
public void onAnimationEnd(Animator animation) {
etContent.setVisibility(View.VISIBLE);
etContent.requestFocus();
//弹出键盘
InputMethodManager imm = (InputMethodManager) getContext().getSystemService(Context.INPUT_METHOD_SERVICE);
imm.showSoftInput(etContent, 0);
public void onAnimationCancel(Animator animation) {
public void onAnimationRepeat(Animator animation) {
代码不难理解,就是同时执行了横向和纵向的缩放动画,让标签缩小到60%。动画执行完后显示EditText,让它获取到焦点并弹出键盘。如果animatorSet.setInterpolator(new DecelerateInterpolator());这句不懂的话,看看下面这张图就明白了:
Interpolator.png
到这里,你可能还有的一个疑问就是,向上移动的动画呢?缩放动画是根据控件的基准坐标来进行缩放的。也就是说,当我们把基准坐标设在控件上方时,缩放的时候也会有一个移动的效果。所以在布局里面用
android:transformPivotX=&0dp&
android:transformPivotY=&-30dp&
将标签的基准点设为(0dp, -30dp),这样我们就省去了移动动画。
至于复原的动画,就更简单了:
public void animationDown() {
etContent.setVisibility(View.GONE);
ObjectAnimator scaleX = ObjectAnimator.ofFloat(tvHint, &scaleX&, 1);
ObjectAnimator scaleY = ObjectAnimator.ofFloat(tvHint, &scaleY&, 1);
AnimatorSet animatorSet = new AnimatorSet();
animatorSet.setDuration(100);
animatorSet.setInterpolator(new DecelerateInterpolator());
animatorSet.play(scaleX).with(scaleY); //两个动画同时开始
animatorSet.start();
为了实现失去焦点,标签复原,我们需要监听输入框是否有焦点:
etContent.setOnFocusChangeListener(new OnFocusChangeListener() {
public void onFocusChange(View view, boolean b) {
if (!b &;&; TextUtils.isEmpty(etContent.getText())) {
animationDown();
这样就已经完成了一个带浮动标签的输入框,妥妥的。
虽然实现一个这样的控件不难,但我个人还是希望可以使用原生控件的,希望移动端的设计能多去了解一下材料设计吧。(T_T)
以上是的内容，更多
的内容，请您使用右上方搜索功能获取相关信息。
若你要投稿、删除文章请联系邮箱：zixun-group@service.aliyun.com,工作人员会在五个工作日内给你回复。
云服务器 ECS
可弹性伸缩、安全稳定、简单易用
&40.8元/月起
预测未发生的攻击
&24元/月起
邮箱低至5折
推荐购买再奖现金，最高25%
&200元/3月起
你可能还喜欢
你可能感兴趣
阿里云教程中心为您免费提供
实现一个带浮动标签的输入框相关信息，包括
的信息，所有实现一个带浮动标签的输入框相关内容均不代表阿里云的意见！投稿删除文章请联系邮箱：zixun-group@service.aliyun.com，工作人员会在五个工作日内答复
售前咨询热线
支持与服务
资源和社区
关注阿里云
International浮动窗口模块Frame
再次封装相关浮动窗口的基础操作
如果不存在则会先创建然后再打开，如果存在则直接打开,就会在页面中查找id的元素，把id元素的宽高指定为浮动窗口的宽高，把id元素的font-size设置为id元素的font-size
再次封装 &appcan.window.openPopover&)常用参数（简化版）
id:要打开浮动窗口的名称
url:浮动窗口要加载的页面的地址,如果url是一个数组则打开多页面浮动窗口
left:浮动窗口距离左边的距离
top:浮动窗口距离上边的距离
name:强制改变打开窗口的名称
index:设置选中的多页面窗口的默认索引
change:如果多页面浮动窗口改变时会触发该回调，该回调有以下两个参数：err:正确返回情况下为null,错误时为Error信息.res:返回当前选择的浮动窗口页面的数据，
json格式如下：
{&multiPopName&:&name&,&multiPopSelectedIndex&:&index&} 各字段含义如下
multiPopName
多页面浮动窗口的名字
multiPopSelectedIndex
子页面窗口索引
extraInfo:扩展参数，json格式如下： {&extraInfo&:{&opaque&:&true&,&bgColor&:&#011&,&delayTime&:&250&}}
参数还可以以对象的形式传参:
id:'',
url:'',
left:'',
top:'',
name:'',
index:'',
change:''
，打开多浮动页面之间可滑动切换，设置是否支持滑动参照
//弹出一个简单的demo浮动窗口,并打开appcan.cn
appcan.frame.open({
id:'content',
url:'http://appcan.cn',
//打开多页面浮动窗口
var top = $('#header').offset().
appcan.frame.open({
id : &content&,
&inPageName& : &LV0&,
&inUrl& : &lv_thinline_content.html&,
&inPageName& : &LV1&,
&inUrl& : &lv_thinline_angle_content.html&,
&inPageName& : &LV2&,
&inUrl& : &lv_thinline_sub_angle_content.html&,
top : top,
index : appcan.locStorage.getVal(&lv_index&),
change : function(err, res) {
//另外一种使用方式
var frame = appcan.require('frame');
frame.open({
id:'content',
url:'http://appcan.cn',
//打开多页面浮动窗口
frame.open({
id:'content',
url:['http://appcan.cn','http://3g2win.com'],
appcan.frame.close(name) //关闭指定的浮动窗口
name:浮动窗口的名字
参数还可以以对象的形式传参：
name:''
//关闭demo浮动窗口
appcan.frame.close('demo');
//另外一种使用方式
var frame = appcan.require('frame');
frame.close('demo');
appcan.frame.resize(id,left,top,name) //设置指定的浮动窗口恢复到指定窗口的大小，并设置浮动窗口的位置
id:指定的元素，根据该元素设置浮动窗口的大小
left:浮动窗口距离左边界的距离
top:浮动窗口距离上边界的距离
name:要设置的浮动窗口的名称，如果id没有传值的话使用这个值
参数还可以以对象的形式传参：
id:'',
left:'',
top:'',
name:''
//重置demo窗口,位置
appcan.frame.resize({
id:'container',
//另外一种使用方式
var frame = appcan.require('frame');
frame.resize({
id:'container',
appcan.frame.resizePopoverByEle(id,left,top,name) //设置指定的浮动窗口恢复到指定窗口的大小，并设置浮动窗口的位置
id:指定的元素，根据该元素设置浮动窗口的大小
left:浮动窗口距离左边界的距离
top:浮动窗口距离上边界的距离
name:要设置的浮动窗口的名称，如果id没有传值的话使用这个值
参数还可以以对象的形式传参：
id:'',
left:'',
top:'',
name:''
//重置demo窗口,位置
appcan.frame.resizePopoverByEle({
id:'container',
//另外一种使用方式
var win = appcan.require('frame');
win.resizePopoverByEle({
id:'container',
appcan.frame.bringToFront(name) //把指定的浮动窗口设置为最上层
name:要设置的弹出层的名称
参数还可以以对象的形式传参：
name:''
//把demo窗口显示到所有窗口最上面
appcan.frame.bringToFront('demo');
//另外一种使用方式
var frame = appcan.require('frame');
frame.bringToFront('demo');
appcan.frame.evaluateScript(name,popName,scriptContent) //在指定的浮动窗口内执行响应的脚本
name:要执行脚本的窗口名称
popName:要执行的浮动窗口的名称
scriptContent:要执行的脚本内容
参数还可以以对象的形式传参：
name:'',
popName:'',
scriptContent:''
//在demo窗口的浮动窗口执行脚本
appcan.frame.evaluateScript({
name:'demo',
popName:'demoPop',
scriptContent:'alert(&hello world&)'
//另外一种使用方式
var frame = appcan.require('frame');
frame.evaluateScript({
name:'demo',
popName:'demoPop',
scriptContent:'alert(&hello world&)'
appcan.frame.openMulti(popName,content,dataType,left,top,width,height,fontSize,flag,indexSelected) //浮动窗口中页面切换
打开多页面浮动窗口，页面之间可滑动切换，设置是否支持滑动参照
popName:打开新窗口的名称
content:要传入的数据，一个json对象，或者json字符串，结构必须为{'content':[{&inPageName&:&p1&, &inUrl&:&xxx1.html&,&inData&:&&}]} 其中：inPageName:所包含的单页面窗口的名字，inUrl：url类型数据，inData：窗口的内容的二进制数据，可为空
dataType:窗口载入的数据的类型，0：url方式载入；1：html内容 方式载入；（//必如传入的是一个&div&&/div&）2：既有url方式，又有html内容方式
left:距离左边界的距离
top:距离上边界的距离
width:窗口的宽
height:窗口的高
fontSize:字体的大小
flag:窗口类型
0: 普通窗口
1: OAuth 窗口
2: 加密页面窗口
4: 强制刷新
8: url用系统浏览器打开
16: view不透明
32: 隐藏的winwdow
64: 等待popOver加载完毕后显示
128: 支持手势
256: 标记opn的window上一个window不隐藏
512: 标记open的浮动窗口用于打开wabapp
indexSelected:默认显示的索引项，默认显示第一项
参数还可以以对象的形式传参：
popName:'',
content:'',
dataType:'',
left:'',
top:'',
width:'',
height:'',
fontSize:'',
flag:'',
indexSelected:''
//打开一个四个窗口的浮动窗口
appcan.frame.openMulti({
popName:'nav',
content:[{
inPageName:'p1',
inUrl:'http://www.appcan.cn',
inData:''
inPageName:'p2',
inUrl:'http://www.appcan.cn',
inData:''
inPageName:'p3',
inUrl:'http://www.appcan.cn',
inData:''
inPageName:'p4',
inUrl:'http://www.appcan.cn',
inData:''
height:500,
dataType:0,
indexSelected:2
//另外一种使用方式
var frame = appcan.require('frame');
frame.openMulti({
popName:'nav',
content:[{
inPageName:'p1',
inUrl:'http://www.appcan.cn',
inData:''
inPageName:'p2',
inUrl:'http://www.appcan.cn',
inData:''
inPageName:'p3',
inUrl:'http://www.appcan.cn',
inData:''
inPageName:'p4',
inUrl:'http://www.appcan.cn',
inData:''
height:500,
dataType:0,
indexSelected:2
appcan.frame.closeMulti(popName) //关闭多页面浮动窗口
popName:多页面窗口的名称
参数还可以以对象的形式传参：
popName:''
//关闭指定的多页面浮动窗口
appcan.frame.closeMulti('nav');
//另外一种使用方式
var frame = appcan.require('frame');
frame.closeMulti('nav');
appcan.frame.selectMulti(popName,index) //设置多页面浮动窗口跳转到的子页面窗口的索引
popName:要设置的多页面浮动窗口的名称
index:要设置的多页面浮动窗口页面的索引
参数还可以以对象的形式传参：
popName:'',
index:''
//选择第三个页面
appcan.frame.selectMulti('nav',2);
//另外一种使用方式
var frame = appcan.require('frame');
frame.selectMulti('nav',2);
appcan.frame.sendToBack(name) //把指定的浮动窗口设置到最下层
name:要设置的浮动窗口名称
参数还可以以对象的形式传参：
name:''
//把a窗口放到最下成
appcan.frame.sendToBack('a')
//另外一种使用方式
var frame = appcan.require('frame');
frame.sendToBack('a')
appcan.frame.setBounce(bounceType,startPullCall,downEndCall,upEndCall,color,imgSettings) //设置上下弹动效果
bounceType:弹动的类型,如果为多个请用数组
0: 是向下拖动
1: 是向上拖动
startPullCall:开始滑动时触发回调
downEndCall:上拉或者下拉超过边界执行回调
upEndCall:上拉或者下拉，超过边界之后，恢复最初状态执行回调
color:如果超过了该边界显示的背景颜色
imgSettings:如果超过了该边界，并且想要设置显示的内容包括图片文字则设置该参数
关于imgSettings的设定的实例:
&imagePath&:&res://reload.png&,
&textColor&:&#530606&,
&pullToReloadText&:&拖动刷新&,
&releaseToReloadText&:&释放刷新&,
&loadingText&:&加载中，请稍等&
参数还可以以对象的形式传参：
bounceType:'',
startPullCall:function(){
//do somethings
downEndCall:function(){
//do somethings
upEndCall:function(){
//do somethings
color:'',
imgSettings:{}
//给页面添加一个简单的弹动效果
appcan.frame.setBounce({
bounceType:'1',
color:'#F00',
upEndCall:function(type){
//另一种使用方式
var frame = appcan.require('frame');
frame.setBounce({
bounceType:'1',
color:'#F00',
upEndCall:function(type){
还需要帮助吗?静态文本框上浮动一个工具条怎么实现
[问题点数：30分，结帖人snail127]
静态文本框上浮动一个工具条怎么实现
[问题点数：30分，结帖人snail127]
不显示删除回复
显示所有回复
显示星级回复
显示得分回复
只显示楼主
匿名用户不能发表回复！|}