源码下载
代码片段(1)
Home > Web Front-end > JS Tutorial > body text

Jquery implements pop-up layer sharing Weibo plug-in with animation effect_jquery

WBOY
Release: 2016-05-16 17:38:26
Original
1090 people have browsed it

This Jquery plug-in is a very practical special effect. It is an indispensable promotion tool for many websites. Traditional sharing plug-ins are generally used by Baidu and Canada, but the style and appearance are not very good-looking, and the user experience effect is poor. This The work not only has a sharing function, but also has animation effects, which improves the user experience. Since CSS3 is used, in order to see the best effect of the plug-in, it is recommended that you use browsers such as Google and Firefox. . .

The work includes the following functions:
1. Pop-up layer
2. Mask layer
3. Animation effect
4. CSS3

The effect is as follows:
Jquery implements pop-up layer sharing Weibo plug-in with animation effect_jquery
Source code download
Code snippet (1)

Copy the code The code is as follows:

$(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 : '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键导入书签!");
}
}
Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template