我想用一个JS把网页中的图片在屏幕的中间
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了我想用一个JS把网页中的图片在屏幕的中间相关的知识,希望对你有一定的参考价值。
哪个有源码?我想加在我自己的网站上.可是在网上怎么也找不到.就是想他随页面滚动而滚动?
参考技术A <html xmlns=" http://www.w3.org/1999/xhtml"> <head> <title>标题页</title> <SCRIPT LANGUAGE="javascript"> function initdiv() imgwidth=100; //图像的宽度 imgheight=120; //图像的高度 if (navigator.appName == "Netscape") //netscape下的位置设置 horz=".left"; vert=".top"; docStyle="document."; styleDoc=""; innerW="window.innerWidth"; innerH="window.innerHeight"; offsetX="window.pageXOffset"; offsetY="window.pageYOffset"; else //ie下的位置设置 horz=".pixelLeft"; vert=".pixelTop"; docStyle=""; styleDoc=".style"; innerW="document.body.clientWidth"; innerH="document.body.clientHeight"; offsetX="document.body.scrollLeft"; offsetY="document.body.scrollTop"; document.getElementById("advLayer").style.display="block"; checkLocation(); function checkLocation() objectXY="advLayer"; //获取始终显示在右下角的div var availableX=eval(innerW); //最大x坐标 var availableY=eval(innerH); //最大y坐标 var currentX=eval(offsetX); //鼠标当前的x坐标 var currentY=eval(offsetY); //鼠标当前的y坐标 x=5; //最终div的x坐标 y=availableY-(imgheight+20)+currentY;//最终div的y坐标 evalMove(); window.setInterval("checkLocation()",1); function evalMove() //移动到指定位置 eval(docStyle + objectXY + styleDoc + horz + "=" + x); eval(docStyle + objectXY + styleDoc + vert + "=" + y); </script> </head> <body bgcolor="#fef4d9" onLoad="initdiv()"> <div id="advLayer" style="position:absolute; display:none; visibility:show; left:8px; top:48px; z-index:2"> <div style="background-color:#333333; width:240px; height:120px;"> <embed src=" http://a.alimama.cn/widget/yr1/yr1any.swf?r=0.35722424139478703 " flashvars="count=20&catid=50008899&h_h=120&h_w=240&sz=9999&type=1&i=mm_14374980_0_0&st_tc=3366CC&st_bgc=FFFFFF&st_bdc=CCCCCC&st_pc=434343&st_lg=2&st_pb=0" width="240" height="120" quality="high" bgcolor="#ffffff" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage=" http://www.macromedia.com/go/getflashplayer" /> </div> </div> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> </body> </html>采纳哦本回答被提问者采纳
我想用JS HTML CSS JQuery创建一个预加载屏幕(可选),没有后端
我想创建一个Pre Loading Screen
,因此,如果我的网站加载时间太晚,它可以防止用户离开我的页面。我已经准备好要在加载屏幕时显示的所有动画,并将所有动画放在一个名为loadup的div中。我希望加载div在开始时显示,并在页面加载时消失。我希望div在加载时具有白色背景,而不是叠加。
答案
jQuery window.load方法在加载所有内容(如图像,js等之后工作。预加载div从一开始就覆盖整个屏幕,当所有内容加载完成时,它将设置为display:none。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="assets/app.css">
<title>Preloading Screen</title>
</head>
<body>
<div class="pre-load">
<p class="pre-load-text">Hello world</p>
</div>
<div class="page-main">
<header>Your header</header>
<div class="container">
<p>Your page content</p>
</div>
<footer>Your footer</footer>
</div>
<script
src="https://code.jquery.com/jquery-1.12.4.min.js"
integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
crossorigin="anonymous">
</script>
<script>
$(window).load(function() {
$('.pre-load').css('display', 'none')
})
</script>
</body>
</html>
以上是关于我想用一个JS把网页中的图片在屏幕的中间的主要内容,如果未能解决你的问题,请参考以下文章
我想用python抓取网页里的图片,地址,商铺名,电话号码,怎么写代码
想用jQuery mobile js 做网页的自适应大小宽度的改变,就是当网页宽度变小时页面还是显示的原来所有内容