В этой статье описывается метод JS для достижения плавающего эффекта изображения. Поделитесь этим для вашей ссылки. Конкретный анализ заключается в следующем:
Описание: Когда вы откроете веб -страницу, вы увидите изображения, которые постоянно плавают, нажмите, чтобы подключиться к другим страницам; Это будет иметь ключевой эффект!
Скопируйте код следующим образом: <html>
<голова>
<meta http-equiv = "content-type" content = "text/html; charset = utf-8">
<title> тест </title>
<стиль типа = "text/css">
#All {ширина: 100%; Высота: 3000px;}
</style>
</head>
<тело>
<div id = "all">
<div id = "img" style = "позиция: абсолют; z-index: 99;">
<a href = "#" target = "_ blank"> <img src = "images/opvti.jpg" style = "cursor: pointer;" style = "cursor: pointer;" /> </a>
<script language = "javascript">
<!-Начни
var xpos = document.body.clientwidth - 20;
var ypos = document.body.clientHeight / 2;
var step = 1;
var задержка = 10;
var height = 0;
var hoffset = 0;
var woffset = 0;
var yon = 0;
var xon = 0;
var pause = true;
var -интервал;
img.style.top = ypos;
function changepos () {
width = document.body.clientwidth;
высота = document.body.clientHeight;
Hoffset = img.offsetheight;
Woffset = img.offsetwidth;
img.style.left = xpos + document.body.scrollleft;
img.style.top = ypos + document.body.scrolltop;
if (yon) {
ypos = ypos + step;
} еще {
ypos = ypos - step;
}
if (ypos <0) {
yon = 1;
ypos = 0;
}
if (ypos> = (height - hoffset)) {
yon = 0;
ypos = (высота - хофсет);
}
if (xon) {
xpos = xpos + step;
} еще {
xpos = xpos - step;
}
if (xpos <0) {
xon = 1;
xpos = 0;
}
if (xpos> = (width - woffset)) {
xon = 0;
xpos = (ширина - Woffset);
}
}
функция start () {
img.visibubility = "visible";
интервал = setInterval ('reampos ()', задержка);
}
function pause_resume () {
if (pause) {
ClearInterval (интервал);
пауза = false;
} еще {
интервал = setInterval ('reampos ()', задержка);
пауза = true;
}
}
начинать();
// end ->
</script>
</div>
</div>
</body>
</html>
Я надеюсь, что эта статья будет полезна для каждого программирования JavaScript.