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/ ...
随机推荐
- JS判断是否已经到达页面底部
$(window).scroll(function(){ var scrollTop=$(this).scrollTop(); var scrollHeight=$(document).height( ...
- IOS时间传递机制简记
事件传递顺序:自定义View -- > UIview --> RootViewController --> UIWindow -->UIApplication -->Ap ...
- Oracle数据库高效sql语句的整理
业务需求说明:由于之前公司后台APP端有一个document表,该表中包含了所有的信息,新的需求就是通过该表创建出一个新的用户表(usertable)和一个档案表(document,该表只保留原doc ...
- FileWriter和FileReader简单使用
FileWriter和FileReader使用 package com.main.test; import java.io.FileNotFoundException; import java.io. ...
- a few changes of Android 5.0
1.Service Intent must be explicit Intent serviceIntent = new Intent(context,MyService.class);context ...
- Binary Tree Inorder Traversal -- LeetCode 94
Given a binary tree, return the inorder traversal of its nodes' values. For example:Given binary tre ...
- 基于MPI的并行计算—矩阵向量乘
以前没接触过MPI编程,对并行计算也没什么了解.朋友的期末课程作业让我帮忙写一写,哎,实现结果很一般啊.最终也没完整完成任务,惭愧惭愧. 问题大概是利用MPI完成矩阵和向量相乘.输入:Am×n,Bn× ...
- Linux命令--top使用技巧
摘自 http://www.jb51.net/LINUXjishu/151995.html top命令是Linux下常用的性能分析工具,能够实时显示系统中各个进程的资源占用情况,类似于Windows的 ...
- Java笔记2-数据类型,变量,Java运算符
我们编写软件,目的是为了高效的操作(增,删,改,查)数据. 数据类型 1.基本类型(8种)byte 字节型 -128~127short 短整型 -32768~32767int 整型 -21474836 ...
- Spring4 + Quartz-2.2.0集成实例
Spring3.0不支持Quartz2.0,因为org.quartz.CronTrigger在2.0从class变成了一个interface造成IncompatibleClassChangeError ...