jquery implementation of the pop-up layer sharing micro-blog plug-ins have animation effect _jquery

Source: Internet
Author: User
This jquery plugin is a very useful special effect, is a lot of sites are indispensable to promote the weapons of God, the traditional general use of Baidu, add a network of sharing plug-ins, but the style looks are not good-looking, the user experience almost, this work not only has the sharing function, but also has the animation effect, enhances the user experience. Because of the use of CSS3, in order to be able to see the best effect of plug-ins, we recommend that you use Google, Firefox and other browsers ...

works include the following features
1, pop-up Layer
2, Mask Layer
3, animation effect
4, CSS3

The effect is as follows

SOURCE download
Code Snippets (1)
Copy Code code as follows:

$ (document). Ready (function (e) {
var share_html = "";
share_html + = ' <a href= ' javascript:void (0) "id=" Smohan_share "title=" Share "></a>";
share_html = ' <div id= ' share ' ><ul> ';
share_html + + <li title= "share to QQ space" ><a href= "javascript:void (0)" class= "Share1" ></a><span> </span></li> ';
share_html = ' <li title= ' share to Sina Weibo "><a href=" javascript:void (0) "class=" Share2 "></a><span> </span></li> ';
share_html + + <li title= "share to Renren" ><a href= "javascript:void (0)" class= "Share3" ></a><span> </span></li> ';
share_html + = ' <li title= ' share to friend Net "><a href=" javascript:void (0) "class=" Share4 "></a><span> </span></li> ';
share_html = ' <li title= ' share to Tencent Weibo "><a href=" javascript:void (0) "class=" Share5 "></a><span> </span></li> ';
share_html + = ' <li title= ' share to Happy net "><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: ' Share Smohan to each big community '});
$ (' #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"; Default Share Picture
var share_from = encodeURIComponent ("Ink Cold Individual Official website"); Share from (only for QQ space and friends net, Sina's only change Appkey and Ralateuid on line)
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= Ink Cold Personal official website ', ' NewWindow ');
});
});
/* Join Collection * *
function Addfavorite () {
var Url = "Http://www.smohan.net";
var Title = "Ink Cold personal official website";
if (document.all) {
Window.external.addFavorite (Url,title);
}else if (Window.sidebar) {
Window.sidebar.addPanel (Title,url, "");
}else{
Alert (Use the Ctrl+d key to import bookmarks!) ");
}
}

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.