Home > Developer > Web Develop
Websites, some sites always advertise on the bottom right, upper left, or elsewhere.
I use jquery to try to make a self, the code is as follows, if there is a wrong place please advise
1<! DOCTYPE html>2"http://www.w3.org/1999/xhtml">34<meta http-equiv="Content-type"Content="text/html; Charset=utf-8"/>5<title></title>6<script src="Jquery-1.8.3.js"></script>7<script type="Text/javascript">8 $ (function () {9$('#btn'). Click (function () {Ten //Creating Layers One varDivobj = $ ('<div style= "Width:200px;height:200px;position:absolute;right:0;bottom:0;background-color:orange" > </div>'). AppendTo ($ ('Body')); A //Create a Close button in the upper right corner -$('<sapn style= "Float:right;cursor:pointer border:3px solid gray" >X</span>'). Click (function () { -$( This). Parent (). remove (); the }). AppendTo ($ (divobj)); - //Add ad content - - }); + }); -</script> + A<body> at<input type="Button"Name="name"Value="Show Effect"Id="btn"/> -</body> -As follows
On this effect, I have the following thoughts:
1. You can add a timer, Countdown ' and 5S off ', and ' 4S off ', tell users that this ad is only temporary delivery, 5S automatically closed, this can enhance the user's experience, we all know that when browsing some websites, advertising always occupy the place in front of your eyes, the user experience is certainly not very good, this can be very good in the advertiser and user experience between the two to carry out a balance;
2. Background color Choose orange, because Orange is warm, personal experience, if the advertising background is warm words, more willing to let him stay some time, relative than the background color is cool advertising;
3. Of course, this is only a small code, the great god of the content after the completion of the package can be encapsulated, it will certainly be more convenient to use.
Add ads dynamically with jquery
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
