admin管理员组文章数量:1571382
百度公司提供了百度分享的插件代码，下面贴出自定义的百度分享：\
先给出效果图：
首先是自定义基础库base.js:
/**
博客前端+封装库
*/
/********************自定义封装***************************/
function $(args){
return new Base(args);//每次创建一个Base对象，防止页面共用同一个Base对象
}
//基础库
function Base(args){
this.elements=[];//创建一个临时数组。存放元素节点对象
if(typeof args=="string"){
//css模拟
if (args.indexOf(' ') != -1) {
var elements = args.split(' '); //把节点拆开分别保存到数组里
var childElements = []; //存放临时节点对象的数组，解决被覆盖的问题
var node = []; //用来存放父节点用的
for (var i = 0; i < elements.length; i ++) {
if (node.length == 0) node.push(document); //如果默认没有父节点，就把document放入
switch (elements[i].charAt(0)) {
case '#' :
childElements = []; //清理掉临时节点，以便父节点失效，子节点有效
childElements.push(this.getById(elements[i].substring(1)));
node = childElements; //保存父节点，因为childElements要清理，所以需要创建node数组
break;
case '.' :
childElements = [];
for (var j = 0; j < node.length; j ++) {
var temps = this.getClass(elements[i].substring(1), node[j]);
for (var k = 0; k < temps.length; k ++) {
childElements.push(temps[k]);
}
}
node = childElements;
break;
default :
childElements = [];
for (var j = 0; j < node.length; j ++) {
var temps = this.getByTagName(elements[i], node[j]);
for (var k = 0; k < temps.length; k ++) {
childElements.push(temps[k]);
}
}
node = childElements;
}
}
this.elements = childElements;
} else {
//find模拟
switch (args.charAt(0)) {
case '#' :
this.elements.push(this.getById(args.substring(1)));
break;
case '.' :
this.elements = this.getClass(args.substring(1));
break;
default :
this.elements = this.getByTagName(args);
}
}
}else if(typeof args=="object"){
if(args!=undefined){//undefined这里是一个对象，区别与tyoeof带单引号有区别
this.elements[0]=args;
}
}else if(typeof args=="function"){//判断是否是$(function(){})
this.ready(args);
}
}
//实现执行dom加载时候执行fn方法
Base.prototype.ready=function(fn){
addDomLoaded(fn);
}
//通过id获取节点
Base.prototype.getById=function(id){
return document.getElementById(id);
};
//通过元素名称获取节点
Base.prototype.getByTagName=function(tag,parentNode){
var temps=[];
var node=null;
if(parentNode!=undefined){
node=parentNode;
}else {
node=document;
}
var tags=node.getElementsByTagName(tag);
for(var i=0;i<tags.length;i++){
temps.push(tags[i]);
}
return temps;
};
//获取class节点数组
Base.prototype.getClass=function(className,parentNode){
var node=null;
var temps=[];
if(parentNode!=undefined){//arguments.length==2:指定区域div中的所有class集合
node=parentNode;
}else{
node=document;
}
var all=node.getElementsByTagName('*');
for(var i=0;i<all.length;i++){
if(all[i].className==className){
temps.push(all[i]);
}
}
return temps;
}
//获取某一个节点，并返回这个节点对象
Base.prototype.getElement = function (num) {
return this.elements[num];
};
//获取某一个节点，并且Base对象
Base.prototype.eq = function (num) {
var element = this.elements[num];
this.elements = [];
this.elements[0] = element;
return this;
}
//获取首个节点，并且返回这个节点对象
Base.prototype.first=function(){
return this.elements[0];
}
//获取末个节点，并且返回这个节点对象
Base.prototype.last=function(){
return this.elements[this.elements.length-1];
}
//设置CSS选择器子节点
Base.prototype.find=function(child){
var childrenNodes=[];
for(var i=0;i<this.elements.length;i++){
switch(child.charAt(0)){
case '#':
childrenNodes.push(this.getById(child.substring(1)));
break;
case '.':
var temps=this.getClass(child.substring(1),this.elements[i]);
for(var j=0;j<temps.length;j++){
childrenNodes.push(temps[j]);
}
break;
default:
var temps=this.getByTagName(child,this.elements[i]);
for(var j=0;j<temps.length;j++){
childrenNodes.push(temps[j]);
}
}
}
this.elements=childrenNodes;
return this;
};
//添加class
Base.prototype.addClass=function(className){
for(var i=0;i<this.elements.length;i++){
if(!hasClass(this.elements[i], className)){//避免重复相同的class
this.elements[i].className+=" "+className;
}
}
return this;
}
//移除class
Base.prototype.removeClass=function(className){
for(var i=0;i<this.elements.length;i++){
if(!hasClass(this.elements[i], className)){//避免重复相同的class
this.elements[i].className= this.elements[i].className.replace(new RegExp("\\s|^"+className+'(\\s|$)'));
}
}
return this;
}
//设置css样式
Base.prototype.css=function(attr,value){
for(var i=0;i<this.elements.length;i++){
if(arguments.length==1){
return getStyle(this.elements[i], attr);
//return this.elements[i].style[attr];//获取css属性内容
}
this.elements[i].style[attr]=value;
}
return this;
}
//设置hover的onmouseover和onmouseout事件
Base.prototype.hover=function(over,out){
for(var i=0;i<this.elements.length;i++){
//this.elements[i].οnmοuseοver=over;
//this.elements[i].οnmοuseοut=out;
addEvent(this.elements[i], 'mouseover', over);
addEvent(this.elements[i], 'mouseout', out);
}
return this;
};
//设置动画
Base.prototype.animate = function (obj) {
for (var i = 0; i < this.elements.length; i ++) {
var element = this.elements[i];
var attr = obj['attr'] == 'x' ? 'left' : obj['attr'] == 'y' ? 'top' :
obj['attr'] == 'w' ? 'width' : obj['attr'] == 'h' ? 'height' :
obj['attr'] == 'o' ? 'opacity' : 'left';
var start = obj['start'] != undefined ? obj['start'] :
attr == 'opacity' ? parseFloat(getStyle(element, attr)) * 100 :
parseInt(getStyle(element, attr));
var t = obj['t'] != undefined ? obj['t'] : 10; //可选，默认10毫秒执行一次
var step = obj['step'] != undefined ? obj['step'] : 20; //可选，每次运行10像素
var alter = obj['alter'];
var target = obj['target'];
var speed = obj['speed'] != undefined ? obj['speed'] : 6; //可选，默认缓冲速度为6
var type = obj['type'] == 0 ? 'constant' : obj['type'] == 1 ? 'buffer' : 'buffer'; //可选，0表示匀速，1表示缓冲，默认缓冲
if (alter != undefined && target == undefined) {
target = alter + start;
} else if (alter == undefined && target == undefined) {
throw new Error('alter增量或target目标量必须传一个！');
}
if (start > target) step = -step;
if (attr == 'opacity') {
element.style.opacity = parseInt(start) / 100;
element.style.filter = 'alpha(opacity=' + parseInt(start) +')';
} else {
element.style[attr] = start + 'px';
}
clearInterval(window.timer);
timer = setInterval(function () {
if (type == 'buffer') {
step = attr == 'opacity' ? (target - parseFloat(getStyle(element, attr)) * 100) / speed :
(target - parseInt(getStyle(element, attr))) / speed;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
}
if (attr == 'opacity') {
if (step == 0) {
setOpacity();
} else if (step > 0 && Math.abs(parseFloat(getStyle(element, attr)) * 100 - target) <= step) {
setOpacity();
} else if (step < 0 && (parseFloat(getStyle(element, attr)) * 100 - target) <= Math.abs(step)) {
setOpacity();
} else {
var temp = parseFloat(getStyle(element, attr)) * 100;
element.style.opacity = parseInt(temp + step) / 100;
element.style.filter = 'alpha(opacity=' + parseInt(temp + step) + ')'
}
} else {
if (step == 0) {
setTarget();
} else if (step > 0 && Math.abs(parseInt(getStyle(element, attr)) - target) <= step) {
setTarget();
} else if (step < 0 && (parseInt(getStyle(element, attr)) - target) <= Math.abs(step)) {
setTarget();
} else {
element.style[attr] = parseInt(getStyle(element, attr)) + step + 'px';
}
}
//document.getElementById('aaa').innerHTML += step + '<br />';
}, t);
function setTarget() {
element.style[attr] = target + 'px';
clearInterval(timer);
}
function setOpacity() {
element.style.opacity = parseInt(target) / 100;
element.style.filter = 'alpha(opacity=' + parseInt(target) + ')';
clearInterval(timer);
}
}
return this;
};
//自定义拖拽功能
//Base.prototype.drag=function(){return this;}
//插件的入口处
Base.prototype.extend=function(name,fn){
Base.prototype[name]=fn;
};
//页面打开的时候执行
(function () {
window.sys = {}; //让外部可以访问，保存浏览器信息对象
var ua = navigator.userAgent.toLowerCase(); //获取浏览器信息字符串
var s; //浏览器信息数组，浏览器名称+版本
(s = ua.match(/msie ([\d.]+)/)) ? sys.ie = s[1] :
(s = ua.match(/firefox\/([\d.]+)/)) ? sys.firefox = s[1] :
(s = ua.match(/chrome\/([\d.]+)/)) ? sys.chrome = s[1] :
(s = ua.match(/opera\/.*version\/([\d.]+)/)) ? sys.opera = s[1] :
(s = ua.match(/version\/([\d.]+).*safari/)) ? sys.safari = s[1] : 0;
if (/webkit/.test(ua)) sys.webkit = ua.match(/webkit\/([\d.]+)/)[1];
})();
//Dom加载执行
function addDomLoaded(fn){
var isReady=false;//用来标示是否已经执行setInterval方法
var timer=null;//用来标记定时器，在删除定时器的时候可以使用
function doReady(){
if(timer) clearInterval(timer);//定时器存在，清除定时器
if(isReady) return;//如果已经执行过，，下面不用执行
isReady=true;
fn();
}
if((sys.opera && sys.opera < 9) || (sys.firefox && sys.firefox < 3) || (sys.webkit && sys.webkit < 525)){//非主流浏览器的低版本的dom加载
/*第一种方式
timer=setInterval(function(){//定时的检测
if(/loaded|complete/.test(document.readyState)){
doReady();//在定义一个函数方便管理该定时器,loaded是部分加载，有可能只是DOM加载完毕，complete是完全加载，类似于onload
}
},1);*/
//第二种方式
timer=setInterval(function(){
if(document&&document.getElementById&&document.getElementsByTagName&&document.body){
doReady();
}
},1);
}else if(document.addEventListener){//w3c标准的浏览器，谷歌，火狐等
addEvent(document,"DOMContentLoaded",function(){//Dom加载的时候执行
fn();//执行函数
removeEvent(document,"DOMContentLoaded",arguments.callee);//arguments,callee返回是当前的匿名函数
});
}else if(sys.ie && sys.ie < 9){//IE9以下的浏览器
timer=setInterval(function(){
try {
document.documentElement.doScroll('left');
doReady();
}catch(e){}
},1);
}
}
//添加事件（obj：事件对象,type：事件类型（如：click，load等）,fn：事件处理函数）
function addEvent(obj,type,fn){
if(typeof obj.addEventListener!="undefined"){//w3c
obj.addEventListener(type,fn,false);//false表示不捕获
}else{//IE
//创建一个存放事件的哈希表(散列表)
if (!obj.events) obj.events = {};
//第一次执行时执行
if (!obj.events[type]) {
//创建一个存放事件处理函数的数组
obj.events[type] = [];
//把第一次的事件处理函数先储存到第一个位置上
if (obj['on' + type]) obj.events[type][0] = fn;
} else {
//同一个注册函数进行屏蔽，不添加到计数器中
if (addEvent.equal(obj.events[type], fn)) return false;
}
//从第二次开始我们用事件计数器来存储
obj.events[type][addEvent.ID++] = fn;
//执行事件处理函数
obj['on' + type] = addEvent.exec;
}
}
//为每个事件分配一个计数器
addEvent.ID = 1;
//执行事件处理函数
addEvent.exec = function (event) {
var e = event || addEvent.fixEvent(window.event);
var es = this.events[e.type];
for (var i in es) {
es[i].call(this, e);
}
};
//同一个注册函数进行屏蔽
addEvent.equal = function (es, fn) {
for (var i in es) {
if (es[i] == fn) return true;
}
return false;
}
//把IE常用的Event对象配对到W3C中去
addEvent.fixEvent = function (event) {
event.preventDefault = addEvent.fixEvent.preventDefault;
event.stopPropagation = addEvent.fixEvent.stopPropagation;
return event;
};
//IE阻止默认行为
addEvent.fixEvent.preventDefault = function () {
this.returnValue = false;
};
//IE取消冒泡
addEvent.fixEvent.stopPropagation = function () {
this.cancelBubble = true;
};
//跨浏览器删除事件
function removeEvent(obj, type, fn) {
if (typeof obj.removeEventListener != 'undefined') {
obj.removeEventListener(type, fn, false);
} else {
for (var i in obj.events[type]) {
if (obj.events[type][i] == fn) {
delete obj.events[type][i];
}
}
}
}
/跨浏览器获取Style
function getStyle(element, attr) {
//获取外部样式表的设置
if(typeof window.getComputedStyle!='undefined'){//W3C
return window.getComputedStyle(element,null)[attr];
}else if(typeof element.currentStyle !='undefined'){//IE
return element.currentStyle[attr];
}
}
//判断class是否存在
function hasClass(element, className) {
return element.className.match(new RegExp('(\\s|^)' +className +'(\\s|$)'));
}
//由于在较低版本的火狐浏览其中存在点击事件的兼容性问题，阻止浏览器的默认行为
function preDefault(event){
if(event.preventDefault!="undefined"){//w3c
event.preventDefault();
}else{
event.returnValue=false;
}
}接着是创建一个demo,html页面：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="base.js"></script>
<script type="text/javascript" src="base_drag.js"></script>
<script type="text/javascript" src="demo.js"></script>
<script type="text/javascript">
</script>
</head>
<body>
<div id="head">
<div class="logo"><img src="images/topbar_logo.gif" /></div>
<div class="member">个人设置
<ul>
<li><a href="#">修改密码</a></li>
<li><a href="#">博客管理</a></li>
<li><a href="#">私信管理</a></li>
<li><a href="#">好友管理</a></li>
<li><a href="#">设置管理</a></li>
</ul>
</div>
<div class="login">登陆</div>
</div>
<!--定义锁屏层-->
<div id="screen"></div>
<div id="login">
<h2><img src="images/delete.png" class="close"/>网站登陆</h2>
<div class="user">
账号：<input type="text" name="user" class="text" />
</div>
<div class="pass">
密码：<input type="password" name=="password" class="text"/>
</div>
<div class="button"><input type="submit" value="登陆" class="submit"/></div>
<div class="login_foot">忘记密码|注册</div>
</div>
<div id="share">
<h2>分享到</h2>
<ul>
<li><a href="###" class="a">一键分享</a></li>
<li><a href="###" class="b">新浪微博</a></li>
<li><a href="###" class="c">人人网</a></li>
<li><a href="###" class="d">百度相册</a></li>
<li><a href="###" class="e">腾讯朋友</a></li>
<li><a href="###" class="f">豆瓣网</a></li>
<li><a href="###" class="g">百度新首页</a></li>
<li><a href="###" class="h">和讯微博</a></li>
<li><a href="###" class="i">QQ 空间</a></li>
<li><a href="###" class="j">百度搜藏</a></li>
<li><a href="###" class="k">腾讯微博</a></li>
<li><a href="###" class="l">开心网</a></li>
<li><a href="###" class="m">百度贴吧</a></li>
<li><a href="###" class="n">搜狐微博</a></li>
<li><a href="###" class="o">QQ 好友</a></li>
<li><a href="###" class="p">更多...</a></li>
</ul>
<div class="share_footer"><a href="###">百度分享</a><span></span></div>
</div>
</body>
</html>还有style.css样式文件：
#box{
color:#FFFF00;
font-size:25px;
}
body ul {
margin:0;padding:0;
font-size:15px;
}
ul li{
list-style:none;
}
#head{
width:100%;
height:30px;
background:url(images/CP_page.png) repeat-x;
}
#head .logo{
width:100px;
height:30px;
float:left;
}
#head .logo img{
display:block;
}
#head .member{
width:100px;
height:30px;
/*background:#FFDE96;*/
float:right;
text-align:center;
line-height:30px;
cursor:pointer;
/*position:relative;*/
}
#head .member ul{
position:absolute;
width:100px;
background:#FDFDFD;
float:right;
top:35px;
border:1px solid #999;
display:none;
}
#head .member:hover{
background:#808000;
}
#head .member ul li{
height:25px;
line-height:25px;
/*display:inline; letter-spacing:1px;字体间距*/
}
}
#head .member ul a{
text-decoration:none;
color:#333;
display:block;
background:url(images/arrow_down.jpg) no-repeat 3px center;
}
#head .member ul a:hover{
background:#fc0;
display:block;
}
#head .login{
float:right;
margin-right:5px;
width:50px;
top:5px;
height:30px;
/*background:#FFDE96;*/
text-align:center;
cursor:pointer;
line-height:30px;
}
#screen{
position:absolute;
top:0;
left:0;
width:550px;
height:550px;
z-index:9998;
background:#000;
filter:alpha(opacity=30);/*对ie有效*/
opacity:0.3;/*对谷歌，火狐有效*/
display:none;
}
#login{
width:350px;
height:250px;
border:1px solid #999;
position:absolute;/*/设置之后才可以设置top，left'*/
background:#fff;
z-index:9999;
display:none;
text-align:center;
}
#login h2{
margin:0px;
padding:0px;
text-align:center;
background: url(images/CP_page.png) repeat-x;
cursor:move;
}
#login h2 img{
float:right;
margin-top:8px;
margin-right:8px;
cursor:pointer;
position:relative;
}
#login div.user,#login div.pass{
font-size:15px;
color:#666;
text-align:center;
padding:20px 0;
}
#login input.text{
width:230px;
height:25px;
font-size:15px;
color:#000;
border:1px solid #ccc;
background:#fff
}
#login input.submit{
width:105px;
height:45px;
background:url(images/button_user.png) no-repeat;
border:none;
color:#fff;
font-size:20px;
cursor:pointer;
}
#login .login_foot{
font:size:16px;
float:right;
margin-top:15px;
margin-right:15px;
color:#999;
}
#share{
width:210px;
height:315px;
border:1px solid #ccc;
position:absolute;
top:0;
left:-211px;
background:#fff;
}
#share h2{
height:30px;
margin:0;
padding:0;
line-height:30px;
background:#eee;
font-size:14px;
color:#666;
text-indent:10px;
}
#share ul{
height:254px;
padding:3px 0 2px 5px;
}
#share ul li{
width:96px;
height:28px;
float:left;
padding:2px;
}
#share ul li a{
width:95px;
height:26px;
display:block;
text-decoration:none;
color:#666;
line-height:26px;
text-indent:30px;
background-image:url(images/share_bg.png);
background-repeat:no-repeat;
}
#share ul li a.a{
background-position:5px 4px;/*left：5px,top:4px*/
}
#share ul li a.b{
background-position:5px -26px;
}
#share ul li a.c{
background-position:5px -56px;
}
#share ul li a.d{
background-position:5px -86px;
}
#share ul li a.e{
background-position:5px -116px;
}
#share ul li a.f{
background-position:5px -146px;
}
#share ul li a.g{
background-position:5px -176px;
}
#share ul li a.h{
background-position:5px -206px;
}
#share ul li a.i{
background-position:5px -236px;
}
#share ul li a.j{
background-position:5px -266px;
}
#share ul li a.k{
background-position:5px -296px;
}
#share ul li a.l{
background-position:5px -326px;
}
#share ul li a.m{
background-position:5px -356px;
}
#share ul li a.n{
background-position:5px -386px;
}
#share ul li a.o{
background-position:5px -416px;
}
#share ul li a.p{
background-position:5px -446px;
}
#share .share_footer{
height:26px;
position:relative;
}
#share .share_footer a{
position:absolute;
top:7px;
left:120px;
padding:0 0 0 12px;
background:#eee url(images/share_bg.png) no-repeat 0 -477px;
text-decoration:none;
color:#666;
}
#share .share_footer a:hover{
color:#06f;
opacity:0.7;
filter:alpha(opacity=70);
}
#share .share_footer span{
display:block;
width:24px;
height:88px;
position:absolute;
top:-230px;
left:210px;
background:url(images/share.png) no-repeat;
cursor:pointer;
}
最后是执行的demo.js文件：
/实现类似于jquery的dom加载
$(function(){
//设置下拉菜单
$('.member').hover(function(){
$('.member ul').show();
},function(){
$('.member ul').hide();
});
//设置登陆框
var login=$('#login');
var screen=$('#screen');
login.center(350,250).resize(function(){
//login.center(350,250)
//随着浏览器改变重置居中
if(login.css("display")=="block"){//执行动态锁频
screen.lock();
}
});
//设置点击按钮时显示登陆框
$('.login').click(function(){
login.center(350, 250);
login.css("display","block");
screen.lock();
});
//点击取消按钮隐藏登陆框
$('.close').click(function(){
login.css("display","none");
screen.unlock();
});
//拖拽流程：
//1.先点下去
//2.在点下的物体被选中，进行move移动
//3.抬起鼠标，停止移动
//点击某个物体，用oDiv即可，move和up是全局区域，也就是整个文档通用，应该用document
login.drag($('#login h2').first());
//百度分享初始化位置
$('#share').css('top',(getInner().height - parseInt(getStyle($('#share').first(),'height'))) / 2+"px");
//百度分享的收缩效果
$('#share').hover(function(){
$(this).animate({
attr : 'x',
target : 0
});
},function(){
$(this).animate({
attr : 'x',
target : -211
});
});
});本文标签： 自定义JavaScript
版权声明：本文标题：javascript之自定义百度分享 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://www.elefans.com/xitong/1726302014a1065158.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论