Jquery實現(xiàn)彈出層分享微博插件具備動畫效果
更新時間:2013年04月03日 16:44:47 作者:
此Jquery插件是一款非常實用的特效,不但有分享功能,還具備了動畫效果,提高了用戶體驗,感興趣的朋友可以參考下哈
此Jquery插件是一款非常實用的特效,是很多網(wǎng)站不可缺少的推廣神兵利器,傳統(tǒng)的一般都用百度、加網(wǎng)的分享插件,但樣式外觀都不怎么好看,用戶體驗效果差一點,此作品不但有分享功能,還具備了動畫效果,提高了用戶體驗。由于用了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="分享到人人網(wǎng)"><a href="javascript:void(0)" class="share3" ></a><span></span></li>';
share_html += '<li title="分享到朋友網(wǎng)"><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="分享到開心網(wǎng)"><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到各大社區(qū)'});
$('#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"; //默認(rèn)的分享圖片
var share_from = encodeURIComponent("水墨寒個人官方網(wǎng)站"); //分享自(僅用于QQ空間和朋友網(wǎng),新浪的只需更改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=水墨寒個人官方網(wǎng)站','newwindow');
});
});
/*加入收藏*/
function addfavorite(){
var Url = "http://www.smohan.net";
var Title = "水墨寒個人官網(wǎng)";
if(document.all){
window.external.addFavorite(Url,Title);
}else if(window.sidebar){
window.sidebar.addPanel(Title,Url,"");
}else{
alert("請使用Ctrl+D鍵導(dǎo)入書簽!");
}
}
作品包括以下功能:
1、彈出層
2、遮罩層
3、動畫效果
4、CSS3
效果如下:

源碼下載
代碼片段(1)
復(fù)制代碼 代碼如下:
$(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="分享到人人網(wǎng)"><a href="javascript:void(0)" class="share3" ></a><span></span></li>';
share_html += '<li title="分享到朋友網(wǎng)"><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="分享到開心網(wǎng)"><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到各大社區(qū)'});
$('#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"; //默認(rèn)的分享圖片
var share_from = encodeURIComponent("水墨寒個人官方網(wǎng)站"); //分享自(僅用于QQ空間和朋友網(wǎng),新浪的只需更改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=水墨寒個人官方網(wǎng)站','newwindow');
});
});
/*加入收藏*/
function addfavorite(){
var Url = "http://www.smohan.net";
var Title = "水墨寒個人官網(wǎng)";
if(document.all){
window.external.addFavorite(Url,Title);
}else if(window.sidebar){
window.sidebar.addPanel(Title,Url,"");
}else{
alert("請使用Ctrl+D鍵導(dǎo)入書簽!");
}
}
您可能感興趣的文章:
- jQuery彈出層插件popShow用法示例
- jQuery Dialog 彈出層對話框插件
- JQUERY THICKBOX彈出層插件
- jQuery彈出層插件簡化版代碼下載
- Jquery 彈出層插件實現(xiàn)代碼
- 基于jquery的blockui插件顯示彈出層
- jquery.artwl.thickbox.js 一個非常簡單好用的jQuery彈出層插件
- jQuery插件zoom實現(xiàn)圖片全屏放大彈出層特效
- 一個jquery的彈出層的插件
- jQuery boxy彈出層插件中文演示及使用講解
- js彈出層(jQuery插件形式附帶reLoad功能)
- jQuery彈出層插件Lightbox_me使用指南
- Jquery彈出層插件ThickBox的使用方法
- jQuery彈出層插件popShow(改進版)用法示例
相關(guān)文章
asp.net+jquery滾動滾動條加載數(shù)據(jù)的下拉控件
由于需求需要用到一個滾動滾動條加載數(shù)據(jù)的下拉列表(假如數(shù)據(jù)1000條,下拉列表開始只顯示100條,當(dāng)用戶下拉滾到條到最底下時,再加載下一個100條,如此循環(huán))2010-06-06jQuery中Datatables增加跳轉(zhuǎn)到指定頁功能
本文給大家分享jquery中datatable增加跳轉(zhuǎn)到指定頁面功能以及jquery datatable中加入雙擊跳轉(zhuǎn)功能的實例代碼,需要的朋友參考下2017-02-02EasyUI Combobox設(shè)置默認(rèn)值 獲取text的方法
這篇文章主要介紹了EasyUI Combobox設(shè)置默認(rèn)值 獲取text的方法,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2016-11-11Jquery 數(shù)據(jù)選擇插件Pickerbox使用介紹
目前市面上很少見或幾乎沒有這數(shù)據(jù)(對象)選擇插件.比如,點擊input , select 元素時彈出div(窗口),載入數(shù)據(jù)讓用戶選擇數(shù)據(jù),選擇后在填充回對應(yīng)的元素.2012-08-08EasyUI框架 使用Ajax提交注冊信息的實現(xiàn)代碼
這篇文章主要介紹了EasyUI框架 使用Ajax提交注冊信息的實現(xiàn)代碼的相關(guān)資料,希望通過本文能幫助到大家,需要的朋友可以參考下2017-09-09jQuery動態(tài)添加.active 實現(xiàn)導(dǎo)航效果代碼思路詳解
這篇文章主要介紹了jQuery動態(tài)添加.active 實現(xiàn)導(dǎo)航效果代碼思路詳解,需要的朋友可以參考下2017-08-08