运动框架的应用:制作‘鼠标移入移出(分享到)’

<div id="div1"><span>分享到</span>
</div>

#div1 {width: 150px;height: 200px;background: green;position: absolute;left:-150px;
}#div1 span {position: absolute;width: 20px;height: 60px;line-height: 20px;background: purple;right:-20px;top:70px;
}

window.onload = function () {var oDiv = document.getElementById('div1');oDiv.onmouseover = function () {startMove(0);};oDiv.onmouseout = function () {startMove(-150);};
};var timer = null;
function startMove(iTarget) {var oDiv = document.getElementById('div1');clearInterval(timer);   //清除定时器;timer = setInterval(function () {var speed=0;if(oDiv.offsetLeft>iTarget){speed=-10;}else{speed=10;}if (oDiv.offsetLeft == iTarget) {clearInterval(timer);} else {oDiv.style.left = oDiv.offsetLeft + speed + 'px';}});
}

转载于:https://www.cnblogs.com/redaisy567/p/5960319.html

‘分享到’侧边栏制作相关推荐

  1. 分享手机游戏制作各阶段的注意事项

    分享手机游戏制作各阶段的注意事项 出自IED Wiki 跳转到: 导航, 搜索 作者:Kimberly Unger & Jeannie Novak [主要问题] 第三方工作室 & 独立 ...

  2. QQ图文分享卡片如何制作,将链接转换为可编辑图文卡片

    ​​我们在QQ单/群聊中发送h5链接时,链接展现效果不是很好别人不敢点击,那么本教程教您如何制作QQ图文分享卡片. QQ图文卡片制作教程: 1.在后台点击 小狐工具箱-创建卡片,选择QQ卡片,先选择不 ...

  3. 三分钟学会画中画的制作,分享详细的制作步骤

    很多人会自己剪辑视频,那么剪辑视频的时候有很多技巧,制作画中画该怎么操作呢?不会操作的朋友可以接着往下看,小编分享一个方法制作视频画中画,一起来看看吧. 第一步,运行媒体梦工厂,选择[画中画]页面,点 ...

  4. 【前端基础之css2(emmet语法、CSS复合选择器、元素的显示模式、Snipaste截图工具、小米侧边栏制作、CSS背景、CSS三大特性、盒子模型、PS基本操作】

    emmet语法 快速生成HTML标签: 快速生成CSS样式语法: 方法1(没有找到对应的文件,所以用了方法2): 方法2: 左下角选择设置 搜索框输入"格式化",勾选上如图三个选项 ...

  5. 自适应高度表格_【干货分享】Word制作表格,这几个技巧必须要学会!

    快点这里订阅最有趣有料的3D/VR/AR/Ai数字化资讯 如果你对Word不是很熟练,那制作表格起来可能特别费劲.这里,就给大家分享几个,必须要掌握的制表技巧. 01表格前面加空行 制作好表格以后,如 ...

  6. 如何制作趣味头像?分享几种制作头像的方法

    怎么制作出趣味头像呢?制作出趣味头像可以用来玩社交媒体上的各种有趣的游戏,或者在聊天应用程序中使用,让你的聊天更加生动有趣.此外,你也可以将头像用作个人品牌或网站的标识,增加品牌的辨识度.另外,头像也 ...

  7. 电脑PHP动画制作画板,HTML_html5教程制作简单画板代码分享,HTML5制作简单画板 复制代码代 - phpStudy...

    html5教程制作简单画板代码分享 HTML5制作简单画板 复制代码代码如下: http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min ...

  8. 利用html制作网页的小结,HTML_CSS制作网页的一些经验分享,CSS制作网页总结的一些经验 1: - phpStudy...

    CSS制作网页的一些经验分享 CSS制作网页总结的一些经验 1: ID用于标识页面单独元素以及持久行的结构性元素 方便JS的调用 类用于标识同一页面可重复定义使用的结构性元素 ID与类的命名需与表现形 ...

  9. 有哪些免费的思维导图软件?分享两个制作软件给你

      思维导图是一种高效的学习思维模式,不管是工作还是学习,都可以使用思维导图来帮我们对内容进行结构逻辑化,加强记忆.而现在有很多工具可以制作思维导图,那你们知道免费思维导图软件哪个好吗?下面给大家介绍 ...

最新文章

  1. 新型支架状电极允许人类思想操作计算机
  2. cat 几行_研发早 商用早 有方科技Cat.1产品在多个共享场景商用
  3. 六十三、栈在括号匹配和表达式求值中的应用
  4. 单向链表的C语言实现与基本操作
  5. geoserver 3_SD 2-3/15 PR调速阀德国HAWE哈威
  6. php文件夹0777,PHP代码mkdir(‘images’,’0777′)创建一个具有411权限的文件夹!为什么?...
  7. asp.net2.0跨域问题
  8. Java之品优购课程讲义_day12(2)
  9. 使用读写锁实现同步数据访问
  10. ntpdate从指定服务器同步时间,ntpdate:设置服务器时间定期同步
  11. 关于学习单片机keil uvision5的基本使用方法
  12. 【python】入门oj
  13. 前端jQuery读取本地文件内容
  14. Stimulsoft.Report的代码实现功能自学整理(二)
  15. Mac下Smb的使用
  16. UNREAL ENGINE 4.12 正式发布!下载地址
  17. MongoDB连接URL说明
  18. 计算机主机启动 显示器不动什么原因,电脑显示屏不亮但是主机已开机是什么原因?(五种解决方案)...
  19. 珠海拱北口岸停车攻略,拱北口岸地下停车场收费
  20. 国密算法sm3java软实现_国密算法实现

热门文章

  1. Pinyin4NET 发布到 NUGET 服务器
  2. mysql命令查找失效索引_mysql查询时无效索引的简单总结
  3. 电脑刷机重装系统_手机刷机,原来也没有那么复杂
  4. linux dpkg未找到命令_Linux安装软件时90%的人会遇到这个报错,如何解决?
  5. css 垂直居中_CSS 水平+垂直居中的方式
  6. python技巧 pdf-求教使用python库提取pdf的方法?
  7. vue main.js中引入js_手把手教你深入Vue3.0(Vue-cli4)项目打包性能优化实践
  8. css奇数、偶数样式
  9. php多图片上传程序2.4.3,php多文件上传 多图片上传程序代码
  10. 微信小程序性别代码对应描述