JavaScript代码编写分享到边侧栏
来源:互联网 发布:超链接调用js方法 编辑:程序博客网 时间:2024/06/16 03:44
在很多的网站页面中或微信,微博都有分享到的功能。现在就编写一个简单的边侧栏。
代码:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> #div1{ width: 100px; height: 200px; background: #ccc; left: -100px; top: 70px; position: absolute; } #div1 span{ width: 20px; height: 120px; background: green; left: 100px; top: 45px; line-height: 40px; position: absolute; } </style></head><body> <script> window.onload = function(){ var oDiv = document.getElementById("div1"); //经过事件,速度为正 oDiv.onmouseover = function(){ startMove( 10, 0 ); } //离开事件,速度为负 oDiv.onmouseout = function(){ startMove( -10, -100); } } //运动框架 var timer = null; //两个参数iSpeed表示速度,iTartget表示目标位置 function startMove( iSpeed, iTarget){ var oDiv = document.getElementById("div1"); clearInterval( timer ); //定时器 timer = setInterval( function(){ if( oDiv.offsetLeft == iTarget ) { clearInterval( timer ); } else { //oDiv的移动 oDiv.style.left = oDiv.offsetLeft + iSpeed + "px"; } }, 30); } </script> <div id="div1"> <span>分享到</span> </div></body></html>
布局方面:都要使用定位。
阅读全文
0 0
- JavaScript代码编写分享到边侧栏
- 编写 JavaScript 代码
- 教程 -- 编写 Javascript 代码
- JavaScript代码编写风格
- javascript 代码编写习惯
- 编写高效JavaScript代码
- 分享10个帮助你编写更加简洁javascript代码的小技巧
- 编写高级JavaScript应用代码
- 编写高级JavaScript应用代码
- 编写高质量JavaScript代码
- 用JavaScript代码编写日历
- 《编写高质量的代码》读书分享
- J2EE项目代码编写规范分享
- Javascript的用户指南--编写 JavaScript 代码
- 【JavaScript】编写快速、高效的JavaScript代码
- javascript四舍五入函数代码分享(保留后几位)
- Javascript模拟加速运动与减速运动代码分享
- 微信分享 JavaScript 代码 2016
- C++基础面试题总结
- HDU 3342 Legal or Not
- 使用SQL Server链接服务器访问MySQL的一些坑
- 树莓派远程桌面配置
- hdu 6047 Maximum Sequence (贪心)
- JavaScript代码编写分享到边侧栏
- Subarray Sum
- 1701H2 王建瑜 2017.10.14 连续第四天总结
- 工具
- <深度学习系列>基于numpy和python的反向传播算法的实现与分析
- 考虑实现Comparable接口。
- 最近 5 年 133 个 Java 面试问题列表(下)
- HDU 2647 Reward
- 数字货币开发第一部分: 深度抽象算法Serenity教程