ホームページ >ウェブフロントエンド >jsチュートリアル >Jquery はアニメーション効果を備えた Weibo プラグインを共有するポップアップ レイヤーを実装します。 この Jquery プラグインは非常に実用的な特殊効果で、多くの Web サイトにとって不可欠なプロモーション ツールです。従来の共有プラグインは一般的に Baidu やカナダで使用されていますが、スタイルと外観があまり良くありません。体験効果が低い この作品には共有機能だけでなく、アニメーション効果もあり、ユーザーエクスペリエンスを向上させています。 CSS3を使用しているため、プラグインの効果を最大限に発揮するためには、GoogleやFirefoxなどのブラウザのご利用を推奨いたします。 。 。
源码下载
代码片段(1)
Jquery はアニメーション効果を備えた Weibo プラグインを共有するポップアップ レイヤーを実装します。
この作品には以下の機能が含まれています:
1. ポップアップレイヤー
2. マスクレイヤー
3. CSS3
>
効果は次のとおりです:
ソース コードのダウンロード コード スニペット (1)
$(document).ready(function(e) {
var 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},' easyInOutExpo');
});
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 " ","新しいウィンドウ");
});
//新浪微博
$('#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键导入书签!");
}
}