我有5个不同的标志图像,所有相同的大小,只是不同的颜色。我想图像旋转每次有人访问网站和网页重新加载,使他们看到不同的颜色。有没有一种方法可以用CSS做到这一点?谢谢!
68bkxrlz1#
好吧,我有一个简单的想法来做到这一点。基本上,生成一个随机数,然后根据该数字显示一个图像。因此,每次页面加载,将有一个新的随机图像。下面是一段示例代码:
<?php $imagenum = rand(1,10); if (($imagenum = 1) or ($imagenum = 2)) { //Display Image #1 Here echo "<img src=''>"; } elseif (($imagenum = 3) or ($imagenum = 4)) { //Display Image #2 Here echo "<img src=''>"; } elseif (($imagenum = 5) or ($imagenum = 6)) { //Display Image #3 Here echo "<img src=''>"; } elseif (($imagenum = 7) or ($imagenum = 8)) { //Display Image #4 Here echo "<img src=''>"; } else { //Display Image #5 Here echo "<img src=''>"; }
这样,它是***总是***是随机的,用户得到的图像。
你问CSS中是否有办法做到这一点。答案是否定的,CSS不可能做到这一点。CSS之所以不是"动态的",它也会按你说的做,而且它不能思考(按说的)。
pengsaosao2#
用一点Javascript怎么样?
function updateImgSrc() { var img = document.getElementById('my-logo'); var rand = Math.round(Math.random()*5) + 1; img.src = img.src.slice(-5, img.src.length) + rand + ".jpg"; } $(document).ready(function(){ updateImgSrc(); });
...这意味着如果你有一个标识为#my-logo的图像,在每次页面加载时,它会更新图像路径,在文件名的末尾包含一个不同的(随机)数字,在1到5之间。如果你给你的徽标命名正确(logo-variation-1.jpg,logo-variation-2.jpg等),你会在每次页面加载时得到一个不同的图像。如果你的logo带有一个css背景图片,你可以很容易地让javascript给元素添加一个类,然后从样式表中拉入一个合适的图片:
#my-logo
function updateImgClass() { var imgElement = $('my-logo'); var rand = Math.round(Math.random()*5) + 1; imgElement.addClass('logo-' + rand); } $(document).ready(function(){ updateImgClass(); });
CSS:
#my-logo.logo-1 { background-image: url('path-to/image-here.jpg') } #my-logo.logo-2 { background-image: url('path-to/image-here2.jpg') } .. et cetera
c0vxltue3#
使用此代码,它会完美地工作.
<?php $imagenum = rand(1,3); if (($imagenum == 1)) { //Display Image #1 Here echo "<img src='https://i.imgur.com/image.png'>"; } elseif (($imagenum == 2)) { //Display Image #2 Here echo "<img src='https://i.imgur.com/image.png'>"; } elseif (($imagenum == 3)) { //Display Image #3 Here echo "<img src='https://i.imgur.com/image.png'>"; } else { //Display Image Here echo "<img src='https://i.imgur.com/image.png'>"; } ?>
3条答案
按热度按时间68bkxrlz1#
好吧,我有一个简单的想法来做到这一点。基本上,生成一个随机数,然后根据该数字显示一个图像。因此,每次页面加载,将有一个新的随机图像。
下面是一段示例代码:
这样,它是***总是***是随机的,用户得到的图像。
你问CSS中是否有办法做到这一点。答案是否定的,CSS不可能做到这一点。CSS之所以不是"动态的",它也会按你说的做,而且它不能思考(按说的)。
pengsaosao2#
用一点Javascript怎么样?
...这意味着如果你有一个标识为
#my-logo
的图像,在每次页面加载时,它会更新图像路径,在文件名的末尾包含一个不同的(随机)数字,在1到5之间。如果你给你的徽标命名正确(logo-variation-1.jpg,logo-variation-2.jpg等),你会在每次页面加载时得到一个不同的图像。如果你的logo带有一个css背景图片,你可以很容易地让javascript给元素添加一个类,然后从样式表中拉入一个合适的图片:
CSS:
c0vxltue3#
使用此代码,它会完美地工作.