Jquery实现弹出层分享微博插件具备动画效果

此Jquery插件是一款非常实用的特效,是很多网站不可缺少的推广神兵利器,传统的一般都用百度、加网的分享插件,但样式外观都不怎么好看,用户体验效果差一点,此作品不但有分享功能,还具备了动画效果,提高了用户体验。由于用了CSS3,为了可以看到插件的最佳效果,建议大家使用谷歌、火狐等浏览器。。。

作品包括以下功能
1、弹出层
2、遮罩层
3、动画效果
4、CSS3

效果如下
 
源码下载
代码片段(1)


代码如下:

$(document).ready(function(e) {
var share_html = "";
//share_html += '<a href="javascript:void(0)" id="smohan_share" title="分享"></a>';
share_html += '<div id="Share"><ul>';
share_html += '<li title="分享到QQ空间"><a href="javascript:void(0)" class="share1"></a><span></span></li>';
share_html += '<li title="分享到新浪微博"><a href="javascript:void(0)" class="share2"></a><span></span></li>';
share_html += '<li title="分享到人人网"><a href="javascript:void(0)" class="share3" ></a><span></span></li>';
share_html += '<li title="分享到朋友网"><a href="javascript:void(0)" class="share4"></a><span></span></li>';
share_html += '<li title="分享到腾讯微博"><a href="javascript:void(0)" class="share5"></a><span></span></li>';
share_html += '<li title="分享到开心网"><a href="javascript:void(0)" class="share6"></a><span></span></li>';
share_html += '</ul></div>';
$('body').prepend(share_html);
$('.share').SmohanPopLayer({Shade : true,Event:'click',Content : 'Share', Title : '分享Smohan到各大社区'});
$('#Share li').each(function() {
$(this).hover(function(e) {
$(this).find('a').animate({ marginTop: 2}, 'easeInOutExpo');
$(this).find('span').animate({opacity:0.2},'easeInOutExpo');
},function(){
$(this).find('a').animate({ marginTop: 12}, 'easeInOutExpo');
$(this).find('span').animate({opacity:1},'easeInOutExpo');
});
});
var share_url = encodeURIComponent(location.href);
var share_title = encodeURIComponent(document.title);
var share_pic = "http://www.smohan.net/images/smohan.png"; //默认的分享图片
var share_from = encodeURIComponent("水墨寒个人官方网站"); //分享自(仅用于QQ空间和朋友网,新浪的只需更改appkey 和 ralateUid就行)
//Qzone
$('#Share li a.share1').click(function(e) {
window.open("http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url="+share_url+"&title="+share_title+"&pics="+share_pic+"&site="+share_from+"","newwindow");
});
//Sina Weibo
$('#Share li a.share2').click(function(e) {
var param = {
url:share_url ,
appkey:'678438995',
title:share_title,
pic:share_pic,
ralateUid:'3061825921',
rnd:new Date().valueOf()
}
var temp = [];
for( var p in param ){
temp.push(p + '=' + encodeURIComponent( param[p] || '' ) )
}
window.open('http://v.t.sina.com.cn/share/share.php?' + temp.join('&'));
});
//renren
$('#Share li a.share3').click(function(e) {
window.open('http://widget.renren.com/dialog/share?resourceUrl='+share_url+'&title='+share_title+'&images='+share_pic+'','newwindow');
});
//pengyou
$('#Share li a.share4').click(function(e) {
window.open('http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?to=pengyou&url='+share_url+'&pics='+share_pic+'&title='+share_title+'&site='+share_from+'','newwindow');
});
//tq
$('#Share li a.share5').click(function(e) {
window.open('http://share.v.t.qq.com/index.php?c=share&a=index&title='+share_title+'&site='+share_from+'&pic='+share_pic+'&url='+share_url+'','newwindow');
});
//kaixin
$('#Share li a.share6').click(function(e) {
window.open('http://www.kaixin001.com/repaste/bshare.php?rtitle='+share_title+'&rurl='+share_url+'&from=水墨寒个人官方网站','newwindow');
});
});
/*加入收藏*/
function addfavorite(){
var Url = "http://www.smohan.net";
var Title = "水墨寒个人官网";
if(document.all){
window.external.addFavorite(Url,Title);
}else if(window.sidebar){
window.sidebar.addPanel(Title,Url,"");
}else{
alert("请使用Ctrl+D键导入书签!");
}
}

(0)

相关推荐

  • jQuery弹出层插件popShow(改进版)用法示例

    本文实例讲述了jQuery弹出层插件popShow(改进版)用法.分享给大家供大家参考,具体如下: 前面一篇<jQuery弹出层插件popShow用法示例>分析了popShow插件的基本用法,这里再对插件进行一番改进. popShow弹出层 图1.1 弹出层效果 1.引入JS和CSS文件 <link href="popShow.css" rel="stylesheet" type="text/css" /> <scr

  • jQuery插件zoom实现图片全屏放大弹出层特效

    1.介绍 jQuery制作zoom图片全屏放大弹出层插件. 2.使用方法 1.引入以下的js和css文件 <link rel="stylesheet" href="css/zoom.css" media="all" /> <script src="js/jquery-1.9.1.min.js"></script> <script src="js/zoom.min.js&quo

  • jQuery boxy弹出层插件中文演示及使用讲解

    使用该jQuery插件 要想使用该jQuery插件,需要把$(selector).boxy();放在document.ready中.使用合适的选择器表达式替换这里的"selector",例如:"a[rel=boxy],form.with-confirmation".这会给匹配的元素附加一些行为,如下: 一个href属性中如果锚点包含#,则此锚点相对应的ID的DOM元素的内容就会被添加到boxy对话框中. 如果href锚点内容为其他一些东西,则会试图使用Ajax载入其

  • js弹出层(jQuery插件形式附带reLoad功能)

    之前做一个项目,感觉里面的弹出层做的挺好,但是代码结构有问题,这次用到了,重构了一下,改成jQuery的插件形式,并增加了reLoad的功能,感觉还不错,代码如下: 复制代码 代码如下: (function($){ $.module={ _showCoverLayer:function(){//显示遮盖层 this.coverLayer=$("#TB_overlay"); var height=$(document).height()+"px"; var width

  • Jquery弹出层插件ThickBox的使用方法

    thickbox是jQuery的一个插件,其作用是弹出对话框.网页框,使用户体验度更加愉悦,下面就来简单介绍它的几种用法. 声明一下:这只是个人的总结记载而已. 准备工作:你需要三个文件:thickbox.js.thickbox.css.jquery.js,网上到处可下 具体使用: 第一步:将这三个文件引入到你要使用thickbox的页面 复制代码 代码如下: <script type="text/javascript" src="jquery.js">

  • jquery.artwl.thickbox.js 一个非常简单好用的jQuery弹出层插件

    最终效果: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>弹出层插件:jquery.artwl.thickbox.js</title> <script src="/js_lib/jQuery-1

  • Jquery 弹出层插件实现代码

    直接看代码: 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Layer.aspx.cs" Inherits="Layer" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/

  • jQuery弹出层插件popShow用法示例

    本文实例讲述了jQuery弹出层插件popShow用法.分享给大家供大家参考,具体如下: popShow弹出层 图1.1 弹出层效果 1.引入JS和CSS文件 <link href="popShow.css" rel="stylesheet" type="text/css" /> <script src="/js/common/jquery.min.js" type="text/javascript

  • jQuery弹出层插件简化版代码下载

    复制代码 代码如下: String.prototype.replaceAll = function(s1,s2){  return this.replace(new RegExp(s1,"gm"),s2);  }; (function($){  /*  * $-layer 0.1 - New Wave Javascript  *  * Copyright (c) 2008 King Wong * $Date: 2008-10-09 $ */ var ___id___ = "&

  • 一个jquery的弹出层的插件第1/2页

    复制代码 代码如下: String.prototype.replaceAll = function(s1,s2){ return this.replace(new RegExp(s1,"gm"),s2); }; (function($){ /* * $-layer 0.1 - jquery pulg-in * * Copyright (c) 2008 King Wong * $Date: 2008-09-28 $ */ var ___win___ = window.self; var

  • jQuery弹出层插件Lightbox_me使用指南

    网站开发过程中,为了增加网站交互效果,我们有时需要在当前页面弹出诸如登陆.注册.设置等窗口.而这些窗口就是层,弹出的窗口就是弹出层.jQuery中弹出层插件很多,但有些在html5+css3浏览器下,支持完美.而在例如ie8一下的浏览器下显示不出应有的效果.例如jquery.avgrund插件在ie8下就无法显示. 本文介绍的插件Lightbox_me可以完美的支持chrome,firefox和ie7,ie8,ie9等主流浏览器. 1.Lightbox_me插件功能 用于显示弹出层 2.Ligh

  • 基于jquery的blockui插件显示弹出层

    blockui可以在你发送ajax请求的时候,显示一个遮罩层禁止用户对页面进行操作并显示提示信息:或者用来显示一个登陆窗口,也可用来显示图片等. blockui插件主要使用blockUI和unblockUI两个方法来控制弹出层的显示或者隐藏,可以在blockUI方法中指定一些参数,来控制弹出层显示的内容,大小,位置等.blockUI方法的常用的参数有:message,css,overlayCSS,showOverlay. message:主要用来设置要显示的内容,可以直接设置为一段文字,html

  • jQuery Dialog 弹出层对话框插件

    原理很简单,通过JS动态构建一个div层,将其插入到body中,然后通过调整position的CSS属性为absolute或fixed,使其脱离原来的文档流的位置.再通过适当的加工美化就成了. 复制代码 代码如下: <!-- 背景遮盖层 --> <div class="dialog-overlay"></div> <!-- 对话框 --> <div class="dialog"> <div class

  • JQUERY THICKBOX弹出层插件

    .THICKBOX支持一下浏览器: Windows IE 6.0, Windows IE 7+, Windows FF 2.0.0.6+, Windows Opera 9.0+, Macintosh Safari 2.0.4+, Macintosh FF 2.0.0.6+, Macintosh Opera 9.10--但是据我的使用,IE6还是有点问题的!下面我们首先来看它的调用: 1.肯定你先要下载jquery.js和thickbox.js了.还有thickbox.css也不能少! 复制代码

随机推荐