1、面向过程分享

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
} ul,li{
list-style: none;
} .share {
position: absolute;
width: 300px;
height: 200px; left: -270px;
} .share span{
padding-top: 70px; width: 30px;
height: 130px; display: block;
float: left; border-radius:0 10px 10px 0; background-color: pink;
color: #fff;
text-align: center;
} .sharecont{
width: 270px;
height: 200px; float: left; background: grey;
} </style>
</head>
<body> <div class="share" id="share">
<div class="sharecont"></div>
<span id="share">分享到:</span>
</div>
<script>
/**
* 练习javascript中运动的概念
* javascript 要实现运动运动设计到的两个地方:
* 1、div 必须要设置为position: absolute
* 2、使用定时器来完成
* 3、以后判断条件尽量用===的形式来判断到达终点
*/
window.onload = function () {
var share = document.getElementById('share');
var timer = null; function startMove (iTarget) {
clearInterval(timer);
var speed = 0;
timer = setInterval(function(){
if( share.offsetLeft < iTarget ){
speed = 10;
}else{
speed = -10;
} if( share.offsetLeft === iTarget ){
clearInterval(timer);
}else{
share.style.left = share.offsetLeft + speed + "px";
}
},30);
} share.onmouseover = function () {
startMove(0);
};
share.onmouseout = function () {
startMove(-270);
};
};
</script>
</body> </html>

2、使用面向对象改写以上程序

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
} ul,li{
list-style: none;
} .share {
position: absolute;
width: 300px;
height: 200px; left: -270px;
} .share span{
padding-top: 70px; width: 30px;
height: 130px; display: block;
float: left; border-radius:0 10px 10px 0; background-color: #6ed8e5;
color: #fff;
text-align: center;
} .sogoushare {
top: 300px;
} .sogoushare span{
background-color: #3acdb0;
} .sharecont{
width: 270px;
height: 200px; float: left; background: grey;
} </style>
</head>
<body> <div class="share" id="baidushare">
<div class="sharecont"></div>
<span>分享到</span>
</div> <div class="share sogoushare" id="sogoushare">
<div class="sharecont"></div>
<span>分享到</span>
</div> <script> /**
* 练习javascript中运动完成面向对象的分享功能
* overItarget 传入移入的到达目标值
* outItarget 传入移出的目标值
*/ function Share (id, overItarget, outItarget) {
this.share = document.getElementById(id);
this.timer = null;
this.speed = 0;
var that = this; this.share.onmouseover = function () {
that.startMove(overItarget);
}; this.share.onmouseout = function () {
that.startMove(outItarget);
};
} Share.prototype.startMove = function(iTarget) {
clearInterval(this.timer); var that = this;
this.timer = setInterval(function(){ if( that.share.offsetLeft < iTarget ){
this.speed = 10;
}else{
this.speed = -10;
} if( that.share.offsetLeft === iTarget ){
clearInterval(this.timer);
}else{
that.share.style.left = that.share.offsetLeft + this.speed + "px";
}
},30);
}; window.onload = function () { var baiduShare = new Share("baidushare",0,-270);
var sogouShare = new Share("sogoushare",0,-270); };
</script>
</body>

javascript 实现分享功能的更多相关文章

  1. 微信分享功能引入页面-控制分享时候调用的标题、图片、url和微信按钮隐藏显示控制

    1.设置分享调用的标题.图片.url预览. 2.控制右上角三个点按钮的隐藏显示(和底部工具栏的显示隐藏--未测试). 3.判断网页是否在微信中被调用. <!doctype html> &l ...

  2. 微信JS-SDK实际分享功能

    为了净化网络,整顿诱导分享及诱导关注行为,微信于2014年12月30日发布了<微信公众平台关于整顿诱导分享及诱导关注行为的公告>,微信平台开发者发现,原有的微信分享功能不能用了,在ipho ...

  3. js分享功能

    引用JiaThis的分享功能: 直接在想要放置分享功能的地方加上如下代码即可: <!-- JiaThis Button BEGIN --> <div class="jiat ...

  4. js分享功能(微信,QQ,微博,空间,豆瓣等)

    日常编程中,我们可能会碰到项目中的分享功能,各大平台都有分享接口和文档说明,当然也有一些一键分享插件,例如:sosh,iShare.js等等 但有些同学不想引用插件,那么我整理了一些常用的分享至平台功 ...

  5. H5分享功能

    web端分享功能 https://www.cnblogs.com/sdcs/p/8328367.html H5分享功能 公司里面做web开发经常会做H5页面,今天整理分享一下. 微信公众号平台 步骤一 ...

  6. 12个实用的 JavaScript 框架分享给前端开发者

    JavaScript库是预先编写的 JavaScript 工具代码,让开发者可以更容易开发 JavaScript 应用.这个列表我们列出了2017年1月份功能丰富的 JavaScript 库,可以帮助 ...

  7. ThinkPHP5集成JS-SDK实现微信自定义分享功能

    最近开发一个项目,需要将链接分享给好友时能够自定义标题.简介和logo,现将ThinkPHP5集成JS-SDK实现微信自定义分享功能的过程整理成文. 一.准备工作 1.认证的公众号 不管是订阅号还是服 ...

  8. 实现分享功能插件2---jiathis分享插件应用

    博主原创:未经博主允许,不得转载 在上一篇的博文中分享了如何用百度分享插件实现分享功能,现在展示用jiathis进行实现分享功能: 主要代码如下: <body> <div class ...

  9. MUI 分享功能(微信、QQ 、朋友圈)

    配置文件:manifest.json plus ->plugins 下边 "share": {/*配置应用使用分享功能,参考http://ask.dcloud.net.cn/ ...

随机推荐

  1. 怎么在Linux上下载并安装ESET NOD32 Antivirus 4桌面版

    转自:怎么在Linux上下载并安装ESET NOD32 Antivirus 4桌面版 下载并安装ESET NOD32 Antivirus 4的Linux桌面版,根据下面的步骤一步一步的来: I.  下 ...

  2. 【转】大素数判断和素因子分解【miller-rabin和Pollard_rho算法】

    集训队有人提到这个算法,就学习一下,如果用到可以直接贴模板,例题:POJ 1811 转自:http://www.cnblogs.com/kuangbin/archive/2012/08/19/2646 ...

  3. h5 canvas

    概述 Canvas API(画布)用于在网页实时生成图像,并且可以操作图像内容,基本上它是一个可以用JavaScript操作的位图(bitmap). 使用前,首先需要新建一个canvas网页元素. & ...

  4. Error prompt:“wget: unable to resolve host address”---Solution

    //Situation System prompts that:"wget: unable to resolve host address".   //Analysis   Una ...

  5. SQL Server 2008将数据导出为脚本

    之前我们要将一个表中的数据导出为脚本,那么只有在网上找一个导出数据的Script,然后运行就可以导出数据脚本了.现在在SQL Server 2008的Management Studio中增加了一个新特 ...

  6. iOS中忽略NSLog打印信息(通过PCH文件中定义DEBUG宏解决)

    iOS中忽略NSLog打印信息 解决办法: 1.新建PrefixHeader_pch文件,在该文件中定义一下宏 //通过DEBUG宏的定义来解决Debug状态下和Release状态下的输出 #ifde ...

  7. oracle 分布式数据库

    分布式数据库的数据库链路是单向的

  8. 武汉科技大学ACM :1007: 华科版C语言程序设计教程(第二版)习题7.10

    Problem Description 输入n(n<100)个字符串,每个字符串长度不超过1000,将他们按字典顺序输出. Input 多组测试样例. 每组第一行有一个整数n表示有n个字符串. ...

  9. python的hashlib模块

    # -*- coding: utf-8 -*- """python 的MD5 sha1 模块""" import hashlib #md5的 ...

  10. ios 实时刷新屏幕

    index=; // timer = [NSTimer scheduledTimerWithTimeInterval:0.1 target:layer selector:@selector(setNe ...