源码下载
代码片段(1)
首頁 > web前端 > js教程 > Jquery實作彈出層分享微博插件具備動畫效果_jquery

Jquery實作彈出層分享微博插件具備動畫效果_jquery

WBOY
發布: 2016-05-16 17:38:26
原創
1121 人瀏覽過

此Jquery插件是一款非常實用的特效,是很多網站不可缺少的推廣神兵利器,傳統的一般都用百度、加網的分享插件,但樣式外觀都不太好看,用戶體驗效果差一點,此作品不但有分享功能,也具備了動畫效果,提升了使用者體驗。由於用了CSS3,為了可以看到插件的最佳效果,建議大家使用Google、火狐等瀏覽器。 。 。

作品包含以下功能
1、彈出層
2、遮罩層
3、動畫效果
4、CSS3

3、動畫效果4、CSS3
Jquery實作彈出層分享微博插件具備動畫效果_jquery效果如下
 

原始碼下載

程式碼片段(1)
複製程式碼 程式碼如下:

$(document).ready(function(e) {
var share_html = "";
//share_html = ''
share_html = '
'
share_html = '
  • '
    share_html = '
  • '
    share_html = '
  • ';
    share_html = '
  • ';
    share_html = '
  • '
    share_html = ' ';
    share_html = '
    ';
    $('body').prepend(share_html);
    $('.share').SmohanPopLayer({Shade : true,Event:'click',Content : '分享', Title : '分享Smohan到兩大社群'});
    $('#分享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},'輕鬆InOutExpo');
    });
    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");
    });
    //新浪微博
    $('#分享li a.share2').click(function(e) {
    var param = {
    url:share_url ,
    appkey:'678438995 ',
    title:share_title,
    pic:share_pic,
    ralateUid:'3061825921',
    ralateUid:'3061825921',
    ()
    }
    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')
    });
    //朋友
    $('#分享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
    $('#分享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
    $(>});
    //kaixin
    $( '#分享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鍵導入書籤! ");
    }
    }
    相關標籤:
    來源:php.cn
    本網站聲明
    本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
    熱門教學
    更多>
    最新下載
    更多>
    網站特效
    網站源碼
    網站素材
    前端模板