JS案例-JS特效第三天

从今天起开始笔记以天来计算，今天是学习JS特效第三天，以天来记录也比较整齐。

这几个案例都是环环相扣，前面的不会，后面的就不用说啦。前面一通，后面你懂得。

第一个案例：淘宝楼层跳跃

楼层跳跃京东和淘宝都是有的。后来京东首页取消啦。

效果展示：

Gif_20181207_233243.gif

重点是要理解为什么要这样做。
源代码：

    
    
    


    

        
鞋子区域
        
袜子区域
        
裤子区域
        
裙子区域
        
帽子区域
    
    

        
鞋子
        
袜子
        
裤子
        
裙子
        
帽子
    

    

第二个案例:元素跟随鼠标

效果秀

鼠标跟随

• 知识点：
  DOM上的某个事件触发时，JS机制会产生一个事件对象event。
  这个对象中包含着所有与事件有关的信息。
  所有浏览器都支持event对象，但支持的方式不同。

ie 678 支持 window.event 但不支持形参。
其它浏览器window.event和形参都支持，看下面代码：

生成的mouseEvent,本身也是个对象，可以调用上面的属性

先把这三个属性搞清楚
event.pageY 鼠标到这个网页最顶部的距离
event.scrollY 鼠标到这个屏幕最顶部的距离
event.clientY 鼠标到这个浏览器可视区域最顶部的距离(一般就是书签栏下面)

不知道你们能不能看懂

源代码：

第三个案例

效果秀

获取鼠标在盒子里的位置

获取方法就是鼠标到页面的距离-这个div到页面的距离。

源代码：

第四个案例 产品放大镜

难点 比例问题

需要知道以下技术点：

onmousedown 鼠标按下
onmouseup 鼠标弹起

效果秀：

是不是很熟悉

源码：

第五个案例 可以拖拽的盒子

效果图：

Gif_20181207_233157.gif

知识点：

//禁止文本选中（选中后取消）
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
还有两个新事件：
onmousedown 鼠标按下
onmouseup 鼠标松开
源码：

    
    
    

    
    




    

        注册信息
    

    

        

            注册信息 (可以拖拽)
            【关闭】
        
        

    

第六个案例 自己制作滚动条

我做的很丑，你可以搞得漂亮一点。
效果图：

Gif_20181207_233125.gif

源码：

    
    
    

    
    



    

        

            孩儿励志出湘关，学不成名终不还。

            埋骨何须桑梓地，人生无处不青山。

            孩儿励志出湘关，学不成名终不还。

            埋骨何须桑梓地，人生无处不青山。

            孩儿励志出湘关，学不成名终不还。

            埋骨何须桑梓地，人生无处不青山。

            孩儿励志出湘关，学不成名终不还。

            埋骨何须桑梓地，人生无处不青山。

            孩儿励志出湘关，学不成名终不还。

            埋骨何须桑梓地，人生无处不青山。

            孩儿励志出湘关，学不成名终不还。

            埋骨何须桑梓地，人生无处不青山。

            孩儿励志出湘关，学不成名终不还。

            埋骨何须桑梓地，人生无处不青山。

            孩儿励志出湘关，学不成名终不还。

            埋骨何须桑梓地，人生无处不青山。

            孩儿励志出湘关，学不成名终不还。

            埋骨何须桑梓地，人生无处不青山。

            孩儿励志出湘关，学不成名终不还。

            埋骨何须桑梓地，人生无处不青山。

            孩儿励志出湘关，学不成名终不还。

            埋骨何须桑梓地，人生无处不青山。

            孩儿励志出湘关，学不成名终不还。

            埋骨何须桑梓地，人生无处不青山。

            孩儿励志出湘关，学不成名终不还。

            埋骨何须桑梓地，人生无处不青山。

            孩儿励志出湘关，学不成名终不还。

            埋骨何须桑梓地，人生无处不青山。

            孩儿励志出湘关，学不成名终不还。

            埋骨何须桑梓地，人生无处不青山。

            孩儿励志出湘关，学不成名终不还。

            埋骨何须桑梓地，人生无处不青山。

            孩儿励志出湘关，学不成名终不还。

            埋骨何须桑梓地，人生无处不青山。

            孩儿励志出湘关，学不成名终不还。

            埋骨何须桑梓地，人生无处不青山。

            孩儿励志出湘关，学不成名终不还。

            埋骨何须桑梓地，人生无处不青山。

            孩儿励志出湘关，学不成名终不还。

            埋骨何须桑梓地，人生无处不青山。

            孩儿励志出湘关，学不成名终不还。

            埋骨何须桑梓地，人生无处不青山。

            孩儿励志出湘关，学不成名终不还。

            埋骨何须桑梓地，人生无处不青山。

            孩儿励志出湘关，学不成名终不还。

            埋骨何须桑梓地，人生无处不青山。

            孩儿励志出湘关，学不成名终不还。

            埋骨何须桑梓地，人生无处不青山。

            孩儿励志出湘关，学不成名终不还。

            埋骨何须桑梓地，人生无处不青山。

            孩儿励志出湘关，学不成名终不还。

            埋骨何须桑梓地，人生无处不青山。

            孩儿励志出湘关，学不成名终不还。

            埋骨何须桑梓地，人生无处不青山。

            孩儿励志出湘关，学不成名终不还。

            埋骨何须桑梓地，人生无处不青山。

            孩儿励志出湘关，学不成名终不还。

            埋骨何须桑梓地，人生无处不青山。

            孩儿励志出湘关，学不成名终不还。

            埋骨何须桑梓地，人生无处不青山。

            孩儿励志出湘关，学不成名终不还。

            埋骨何须桑梓地，人生无处不青山。

            孩儿励志出湘关，学不成名终不还。

            埋骨何须桑梓地，人生无处不青山。

            孩儿励志出湘关，学不成名终不还。

            埋骨何须桑梓地，人生无处不青山。

            孩儿励志出湘关，学不成名终不还。

            埋骨何须桑梓地，人生无处不青山。

            孩儿励志出湘关，学不成名终不还。

            埋骨何须桑梓地，人生无处不青山。

            -------------结束------------

        
        

            

        
    

image.png