BOSS Need a special effect to pop up ads on the front page , therefore webhao On the eve of zongzi Festival , Stay up late to make a mobile phone ad pop-up effect , click tochch
me Small hands , A background with a white curtain and advertising image appears , Click again and the effect disappears , Home page back to normal .

jQuery code :

<script> $(function(){ // The width of the visual window , height var width=$(window).width(); var
height=$(window).height(); // Document width , height var dWidth=$(document).width(); var
dHeight=$(document).height(); // The curtain covers everything $(".screen").css("height",dHeight);
$(".screen").css("width",dWidth); // The width and height of the display picture is the whole screen
$("#pic").css("height",height); $("#pic").css("width",width); // The width of the sidebar button var
block=$("#touchme").css("width"); left=parseInt(width)-parseInt(block)-10;
// Position the sidebar button to the far right $("#touchme").css("left",left); /* No scrolling */ var a=function(e){
e.preventDefault(); e.stopPropagation(); } // click touchme, Add no scrolling event a
$("#touchme").click(function(){ document.addEventListener("touchmove",a,false);
$(".container").css("display","block"); }) // Click on the white background , Remove event a
$(".container").click(function(){ if(document.removeEventListener){
document.removeEventListener("touchmove",a,false); }else{
document.detachEvent("touchmove",a); } $(".container").css("display","none");
}) }) </script>

CSS code :

<style type="text/css"> #touchme{ background: url("img/hi.png") no-repeat;
width:35px; height:35px; position:fixed; top:50%; left:0px; z-index:97; }
/* Pop up effect */ .container{ display:none; } .screen { background: #fff none repeat
scroll 0 0; display: block; left: 0; opacity: 0.8; position: absolute; top: 0;
width: 100%; height:100%; z-index: 98; } #pic { background: rgba(0, 0, 0, 0)
url("img/indexshow.png") no-repeat scroll center center / 200px auto; display:
block; height: 500px; /*margin: 45px 0 0 10px;*/ position: fixed; z-index: 99;
} </style>
HTML code :

<div class="container" > <div class="screen"> <div id="pic"></div> </div>
</div> <div id="touchme"></div>

There were also some problems , For example, I want to get the height of the scroll bar to the top , So it was used on the mobile phone jQuery Of scrolltop Will fail , Because of the problem of time, it has not been studied in depth , The specific solution is unknown , This problem should not exist if mobile terminal framework is used in the development of mobile phone . also ,

background: rgba(0, 0, 0, 0) url("img/indexshow.png") no-repeat scroll center
center / 200px auto;
center center The picture is in the center of the screen , / hinder 200px
auto It refers to the width of the picture , high , belong to css New properties of . As for why auto Instead of height ? Because the specific height is set , The picture will become very blurred . So when we set the width and height of the background image , Try to control the width only , Give way to height auto.

©2019-2020 Toolsou All rights reserved,
Final review of database : Summary of comprehensive application questions Laplance operator ( Second derivative ) Simple learning of computer composition principle pyqt Button call python program _PyQt: Link button to function in program How much can you go up once you change jobs ? Today, I saw the ceiling of job hopping python in str Function usage _python in str Usage Summary of built-in functions MySQL trigger web The server nginx---linux Installation and deployment C++ Chapter V polymorphism exercises :( It's coming to an end )python Check built-in functions , How to check python Built in function