20171019

1.鼠标事件

onmouseover/onmouseout
onmouseenter/onmouseleave
其中onmouseover子元素会触发父元素的事件;
而onmouserenter不会;

2.利用鼠标事件实现元素的拖动

eg:
<style>
        #box{
            width: 100px;
            height: 100px;
            background: pink;
            position: absolute;
        }
    </style>
<div id="box"></div>
<script>
    var box = document.getElementById("box");
    document.onmousedown =function (ev) {
        var e = ev || event;
        var downx = e.clientX;
        var downy = e.clientY;
        var posx = box.offsetLeft;
        var posy = box.offsetTop;
        var leftx = downx - posx;//为了求蓝色的值
        var topy = downy - posy;
        document.onmousemove = function (ev) {
            var e = ev || event;
            var downx = e.clientX;
            var downy = e.clientY;
            box.style.left = (downx - leftx)+"px";
            box.style.top = (downy - topy)+"px";
        };
        document.onmouseup = function () {
            document.onmousemove = null;
        }
    }
</script>

image.png

3.键盘事件

利用键盘事件实现输入框一些功能案例
eg:
<input id="name" type="text" value="请输入用户名"><span id="txt"></span>
<script>
    var Name = document.getElementById("name");
    var txt = document.getElementById("txt");
    Name.onfocus = function () {
        Name.value = "";
        txt.innerHTML = "";
    };
    Name.onblur = function () {
        if(Name.value.length <5){
            txt.innerHTML = "输入的用户名过短"
        }
        Name.value = "请输入用户名";
    };
    Name.onkeydown = function (ev) {
        var e = ev||event;
//双键操作 e.keyCode == 38 && e.ctrlkey ==true(其中altr和shift键类似)
        if( e.keyCode == 13 &&e.ctrlKey && Name.value.length>3){
            var ptage = document.createElement("p");
            ptage.innerHTML = Name.value;
            document.body.appendChild(ptage);
            Name.value = "";
        }
    }
</script>

4.鼠标滚动实现元素类似fixed定位效果

eg:
<style>
        body{
            height: 2000px;
        }
        #box{
            width: 100px;
            height: 100px;
            background: pink;
            position: absolute;
            left: 20px;
            top: 0;
        }
    </style>
<div id="box"></div>
<script>
    var timer =null;
    var box = document.getElementById("box");
    function move(obj,target) {
        clearInterval(timer);
        timer = setInterval(function () {
            var speed = (target-obj.offsetTop)/8;
            //当speed到最后有可能不能正好到达目标值,就是说下边的if判断的条件无法实现
            //所以对speed进行处理,如下:
            if(speed>0){
                speed = Math.ceil(speed);
            }else {
                speed = Math.floor(speed);
            }
            obj.style.top = (obj.offsetTop + speed) +"px";
            if( obj.offsetTop == target ){
                clearInterval(timer);
            }
        },30)
    }
    document.onscroll = function () {
        var top = document.documentElement.scrollTop || document.body.scrollTop;
        move(box,top)
    }
</script>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏HTML5学堂

让剁手党洞察物体细节,“放大镜”当之无愧

经常浏览淘宝、京东等一些商城网站,都会看到各种各样的页面交互效果,放大镜交互效果在商城网站中算是比较常见的。作为程序员的我们也会经常去考虑放大镜效果的实现方式,...

4338
来自专栏Objective-C

iOS-UINavigationBar 设置背景颜色及标题

3574
来自专栏前端知识分享

第43天:事件对象event

一、事件对象 事件:onmouseover、 onmouseout、 onclick event //事件的对象

1051
来自专栏九彩拼盘的叨叨叨

滑动到底部无限加载的实现

我们常常会碰到数据条数很多,需要分页显示的情况。对于移动端页面,我们一般会用每次滚动到接近页面底部时,加载更多(下一页)数据的方式。本文就来介绍下滑动到底部无限...

1012
来自专栏梦魇小栈

使用 JavaScript 实现简单的拖拽

首先,对拖拽的元素绑定 mousedown 时间,使其触发对应的函数,获取元素与鼠标的位置。在 document 对象上绑定 mousemove 和 mouse...

1214
来自专栏james大数据架构

简单的jquery拖曵原理js特效实例

<!DOCTYPE html> <html> <title>简单拖曵原理实例</title> <script language="javascript" src...

2477
来自专栏進无尽的文章

UI篇-CATextLayer和 富文本的交融

CATextLayer适用于IOS或者MAC,比UIlablel 和 NSTextView 能做的事很多,可以这样说UIlablel是通过CATextLayer...

2601
来自专栏梧雨北辰的开发录

iOS导航栏使用总结

2632
来自专栏Alice

绘图quartz之阴影

    //设置矩形的阴影  并在后边加一个圆 不带阴影  步骤: CGContextRef context = UIGraphicsGetCurre...

1855
来自专栏青玉伏案

IOS开发之绝对布局和相对布局(屏幕适配)

之前如果做过Web前端页面的小伙伴们,看到绝对定位和相对定位并不陌生,并且使用起来也挺方便。在IOS的UI设计中也有绝对定位和相对定位,和我们的web前端的绝对...

2996

扫码关注云+社区

领取腾讯云代金券