js实现右侧的分享效果
就是当鼠标移到上面的时候，他会出现，鼠标移出就消失。
nmouseover和nmouseout就能实现
<style>
*{padding:0;margin:0;}
#s1{width:200px ;
background:red;
height:200px;
position:absolute;
top:50px;
left:-200px;
cursor:pointer;}
#s1 span
{display:block;height:80px;width:20px;left:200px;background:blue;position:absolute;left:200px;top:50px;}
}
</style> <body>
<div id="s1">
<span>分享到</span>
</div>
</body>
js代码如下
<script>
window.onload=function()
{
var div1=document.getElementById("s1");
var span1=s1.getElementsByTagName("span")[0]; div1.onmouseover=function()
{
startMove(0);
}
div1.onmouseout=function()
{
startMove(-200);
}
};
var timer=null;
function startMove(ti)
{
var div1=document.getElementById("s1");
clearInterval(timer);
timer=setInterval(function()
{
var speed=null;
if (div1.offsetLeft>ti) //先判断他的速度是正的还是负的，如果offsetLeft大于0，速度为负
{
speed=-10;
}
else //否则速度为正，显示div要出来
{
speed=10;
} if (div1.offsetLeft==ti) //相等，停止运动
{
clearInterval(timer);
}
else //不相等，做匀速运动
{
div1.style.left=div1.offsetLeft+speed+'px';
}
},30);
}
</script>
其实特别简单，只要收敲敲就会，
js实现右侧的分享效果的更多相关文章
- Rainyday.js – 使用 JavaScript 实现雨滴效果
Rainyday.js 背后的想法是创建一个 JavaScript 库,利用 HTML5 Canvas 渲染一个雨滴落在玻璃表面的动画.Rainyday.js 有功能可扩展的 API,例如碰撞检测和易 ...
- 用js枚举实现简易菜单效果
用js枚举实现简易菜单效果,左侧显示菜单,右侧显示用户选择的菜单,一图胜千言,还是直接来张效果图吧: 以下是代码: <DOCTYPE html> <html> <head ...
- 原生js实现canvas气泡冒泡效果
说明: 本文章主要分为ES5和ES6两个版本 ES5版本是早期版本,后面用ES6重写优化的,建议使用ES6版本. 1, 原生js实现canvas气泡冒泡效果的插件,api丰富,使用简单2, 只需引入J ...
- 带你使用JS-SDK自定义微信分享效果
前言 想必各位在写wap端时都遇到过这样的场景吧 ----自定义分享标题.图片.描述 接下来小编给大家讲解下分享相关操作 预期效果 原始的分享效果: 使用微信JS-SDK的分享效果: 可以看出缩略图, ...
- weixinShare.js / 极简微信分享插件
weixinShare.js / 极简微信分享插件 / 版本:0.1 这是一个很简单.很实用的微信分享插件,无需jQuery,只需要在网页里加入一行JS代码,即可自动识别微信浏览器并启动微信分享的提示 ...
- 在vue中使用weixin-js-sdk自定义微信分享效果
在做微信分享的时候,产品要求分享效果要有文字和图片,使用weixin-js-sdk解决了, 原始的分享效果: 使用微信JS-SDK的分享效果: 首先需要引入weixin-js-sdk npm inst ...
- 使用JS-SDK自定义微信分享效果
前言 刚进入一家新公司,接到的第一个任务就是需要需要自定义微信分享的效果(自定义缩略图,标题,摘要),一开始真是一脸懵逼,在网上搜索了半天之后大概有了方案.值得注意的是一开始搜索到的解决方案全是调用微 ...
- 实用js+css多级树形展开效果导航菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- js+css实现带缓冲效果右键弹出菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- 再议C++的性能
最近在公司里的项目做的是性能优化,相关性能调优的经验总结也在前一篇文章里说了.这里再说一说和性能相关的东西.主要针对的是C++类库中常用的一些数据结构,比方说std::string.顺序容器(vect ...
- 大公司的Java面试题集
找工作要面试,有面试就有对付面试的办法.以下一些题目来自我和我朋友痛苦的面试经历,提这些问题的公司包括IBM, E*Trade, Siebel, Motorola, SUN, 以及其它大小公司. 面试 ...
- NSIS 的简介
NSIS (Nullsoft Scriptable Install System)是一个Open Source的Windows系统下安装程序制作程序.它提供了安装.卸载.系统设置.文件解压缩等功能.这 ...
- Java网络应用编程
1,网络连接 (1)用户向服务器发送请求(Socket); (2)服务器向用户发送信息(ServerSocket),一直监听的话用.accept(); 2,信息发送与接收 (1)客户向服务器端发送信息 ...
- CSS3特性 盒模型 动画
转发自0101后花园 CSS3中的动画功能分为Transitions和Animations功能,这两种功能都可以通过改变CSS中的属性值来产生动画效果. 一.Transitions 语法:transi ...
- MxNet下训练alexnet（一）
1.图像经过工具包中的 make_lsit im2rec 转换为可调用各式.rec,.bin都可以 2.然后使用train_imageXXXX进行训练,参数需要对应 3.利用保存的模型进行估计,测试 ...
- Insert Interval
在已经排好序的区间中,插入一个新的区间,与merge的做法类似 Given a set of non-overlapping intervals, insert a new interval into ...
- ajax上传图片到服务器
通过Ajax方式上传文件,使用FormData进行Ajax请求.上传文件或图片时,要求的格式为enctype ="multipart/form-data"(以二进制格式上传),在使 ...
- thinkphp 内置标签volist 控制换行
thinkphp 内置标签volist 控制换行 volist标签通常用于查询数据集(select方法)的结果输出,通常模型的select方法返回的结果是一个二维数组,可以直接使用volist标签进行 ...
- ATMEL处理器自带USB CDC的Win7驱动问题
[背景] 很久以前使用ATMEL的处理器开发了一款设备,通过处理器本身的功能,借助USB在PC端虚拟一个串口出来,实现和上位机软件的通信,和基本的参数设置和数据读取功能. 这个功能就是ATMEL官网上 ...