Post MY
How do I make an post my?
What is a post my? How do you make a post my? This script and codes were developed by Xdsnet on 26 August 2022, Friday.
Post MY - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>post MY</title> <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="quote-box"> <div class="quote-text"> <i class="fa fa-quote-left"></i><span id="text"><!--引用文字展示位置--></span> </div> <div class="quote-author"> --<span id="author"><!--文字作者位置--></span> </div> <div class="buttons"><!--放置系列按钮--> <a class="button" id="tweet-fb" title="在Twitter发布!" target="_blank"> <i class="fa fa-twitter"></i> </a> <button class="button" id="new-quote">新引用</button> </div>
</div>
<div class="footer"> by <a href="http://codepen.io/xdsnet/">xdsnet</a></div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Post MY - Script Codes CSS Codes
*{ margin: 0; padding: 0; list-style: none; vertical-align: baseline;
}
div { position: relative; z-index: 2;
}
body { background-color: #333; color: #333; font-family: sans-serif; font-weight: 400;
}
.quote-box { border-radius: 3px; position: relative; margin: 8% auto auto auto; width: 550px; padding: 40px 50px; display: table; background-color: #fff;
}
.quote-box .quote-text { text-align: left; width: 550px; height: auto; clear: both; font-weight: 500; font-size: 1.75em;
}
.quote-box .quote-author { width: 550px; height: auto; clear: both; padding-top: 20px; font-size: 1em; text-align: right;
}
.quote-box .buttons { width: 550px; margin: auto; display: block;
}
.quote-box .buttons .button { height: 38px; border: none; border-radius: 3px; color: #fff; background-color: #333; outline: none; font-size: 0.85em; padding: 8px 18px 6px 18px; margin-top: 30px; opacity: 1; cursor: pointer;
}
.quote-box .buttons .button:hover { opacity: 0.9;
}
.quote-box .buttons .button#tweet-fb { float: left; padding: 0px; padding-top: 8px; text-align: center; font-size: 1.2em; margin-right: 5px; height: 30px; width: 40px;
}
.quote-box .buttons .button#new-quote { float: right;
}
.footer { width: 550px; text-align: center; display: block; margin: 15px auto 30px auto; font-size: 0.8em; color: #fff;
}
.footer a { font-weight: 500; text-decoration: none; color: #eee;
}
Post MY - Script Codes JS Codes
// 定义切换颜色组
var colors = ['#555555', '#33ffee', '#22ccff','#ffee11', '#349823', '#2f4c3e'];
var currentQuote = '';// 获取的引言文字
var currentAuthor = '';// 作者
function tweetURL(c,a){ return ('https://twitter.com/intent/tweet?hashtags=quotes&related=freecodecamp&text=' + encodeURIComponent('"' + c + '" ' + a));
}
function getQuote() { // 利用ajax获取引言 $.ajax({ headers: { Accept: "application/json", "Content-Type": "application/x-www-form-urlencoded" }, url: 'http://api.tianapi.com/txapi/dictum/?key=9e2835f96e3842d3a4243032a287a16e', success: function(response) { var r=response; currentQuote = r.newslist[0].content; currentAuthor = r.newslist[0].mrname; $('#tweet-fb').attr('href', tweetURL( currentQuote , currentAuthor)); $(".quote-text").animate({ //处理展示动态效果 opacity: 0 }, 500, function() { $(this).animate({ opacity: 1 }, 500); $('#text').text(currentQuote); }); $(".quote-author").animate({ //处理展示动态效果 opacity: 0 }, 500, function() { $(this).animate({ opacity: 1 }, 500); $('#author').html(currentAuthor); }); var color = Math.floor(Math.random() * colors.length); $("html body").animate({ backgroundColor: colors[color], color: colors[color] }, 1000); $(".button").animate({ backgroundColor: colors[color] }, 1000); } });
}
$(document).ready(function() { getQuote(); $('#new-quote').on('click', getQuote);
});
Developer | Xdsnet |
Username | xdsnet |
Uploaded | August 26, 2022 |
Rating | 3 |
Size | 3,123 Kb |
Views | 44,528 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
A Pen by xdsnet | 4,135 Kb |
Wikipedia Search | 4,766 Kb |
Your weather | 2,981 Kb |
Xdsnet JSQ | 2,878 Kb |
My short log | 3,354 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Addthis_button | Esambino | 1,691 Kb |
C.Rowe Button | Brownerd | 2,473 Kb |
Mega menu | DimaZubkov | 5,066 Kb |
Animated Donut Chart | Jplhomer | 3,808 Kb |
Calculator - codevember 08 - 2016 | Caiocares | 3,260 Kb |
Menu | Vivi_Lai | 1,210 Kb |
Out of the blue | Giaco | 2,537 Kb |
Replace url via jquery | Serluk | 1,429 Kb |
A Pen by Kenny Mark | Kennymark | 5,574 Kb |
The Fly | GianlucaGuarini | 3,405 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!