js圖片隨機飄浮代碼(js浮動代碼)

本文目錄一覽:

求上下浮動的圖片在指定的區域內隨瀏覽器上下滾動的js代碼

關鍵代碼:

main-left:左側參照DIV;

main-right:要浮動的DIV;

div.top-box:頁面頂部的Fixed層;

 

$(document).ready(function(){

 $(window).scroll(function(){

  var 

leftTop  = $(“#main-left”).offset().top;

  var rightTop = 

$(“#main-right”).offset().top;

  var scrollerTop = $(this).scrollTop() + 

$(“div.top-box”).height();

  if(scrollerTop  leftTop) {

   if 

(scrollerTop + $(“#main-right”).height()  leftTop + 

$(“#main-left”).height()){

    if ($(“#main-right”).css(“position”) != 

“fixed”){

     $(“#main-right”).css({“position”:”fixed”, 

“left”:$(“#main-right”).offset().left + “px”, “top”:$(“div.top-box”).height() + 

“px”});

    }

   }else{

    $(“#main-right”).css({“position”:”fixed”, 

“left”:$(“#main-right”).offset().left + “px”, “top”:($(“div.top-box”).height() – 

(scrollerTop + $(“#main-right”).height() – (leftTop + $(“#main-left”).height())) 

) + “px” });

   }

  } else {

   if ($(“#main-right”).css(“position”) != 

“static”){

    $(“#main-right”).css({“position”:”static”});

   }

  }

 });

});

跪求一段圖片全屏浮動的JS 代碼!

div id=”img” style=”position:absolute;”

a href=”#” target=”_blank”

img src=”test.gif”

/a

/div

SCRIPT LANGUAGE=”JavaScript1.2″

!– Begin

var xPos = 20;

var yPos = document.body.clientHeight;

var step = 1;

var delay = 30;

var height = 0;

var Hoffset = 0;

var Woffset = 0;

var yon = 0;

var xon = 0;

var pause = true;

var interval;

img.style.top = yPos;

function changePos() {

width = document.body.clientWidth;

height = 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;

}

else {

yPos = yPos – step;

}

if (yPos 0) {

yon = 1;

yPos = 0;

}

if (yPos = (height – Hoffset)) {

yon = 0;

yPos = (height – Hoffset);

}

if (xon) {

xPos = xPos + step;

}

else {

xPos = xPos – step;

}

if (xPos 0) {

xon = 1;

xPos = 0;

}

if (xPos = (width – Woffset)) {

xon = 0;

xPos = (width – Woffset);

}

}

function start() {

img.visibility = “visible”;

interval = setInterval(�0�7changePos()�0�7, delay);

}

start();

// End —

/script

求JS代碼。按開始,圖片隨機滾動;按結束,顯示隨機滾動的其中一張圖片。

給你說個可行方案,自己寫代碼,用AJAX獲取資料庫中所有圖片ID和圖片地址,存到數組中,根據ID建立隨機因子,之後獲取個隨機ID號,這樣再用這樣就知道了圖片地址,就可以顯示圖片了

怎麼用javascript輸出隨機圖片代碼,如,

function getRandomImage(){

var index = Math.ceil(Math.random() * 10);

return ‘img src=”/’ + index + ‘.jpg” ‘;

}

console.log(getRandomImage());

主要就是生成1~10的隨機數,然後字元串拼裝.console那句是測試語句.

原創文章,作者:LZMSN,如若轉載,請註明出處:https://www.506064.com/zh-tw/n/317802.html

(0)
打賞 微信掃一掃 微信掃一掃 支付寶掃一掃 支付寶掃一掃
LZMSN的頭像LZMSN
上一篇 2025-01-11 16:28
下一篇 2025-01-11 16:28

相關推薦

  • Python周杰倫代碼用法介紹

    本文將從多個方面對Python周杰倫代碼進行詳細的闡述。 一、代碼介紹 from urllib.request import urlopen from bs4 import Bea…

    編程 2025-04-29
  • JS Proxy(array)用法介紹

    JS Proxy(array)可以說是ES6中非常重要的一個特性,它可以代理一個數組,監聽數據變化並進行攔截、處理。在實際開發中,使用Proxy(array)可以方便地實現數據的監…

    編程 2025-04-29
  • Python字元串寬度不限制怎麼打代碼

    本文將為大家詳細介紹Python字元串寬度不限制時如何打代碼的幾個方面。 一、保持代碼風格的統一 在Python字元串寬度不限制的情況下,我們可以寫出很長很長的一行代碼。但是,為了…

    編程 2025-04-29
  • Python基礎代碼用法介紹

    本文將從多個方面對Python基礎代碼進行解析和詳細闡述,力求讓讀者深刻理解Python基礎代碼。通過本文的學習,相信大家對Python的學習和應用會更加輕鬆和高效。 一、變數和數…

    編程 2025-04-29
  • 用Python繪製酷炫圖片

    在本篇文章中,我們將展示如何使用Python繪製酷炫的圖片。 一、安裝Python繪圖庫 在使用Python繪製圖片之前,我們需要先安裝Python繪圖庫。Python有很多繪圖庫…

    編程 2025-04-29
  • Python滿天星代碼:讓編程變得更加簡單

    本文將從多個方面詳細闡述Python滿天星代碼,為大家介紹它的優點以及如何在編程中使用。無論是剛剛接觸編程還是資深程序員,都能從中獲得一定的收穫。 一、簡介 Python滿天星代碼…

    編程 2025-04-29
  • 倉庫管理系統代碼設計Python

    這篇文章將詳細探討如何設計一個基於Python的倉庫管理系統。 一、基本需求 在著手設計之前,我們首先需要確定倉庫管理系統的基本需求。 我們可以將需求分為以下幾個方面: 1、庫存管…

    編程 2025-04-29
  • 寫代碼新手教程

    本文將從語言選擇、學習方法、編碼規範以及常見問題解答等多個方面,為編程新手提供實用、簡明的教程。 一、語言選擇 作為編程新手,選擇一門編程語言是很關鍵的一步。以下是幾個有代表性的編…

    編程 2025-04-29
  • Python實現簡易心形代碼

    在這個文章中,我們將會介紹如何用Python語言編寫一個非常簡單的代碼來生成一個心形圖案。我們將會從安裝Python開始介紹,逐步深入了解如何實現這一任務。 一、安裝Python …

    編程 2025-04-29
  • 怎麼寫不影響Python運行的長段代碼

    在Python編程的過程中,我們不可避免地需要編寫一些長段代碼,包括函數、類、複雜的控制語句等等。在編寫這些代碼時,我們需要考慮代碼可讀性、易用性以及對Python運行性能的影響。…

    編程 2025-04-29

發表回復

登錄後才能評論