<!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>practice</title>
     <style type="text/css">
         *{margin:0px;padding:0px;}
         #div1 {position:relative;left:-200px;width:200px;height:200px;margin-top:50px;background-color: pink;}
         #share{background-color:lightblue;width:20px;height:50px;position: absolute;left:200px;top:75px;}
     </style>
     <script type="text/javascript">
         window.onload=function(){
             var div1=document.getElementById("div1");
             div1.onmouseover=startMove;
             /*不加括号,就是正常的,鼠标滑过,开始移动,表示鼠标滑过,调用这个函数*/
             /*div1.onmouseover=startMove();*/
             /*加了括号之后,一打开就开始移动,表示,把函数执行的结果给div1的鼠标滑过事件,所以会去先执行函数,
             因为函数执行的结果就是offsetLeft==0,然后把这个结果给div1的鼠标滑过事件,所以会出现一打开就跑,
             这是为了得到函数执行的结果*/
             div1.onmouseout=startMove1;
         };
         var timer=['1'];
         /*必须要在外面定义,放在函数里面定义就失败了;
         含义：timer函数外定义,在两个函数内同时调用,意为,当startMove1调用时,清除startMove的timer,反之亦如此;
         这样就不会同时运行两个timer,一个函数执行timer前,先清除另一个timer,这样往前停止，再调用timer往后,
         否则同时运行会出错；*/
         function startMove(){
             /*alert(timer.length);*/
             clearInterval(timer);
             timer=setInterval(
                             function(){
                                 if(div1.offsetLeft==0){clearInterval(timer)}//判断要计算,所以不能带'px',用offsetLeft
                                     else {/*alert(div1.style.left);*/
                                     //offsetLeft显示无'px',style.left显示有'px'
                 /*疑问：alert里面这样用,第一次显示不出left值,后面才可以，为什么？
                 换成offsetLeft第一次就可以显示出来*/
                                         div1.style.left=div1.offsetLeft+10+'px';
                                         //这个地方要+-,最好不带'px'
                                         console.log(div1.offsetLeft);
                                     }}
                                ,30);
         }
         function startMove1(){
             clearInterval(timer);
             timer=setInterval(
                             function(){
                                 if(div1.offsetLeft==-200){clearInterval(timer);}
                                     else{div1.style.left=div1.offsetLeft-10+'px';
                                     console.log(div1.offsetLeft);}
                             }
                             ,30);
         }
     </script>
 </head>
 <body>

     <div id="div1">
         <span id="share">分享</span>
     </div>
 </body>
 </html>

js窗口边缘滑入滑出效果-初级代码的更多相关文章

  1. 在 jQuery 中使用滑入滑出动画效果，实现二级下拉导航菜单的显示与隐藏效果

    查看本章节 查看作业目录 需求说明: 在 jQuery 中使用滑入滑出动画效果,实现二级下拉导航菜单的显示与隐藏效果 用户将光标移动到"最新动态页"或"帮助查询" ...

  2. WPF技术触屏上的应用系列（五）: 图片列表异步加载、手指进行缩小、放大、拖动 、惯性滑入滑出等效果

    原文:WPF技术触屏上的应用系列(五): 图片列表异步加载.手指进行缩小.放大.拖动 .惯性滑入滑出等效果 去年某客户单位要做个大屏触屏应用,要对档案资源进行展示之用.客户端是Window7操作系统, ...

  3. css transition 实现滑入滑出

    transition是css最简单的动画. 通常当一个div属性变化时,我们会立即看的变化,从旧样式到新样式是一瞬间的,嗖嗖嗖!!! 但是,如果我希望是慢慢的从一种状态,转变成另外一种状态,怎么办?  ...

  4. JQuery动画之滑入滑出动画

    1. 滑入动画(类似于商店的卷帘门) $(selector).slideDown(speed, 回调函数); 解释: 此语句实现的功能为, 在XX时间内, 下拉动画, 显现元素. 当 slideDow ...

  5. 【jquery隐藏、显示事件and提示callback】【淡入淡出fadeToggle】【滑入滑出slideToggle】【动画animate】【停止动画stop】

    1.jquery隐藏and显示事件 $("p").hide();      //隐藏事件$("p").hide(1000);  //1秒内缓慢隐藏$(" ...

  6. jQuary总结7:动画操作,显示与隐藏 淡入淡出, 滑入滑出

    1 jquery提供了三组基本动画,这些动画都是标准的.有规律的效果,jquery还提供了自定义动画的功能. 2 显示与隐藏: show([speed],[easing],[callback]) 显示 ...

  7. 伴随ListView、RecyclerView、ScrollView滚动滑入滑出小图标--第三方开源--FloatingActionButton

    FloatingActionButton在github上的项目主页是:https://github.com/makovkastar/FloatingActionButton 它的依赖包NineOldA ...

  8. NSIS：实现程序窗口逐渐透明的渐入渐出效果

    原文NSIS:实现程序窗口逐渐透明的渐入渐出效果 需要修改版的插件(支持timer功能): MUI:InstallOptions.dll MUI2:nsDialogs.dll 以及system插件,( ...

  9. [Unity3D]Unity3D游戏开发之Logo渐入渐出效果的实现

    ---------------------------------------------------------------------------------------------------- ...

随机推荐

  1. [问题2014A06] 解答

    [问题2014A06]  解答 用反证法, 设存在 \(n\) 阶正交阵 \(A,B\), 使得 \[A^2=cAB+B^2,\,\,c\neq 0.\cdots(1)\] 在 (1) 式两边同时左乘 ...

  2. Android安全研究经验谈

    安全研究做什么 从攻击角度举例,可以是:对某个模块进行漏洞挖掘的方法,对某个漏洞进行利用的技术,通过逆向工程破解程序.解密数据,对系统或应用进行感染.劫持等破坏安全性的攻击技术等. 而防御上则是:查杀 ...

  3. ubuntu删除软件命令

    第一步,apt-get remove xxx :就是卸载xxx  或者 apt-get remove --purge xxx :卸载xxx并清除配置.   这两条命令对于依赖则是不管的.因为别的软件可 ...

  4. 初识DeepLearning4j

    标签(空格分隔): DeepLearning 在Mac上装DP4j 1. 安装Java 因为DP4j是基于JVM的,所以要先安装一下Java. 使用命令行brew install java 并且在pr ...

  5. javascript 函数声明和函数表达式的区别(学习笔记)

    javascript中声明函数的方法有两种:函数声明式和函数表达式. 区别如下: 1).以函数声明的方法定义的函数,函数名是必须的,而函数表达式的函数名是可选的. 2).以函数声明的方法定义的函数,函 ...

  6. 使用自己的CSS框架（转）

    [经典推介]CSS框架选择向导 不少CSS框架已经存在了一段时间,但大多数Web开发人员避免使用它们. 相反最有经验的开发者希望创建自己的CSS框架,提供个性化解决方案的优势,并减少对第三方的解决方案 ...

  7. 响应式设计，bootstrap框架的IE兼容问题

    学习bootstrap框架,主要是为了集成好的响应式框架,及其兼容性. 但是按bootstrap中文站的说明文档 制作了一个栅格布局的test.html后,怎么测试都不成功,在ie8下一直看不到媒体查 ...

  8. Android平板上开发应用的一点心得——精确适配不同的dpi和屏幕尺寸

    一.引言 Android的开源使厂商无需自行研发OS,大大降低了研发.生产的成本,使得Android平板品牌如雨后春笋般爆发,山寨机厂商们似乎又找到了一丝希望.与此同时带来的是广大开发者的苦不堪言,各 ...

  9. 带选择的sql简单用法

    一般写法: select * from itcast_topic order by (case type when 2 then 2 else 1 end ) desc ,postTime desc ...

  10. echsop常用模板方法.

    echsop模板遍历文件: {foreach from=$goods_list item=goods} {$goods.name} {/foreach} 不知道为什么ecshop中foreach像个注 ...