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/ ...
随机推荐
- jQueryUI 之控件们
总结:总的来说,这些控件可以在官网找到列子, 部分ui效果不如意的,可根据jQueryUI上添加的类选择器等,进行再加工 <!DOCTYPE html> <html> < ...
- Java Web项目 配置 ueditor心得
近期的JAVA项目,由于客户要求需要引入富文本编辑器. 参考了两款插件,一款是ckeditor,一款是ueditor. ckeditor在上传文件的时候必须配合ckfinder使用,而ckfinder ...
- HTML编码规则、CSS属性声明顺序--简介
From AmazeUI:http://amazeui.org/getting-started/html-css-guide HTML 属性顺序 HTML 属性应当按照以下给出的顺序依次排列,确保代码 ...
- LeetCode 笔记系列 20 Interleaving String [动态规划的抽象]
题目: Given s1, s2, s3, find whether s3 is formed by the interleaving of s1 and s2. For example,Given: ...
- Python 基礎 - if else流程判斷
hmm~前面講了那麼多,終於可以稍稍的正式進入另一個階段,沒錯,要開始寫判斷式了 這次先從最簡單的判斷式開始,if else 開始- Go 首先,之前有寫有一個簡單的互動式 用戶輸入 的代碼,忘記了嗎 ...
- mongodb,redis,hbase 三者都是nosql数据库,他们的最大区别和不同定位是什么?
不严谨地讲,Redis定位在"快",HBase定位于"大",mongodb定位在"灵活". NoSQL的优点正好就是SQL的软肋,而其弱 ...
- Java-->利用URL类下载图片
--> 通过get 请求访问图片地址,将通过服务器响应的数据(即图片数据)存到本地文件中... --> HttpURLConnectionUtil 工具类 package com.drag ...
- c++标准模板库algorithm头文件中accumulate算法的代码
template <typename T>T algorithm(T* start, T* end, T total)//把[start, end)标记范围内所有元素累加到total中{ ...
- linux项目-之系统安装部署-cobbler
http://cobbler.github.io/manuals/2.6.0/1/1_-_Release_Notes.html http://www.osyunwei.com/archives/760 ...
- Node调试之道-----JSHint
Node调试之道-----JSHint Node的优势我就不再乱吹捧了,它让javascript统一web的前后台成为了可能.但是对于新手来说,server端的JS代码可能不像client端的代码那么 ...