第一百四十三节,JavaScript,利用封装库做百度分享
JavaScript,利用封装库做百度分享
效果图
html代码
<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>
css代码
/*百度分享*/
#share {
width:210px;
height:315px;
border:1px solid #ccc;
position:absolute;
top:;
left:-211px;
background:#fff;
}
#share h2 {
height:30px;
line-height:30px;
background:#eee;
padding:;
margin:;
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 {
display:block;
width:95px;
height:26px;
line-height:26px;
text-decoration:none;
color:#666;
background-image:url('img/share_bg.png');
background-repeat:no-repeat;
text-indent:30px;
}
#share ul li a.a {
background-position:5px 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.n {
background-position:5px -356px;
}
#share ul li a.m {
background-position:5px -386px;
}
#share ul li a.o {
background-position:5px -416px;
}
#share ul li a.p {
background-position:5px -446px;
}
#share ul li a:hover {
opacity:0.7;
filter:alpha(opacity=70);
background-color:#eee;
color:#06f;
}
#share .share_footer {
height:26px;
background:#eee;
position:relative;
}
#share .share_footer a {
position:absolute;
top:7px;
left:140px;
padding:0 0 0 13px;
background:#eee url('img/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:-178px;
left:210px;
background:url('img/share.png') no-repeat;
cursor:pointer;
}
前台js代码
// 百度分享
$('#share').c_css('top',(getInner().height - yuan_su_da_xiao($('#share').jie_dian[0]).height) / 2 + 'px');
$('#share').chuang_kou_shi_jian(function () {
$('#share').c_css('top',(getInner().height - yuan_su_da_xiao($('#share').jie_dian[0]).height) / 2 + 'px');
});
$('#share').shu_biao_yi_ru_yi_chu(function () {
$(this).yi_dong_tou_ming({
'attr': 'x', //动画模式
'target': 0 //目标量
});
},function () {
$(this).yi_dong_tou_ming({
'attr': 'x', //动画模式
'target': -211 //目标量
});
});
首先要引入函数库和封装库
第一百四十三节,JavaScript,利用封装库做百度分享的更多相关文章
- 第一百四十二节,JavaScript,封装库--运动动画和透明度动画
JavaScript,封装库--运动动画和透明度动画 /** yi_dong_tou_ming()方法,说明 * * yi_dong_tou_ming()方法,将一个元素,进行一下动画操作 * 1,x ...
- 第一百四十九节,封装库--JavaScript,表单验证--验证用户名
封装库--JavaScript,表单验证--验证用户名 注册验证功能,顾名思义就是验证表单中每个字段的合法性,如果全部合法才可以提交表单. 效果图 聚集光标时 信息不合法是 信息合法时 html &l ...
- 第一百四十八节,封装库--JavaScript,菜单切换
第一百四十八节,封装库--JavaScript,菜单切换 首先在封装库封装点击切换方法 /** dian_ji_qie_huan()方法,设置点击切换,将元素设置成点击切换,也就是点击目标元素后,循环 ...
- 第一百三十三节,JavaScript,封装库--弹出登录框
JavaScript,封装库--弹出登录框 封装库,增加了两个方法 yuan_su_ju_zhong()方法,将获取到的区块元素居中到页面,chuang_kou_shi_jian()方法,浏览器窗口事 ...
- 第一百四十节,JavaScript,封装库--浏览器检测
JavaScript,封装库--浏览器检测 在函数库编写一个,浏览器检测对象 /** sys浏览器检测对象,对象下有两个属性,liu_lan_qi属性和xi_tong属性 * liu_lan_qi属性 ...
- 第一百三十九节,JavaScript,封装库--CSS选择器
JavaScript,封装库--修改元素选择器 就是将构造库函数修改成元素选择器,像css那样,输入#xxx .xxx xxx (获取指定id下的指定class下的指定标签元素) 修改后的基础库 / ...
- 第一百三十六节,JavaScript,封装库--事件绑定
JavaScript,封装库--事件绑定 在函数库添加两个函数 添加事件绑定函数 删除事件绑定函数 添加事件绑定函数 /** addEvent()函数库函数,跨浏览器添加事件绑定,注意:传入事件名称时 ...
- 第一百三十五节,JavaScript,封装库--拖拽
JavaScript,封装库--拖拽 封装库新增1个拖拽方法 /** tuo_zhuai()方法,将一个弹窗元素实现拖拽功能 * 注意:一般需要在css文件将元素里的某一个区块光标设置成提示可以拖拽, ...
- 第一百三十四节,JavaScript,封装库--遮罩锁屏
JavaScript,封装库--遮罩锁屏 封装库新增1个方法 /** zhe_zhao_suo_ping()方法,将一个区块元素设置成遮罩锁屏区块 * 注意:一般需要在css文件将元素设置成隐藏 ** ...
随机推荐
- PHP Warning exec() has been disabled for security reasons怎么办
如果是PHPNOW,还是找到php-apache2handler.ini这个文件,把禁用的函数去掉即可. 注意是这个文件夹
- Python自省 type(),dir(),getattr(),hasattr(),isinstance().
Python自省 这个也是python彪悍的特性. 自省就是面向对象的语言所写的程序在运行时,所能知道对象的类型.简单一句就是运行时能够获得对象的类型.比如type(),dir(),getattr() ...
- [转]bing壁纸天天换 初识shell魅力
原文链接:http://www.cnblogs.com/atskyline/p/3679522.html 原文的程序跑在window上,curl的使用不太一样,想要获取的图片也不太一样.修改后的代码如 ...
- CDN新应用和客户
目前的CDN配置服务主要应用于证券.金融保险.ISP.ICP.网上交易.门户网站.大中型公司.网络教学等领域.另外在行业专网.互联网中都可以用到,甚至可以对局域网进行网络优化.利用CDN,这些网站无需 ...
- ant Table td 溢出隐藏(省略号)
1.创建组件 components/LineWrap/index.js /** * td 溢出隐藏 组件 */ import React, { PureComponent } from 'react' ...
- 2 自己编写:AppDelegate,CCApplication,CCApplicationProtocol
1 CCApplicationProtocol.h /* * CCApplicationProtocol.h * * Created on: 2014年10月19日 * Author: t ...
- Idea golang "can’t find import" 解决方法
如题,在使用leveldb go wrapper levigo 的时候,本地安装好levigo后,通过命令行编译代码正常并能work,但在Idea中使用时出现: can't find import & ...
- JavaScript中逻辑运算符
一.JavaScript“逻辑”运算符 很多学习 JavaScript的人,容易被 JavaScript 的逻辑运算符的运算规则搞晕.为什么呢?因为JavaScript的逻辑运算符和其他语言(比如:j ...
- Chrome应用技巧之颜色拾取
之前在Chrome应用店找了个插件实现拾色功能.并且很不理想.不知道是不是曾经Chrome自带的开发工具没提供到拾色功能还是我没发现.今天无意中发现Chomer自带的开发工具可拾色,请看以下的GIF动 ...
- Vivado Logic Analyzer的使用(一)
本文基于Vivado 2014.2,通过一个简单的设计来讨论Vivado Logic Analyzer的功能. 在上一篇http://blog.chinaaet.com/detail/37242中,设 ...