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

<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. 【shell】 初次接触shell编程,记录一下遇到的问题
  2. linux如何实现网络高级编程,嵌入式Linux网络编程之:网络高级编程-嵌入式系统-与非网...
  3. 作业帮云原生降本增效实践之路
  4. Codeforces 990E Post Lamps 【暴力】【贪心】
  5. Citrix路径遍历(CVE-2019-19781)
  6. 【Elasticsearch】es 7 Failed to parse value [analyzed] as only [true] or [false] are allowed
  7. 想成为一个高效的Web开发者吗?来看看大牛分享的经验吧
  8. 华为 5G 遭受致命一击!
  9. 如何以用户身份登录MySQL_解析:如何以普通用户的身份运行 MySQL
  10. 后面冒号_Python 数组中的冒号使用
  11. 用Winhex软件定位NTFS文件系统的不明白之处
  12. JAVA实现Excel模板导入案例分析
  13. python rfcn.py
  14. vue项目怎么上传到web服务器,vue项目如何通过脚本自动打包上传服务器
  15. classtwo_单表查询
  16. 总结了大佬的学习方法 #CSDN博文精选# #学习方法# #高效系统化学习#
  17. 高温计通用协议 Data format UPP(Universal Pyrometer Protocol)
  18. 猿创征文 | Android AIDL 学习笔记——学以致用
  19. 2019二级java还有吗_2019年下半年二级Java练习题
  20. 本题要求实现一个函数,对给定的一个字符串和两个字符,打印出给定字符串中从与第一个字符匹配的位置开始到与第二个字符匹配的位置之间的所有字符

热门文章

  1. redis 缓存预热_Redis异常问题解决方案:缓存雪崩、预热、穿透、击穿、降解方案分析...
  2. sql两个聚合列相同怎么区分_SQL高级查询(终)
  3. java sql merge_sql merge用法
  4. nginx nodejs环境配置_nodejs + nginx + ECS阿里云服务器环境设置
  5. php sql判断l列的存在,thinkphp 模块不存在:404
  6. apk逆向思路_安卓逆向和手游辅助学习路线
  7. matlab2012b函数问题,MATLAB版本(2012b 64bit)在尝试调用svmtrain函数时报错
  8. 查看nginx进程_nginx的进程模型与配置
  9. aliyun maven 添加jar_Maven介绍及安装
  10. python面向对象的特征_03 Python 关键点讲解:面向对象的机制