类似边框栏弹出

一个类似边框弹出的小效果

<div id="box"></div>
<style>
        #box{
            width: 300px;
            height: 200px;
            background-color: skyblue;
            position: absolute;
            left: -250px;
            top: 0;
            cursor: pointer;
        }
    </style>
<script>
            window.onload=function(){
                var box=document.getElementById("box");
                var box_left=-250;
                var times;
                var back_times;
                box.onmouseover=function(){
                    clearInterval(back_times);
                    clearInterval(times);
                    times=setInterval(function(){
                        box_left+=10;
                    box.style.left=box_left+‘px‘;
                    if(box_left>=0){
                        clearInterval(times);
                    }
                    },10)
                }
                box.onmouseout=function(){
                    clearInterval(times)
                    clearInterval(back_times);
                    back_times=setInterval(function(){
                        box_left-=10;
                        box.style.left=box_left+‘px‘;
                        if(box_left<=-250){
                            clearInterval(back_times);
                        }
                    },10)
                }
            }
    </script>
时间: 2024-10-12 15:32:57

类似边框栏弹出的相关文章

前端页面--天猫右侧信息栏弹出效果实现

       今天记录的是现在很常见的一个页面效果,那就是类似天猫界面右侧购物车的信息展示的效果,下面这个黑色的就是今天的主角--animation      这个是我毕设里面实现的效果         虽然没有真正天猫上面的好看(╯‵□′)╯︵┴─┴,但是毕竟我这个没有审美的程序猿已经尽力了--.那么我们就来一步步的介绍这个效果的实现过程吧~         首先,我们先分析一下,都需要实现什么功能,第一,在刚进入页面的时候是不显示的,当我们滑动滚动条的时候才会出现右侧的信息栏,而当我们返回页

JS实现边栏弹出动画

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JS实现边栏弹出动画</title> <style type="text/css"> *{margin:0;padding:0;} #box{width:200px;height:200px;background-color:

JS学习笔记(一): 使用原生JS 实现导航栏下多级分类弹出效果

在给静态页面静添加交互效果时遇到的问题 : 鼠标划入二级菜单时 一级菜单样 ":hover" 式无法保持 情景如下: 解决思路: 利用二级菜单的onmouseover/out事件 重新构建一级菜单 ".hover" 样式类 代码如下: CSS部分: 在原来的目标:hover样式中 增加 .hover状态 li.app_jd a:hover,li.app_jd a.hover{ background-position: -126px -397px; } li.serv

模拟layui弹出层

以前觉得自己手写一个类似layui的弹出层是挺遥远的事,因为完全没有头绪,即便在layui官网知道layui使用的都是C3动画 之前试过控制width:0;height:0来做动画,结果惨不忍睹,直到几天前灵机一动联想到了tranform的scale属性,才稍微触及到了皮毛 为了不添加格外的HTML结构,所以弹出层也是动态生成 layui弹出框和遮罩层是同级结构,而我把弹出框放遮罩层里了,所以关闭时要用animationend来监听,弹出框做完动画后才删除遮罩层 确认框confirm之前也想跟原

下载弹出框

1 package com.lc.util; 2 3 import java.io.File; 4 import java.io.FileInputStream; 5 import java.io.InputStream; 6 import java.io.OutputStream; 7 import javax.servlet.http.HttpServletResponse; 8 import org.apache.struts2.ServletActionContext; 9 10 pub

基于jQuery右侧弹出侧边导航栏代码

基于jQuery右侧弹出侧边导航栏代码.这是一款点击按钮弹出侧边导航栏样式特效代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="box-bj"><img src="images/wd011.jpg" /></div> <div id="mintbar"><a id="closebtn" href="#"&g

Android点击列表后弹出输入框,所点击项自动滚动到输入框上方(类似微信的评论)

Android点击列表后弹出输入框,所点击项自动滚动到输入框上方 使用微信的朋友圈会发现,点击某一条评论后输入框会弹出来,然后所点击的那一项会自动地滚动到输入框上方的位置,这样如果开始所点击的评论在屏幕很下方的话,就不会被输入框遮住,虽然微信这一点在我的MX2频繁点几次后滚动的位置就完全错误了,但据说在有些机型上效果还不错,还有其他地方可能会有类似的需求,比如登录时软键盘可能会把登录按钮遮住. 要实现这个功能需要注意的地方主要有两点: 什么时候进行滚动操作,以及有可能还需要在输入框消失时回滚回去

【转】swift实现ios类似微信输入框跟随键盘弹出的效果

swift实现ios类似微信输入框跟随键盘弹出的效果 为什么要做这个效果 在聊天app,例如微信中,你会注意到一个效果,就是在你点击输入框时输入框会跟随键盘一起向上弹出,当你点击其他地方时,输入框又会跟随键盘一起向下收回,二者完全无缝连接,那么这是怎么实现的呢,也许你会说直接在键盘弹出的时候把输入框也向上移动不就行了?但是我使用这种方法的时候,发现效果十分不理想,会有明显的滞后现象,原因有以下几点: 键盘弹出动画并不是匀速,键盘和输入框的时间曲线不完全一致,运动不同步 各种键盘的高度不一样(比如

Android封装类似微信的顶部TitleBar弹出的PopupWindow代码

Android仿微信顶部titlebar,点击加号弹出的PopupWindow,是封装好的PopupWindow,直接拿来用即可,先看效果图:  调用代码非常简单,这是MainActivity的代码: public class MainActivity extends AppCompatActivity { private TitlePopup titlePopup; @Override protected void onCreate(Bundle savedInstanceState) { s