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/ ...
随机推荐
- Spring中加载多个Properties配置文件
单个配置: <bean id="propertyConfigurer" class="org.springframework.beans.factory.confi ...
- PATH变量
PATH变量由系统管理员配置,通常包含如下一些存储系统程序的标准路径: /bin 二进制文件目录,用于存放启动系统时用到的路径 /usr/bin 用户二进制文件目录,用于存放用户使用的标准程序 / ...
- css实现微信信息背景qq聊天气泡
用css实现一个椭圆形状的背景框很好实现 css: div{ width:200px; height:80px; background-color: #78DDF8; border-radius:10 ...
- Maven概述
Apache Maven的定义:Maven是一个项目管理工具,它包含了一个项目对象模型(Project Object Model,pom),一组标准集合,一个项目生命周期(Project Lifecy ...
- C语言数组初始化
例如: int a[15] = {0}; 第一种,编译器会把第一个初始化值赋给数组的第一个元素,然后用0赋给其余的元素.如果没有给出初始值,编译器不会去做初始化工作.这样简洁的方式让代码更加高效. 还 ...
- 一个共享内存hash
Background 我们的多进程程序碰到一个需求:做key-value查询,然后拿获取到的value去做一些事情.这些key-value存储在很多词典文件中,数量级>10w,如果每个进程都加载 ...
- LintCode Search a 2D Matrix II
排好序的二维数组, 从上到下从左到右增大, 给出一个数找出此数组里有多少个这个数. 不用两个循环做, 着手于条件(从左下角开始,若相等往右上跳一个,若小于target往右边跳一个,若大于target往 ...
- ✡ leetcode 163. Missing Ranges 找出缺失范围 --------- java
Given a sorted integer array where the range of elements are in the inclusive range [lower, upper], ...
- hdu1018
可以用斯特林公式直接求出n!的结果. 当n较小时公式已经很准确了,所以可以使用.但是,对于这种极限值为1的公式,只能用来估计位数,不能作为严格的等于的公式.类似的有素数分布定理 x/ln(x)~f( ...
- Bank，我只是来完成作业的
写这个Bank我需要有:开户,取款,存款,转账,查询余额,退出功能. 这样我需要有两个类:Bank,User.一个Main入口. 先看这个User,他定义了各个需要的属性(字段)和字段的属性(虽然在这 ...