分享到JavaScript
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
#div1{
width:150px;
height:200px;
background: pink;
position: absolute;
}
#div1 span{
width:30px;
height:60px;
background: deepskyblue;
position: absolute;
right:-30px;
top:60px;
}
</style>
<script>
window.onload=function(){
var oDiv1=document.getElementById('div1');
var timer="null"; oDiv1.onmousemove=function(){
move(0);
}
oDiv1.onmouseout=function(){
move(-150);
} function move(iTarget){
var oDiv1=document.getElementById('div1');
clearInterval(timer);
timer=setInterval(function(){
var speed;
if(oDiv1.offsetLeft>iTarget){
speed=-5;
}
else{
speed=5;
}
if(oDiv1.offsetLeft==iTarget){
clearInterval(timer);
}
else{
oDiv1.style.left=oDiv1.offsetLeft+speed+'px';
} },30);
}
}
</script>
</head>
<body>
<div id="div1">
<span>分享到</span>
</div>
</body>
</html>
分享到JavaScript的更多相关文章
- 【转发】网易邮箱前端技术分享之javascript编码规范
网易邮箱前端技术分享之javascript编码规范 发布日期:2013-11-26 10:06 来源:网易邮箱前端技术中心 作者:网易邮箱 点击:533 网易邮箱是国内最早使用ajax技术的邮箱.早在 ...
- 技术分享｜JavaScript的前世今生
目录 一.什么是JavaScript 二.JavaScript的功能 三.JavaScript可以做什么 四.JavaScript框架 五.HTML,CSS和JavaScript 六.JavaScri ...
- [转载] 自定义百度网盘分享密码 (Javascript)
压缩版 javascript:require(["function-widget-1:share/util/service/createLinkShare.js"]).protot ...
- 分享十个JavaScript在线调试工具
测试Javascript可能是网页开发中最让人忧伤的工作.这里我找一些比较好的工具来帮助大家进行测试工作.这10款是我精选的基于浏览器的JavaScript在线调试工具,希望你们对你们有用. 1.Op ...
- 分享一个JavaScript嗅探工具Tracker
今天发现一个好用的JS侦测工具,实时监测JS代码的使用效率,运行状态等. 期待插件作者添加更好的功能. 运行效果 运行效果如下(我把它放到标签里了): 1.点击Tracker书签工具 2.选择查看选项 ...
- JSONP分享-- 在JavaScript中跨域请求
如果你正在开发一个现代的基于web的应用程序,那么你: 在客户端使用JavaScript. 需要集成那些没有完全在你控制之下的服务(或者那些来自不同的域). 在你的浏览器控制台中遇到过这个错误信息: ...
- 【前端分享】 JavaScript最经典的55个技巧（转）
从别的地方看到的,保存下,有空实践下再补充. 1. oncontextmenu="window.event.returnValue=false" 将彻底屏蔽鼠标右键 <tab ...
- [分享]前端javascript插件（均开源）
记录并分享一些自己使用过的插件,便于以后有相应的功能需要使用可以及时想到. 1:数字插件countUp.js 功能:用于动态显示数字的增加和减少 项目github地址:http://inorganik ...
- (Demo分享)利用JavaScript（JS）实现一个九宫格拖拽功能
利用JavaScript(JS)实现一个九宫格拖拽功能 Demo实现了对任意方格进行拖拽,可以交换位置,其中Demo-1利用了勾股定理判断距离! Demo-1整体思路: 1.首先div实现自由移动 ...
随机推荐
- 【翻译】CSS Animations VS the Web Animations API：案例学习
原文地址:CSS Animations vs the Web Animations API: A Case Study May 03, 2017 css, javascript 上周我写了我如何使用C ...
- Centos 6.7 KVM下安装windows 7系统
装windows 虚拟机之前你需要做以下准备工作:A.下载windows 镜像文件和 windows 的驱动iso 文件到本地,然后上传至服务器的某个目录(当然你也可以直接在服务器上下载):B.你本地 ...
- Linux系统内存占用90%以上——解决方法
Linux系统内存占用90%以上--解决方法 首先要明确一个问题:Linux系统内存占用90%以上,是否属于正常范围?网上有详细的解释,这属于正常现象~~~ www.2cto.com L ...
- XAMPP禁止目录浏览的方法
XAMPP是目前比较流行Web服务器套件,集成了Apache.MySQL.PHP.PERL.FTP等各种软件包.但是细心的人可以发现,XAMPP安装完成后,默认是可以目录浏览的,这有些不安全.如果需要 ...
- Android查缺补漏（IPC篇）-- 款进程通讯之AIDL详解
本文作者:CodingBlock 文章链接:http://www.cnblogs.com/codingblock/p/8436529.html 进程间通讯篇系列文章目录: Android查缺补漏(IP ...
- HopSpot虚拟机中的Mark word的作用
1.其为对象头保存对象的hashcode 2.保存GC分代年龄,锁状态标志,线程持有的锁,偏向线程的ID偏向时间戳.
- MysqL主从复制_模式之GTID复制
基于GTID的复制是从Mysql5.6开始支持的一种新的复制方式,此方式与传统基于日志的方式存在很大的差异,在原来的基于日志的复制中,从服务器连接到主服务器并告诉主服务器要从哪个二进制日志的偏移量开始 ...
- 第十九章 Django的ORM映射机制
第十九章 Django的ORM映射机制 第一课 Django获取多个数据以及文件上传 1.获取多选的结果(checkbox,select/option)时: req.POST.getlist('fav ...
- 高性能JavaScript读书笔记
零.组织结构 根据引言,作者将全书划分为四个部分: 一.页面加载js的最佳方式(开发前准备) 二.改善js代码的编程技巧(开发中) 三.构建与部署(发布) 四.发布后性能检测与问题追踪(线上问题优化) ...
- scrapy学习总结
1.为了配合XPath,Scrapy除了提供了 Selector 之外,还提供了方法来避免每次从response中提取数据时生成selector的麻烦 Selector有四个基本的方法(点击相应的方法 ...