js窗口边缘滑入滑出效果-初级代码
<!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窗口边缘滑入滑出效果-初级代码的更多相关文章
- 在 jQuery 中使用滑入滑出动画效果,实现二级下拉导航菜单的显示与隐藏效果
查看本章节 查看作业目录 需求说明: 在 jQuery 中使用滑入滑出动画效果,实现二级下拉导航菜单的显示与隐藏效果 用户将光标移动到"最新动态页"或"帮助查询" ...
- WPF技术触屏上的应用系列(五): 图片列表异步加载、手指进行缩小、放大、拖动 、惯性滑入滑出等效果
原文:WPF技术触屏上的应用系列(五): 图片列表异步加载.手指进行缩小.放大.拖动 .惯性滑入滑出等效果 去年某客户单位要做个大屏触屏应用,要对档案资源进行展示之用.客户端是Window7操作系统, ...
- css transition 实现滑入滑出
transition是css最简单的动画. 通常当一个div属性变化时,我们会立即看的变化,从旧样式到新样式是一瞬间的,嗖嗖嗖!!! 但是,如果我希望是慢慢的从一种状态,转变成另外一种状态,怎么办? ...
- JQuery动画之滑入滑出动画
1. 滑入动画(类似于商店的卷帘门) $(selector).slideDown(speed, 回调函数); 解释: 此语句实现的功能为, 在XX时间内, 下拉动画, 显现元素. 当 slideDow ...
- 【jquery隐藏、显示事件and提示callback】【淡入淡出fadeToggle】【滑入滑出slideToggle】【动画animate】【停止动画stop】
1.jquery隐藏and显示事件 $("p").hide(); //隐藏事件$("p").hide(1000); //1秒内缓慢隐藏$(" ...
- jQuary总结7:动画操作,显示与隐藏 淡入淡出, 滑入滑出
1 jquery提供了三组基本动画,这些动画都是标准的.有规律的效果,jquery还提供了自定义动画的功能. 2 显示与隐藏: show([speed],[easing],[callback]) 显示 ...
- 伴随ListView、RecyclerView、ScrollView滚动滑入滑出小图标--第三方开源--FloatingActionButton
FloatingActionButton在github上的项目主页是:https://github.com/makovkastar/FloatingActionButton 它的依赖包NineOldA ...
- NSIS:实现程序窗口逐渐透明的渐入渐出效果
原文NSIS:实现程序窗口逐渐透明的渐入渐出效果 需要修改版的插件(支持timer功能): MUI:InstallOptions.dll MUI2:nsDialogs.dll 以及system插件,( ...
- [Unity3D]Unity3D游戏开发之Logo渐入渐出效果的实现
---------------------------------------------------------------------------------------------------- ...
随机推荐
- Using User-Named Triggers in Oracle Forms
A user-named trigger is a trigger defined in a form by the developer. User-Named triggers do not aut ...
- Educational Codeforces Round 6 E. New Year Tree dfs+线段树
题目链接:http://codeforces.com/contest/620/problem/E E. New Year Tree time limit per test 3 seconds memo ...
- 《BI那点儿事》数据流转换——数据转换
数据转换执行类似于T-SQL中的函数CONVERT或CAST的功能.数据转换的编辑界面如图,选择需要转换的列,在DataType下拉列表中选择需要的数据类型.Output Alias栏内设置输出时使用 ...
- iOS - Mac 锁屏快捷键设置
Mac 锁屏快捷键设置 control + shift + Eject 锁屏快捷键 如果用户要离开电脑一段时间,可以选择直接把笔记本直接合上.但是这样原先在跑的进程就会挂起或者结束,如果正在下载,那么 ...
- iOS核心动画学习整理
最近利用业余时间终于把iOS核心动画高级技巧(https://zsisme.gitbooks.io/ios-/content/chapter1/the-layer-tree.html)看完,对应其中一 ...
- iOS开发 贝塞尔曲线UIBezierPath
最近项目中需要用到用贝塞尔曲线去绘制路径 ,然后往路径里面填充图片,找到这篇文章挺好,记录下来 自己学习! 转至 http://blog.csdn.net/guo_hongjun1611/articl ...
- Python之路 day2 购物车小程序1
#Author:ersa ''' 程序:购物车程序 需求: 启动程序后,让用户输入工资,然后打印商品列表 允许用户根据商品编号购买商品 用户选择商品后,检测余额是否够,够就直接扣款,不够就提醒 可随时 ...
- fiddler,https抓包设置
1.fiddler 2 汉化版本不支持https证书下载,需要下载fiddler 4版本进行验证 若fiddler 2版本,可能存在无法访问Pc端fiddler返回页面,无法下载证书 2.打开Fidd ...
- css实现自适应宽度布局
1.实现左侧宽度固定,右侧全屏自适应. body{margin:0;padding:0} .wrap{ width:100%; float:left} .content{ height:300px;b ...
- java日期操作大全
摘自(http://www.blogjava.net/i369/articles/83483.html) java日期操作 大全 先来一个: 取得指定月份的第一天与取得指定月份的最后一天 http ...