Cách thay đổi ảnh nền khi refresh trang web.
Để trang web của bạn không nhàm chán. Thay vì đó bạn có thể sử dụng refresh trang để đổi mới nền.
Tại bài viết này mình hướng dẫn mọi người cách đổi ảnh nền ngẫu nhiên cho body hoặc một thẻ div
Mời mọi người xem Demo (Nhấn F5 để refresh)
Áp dụng cho blogspot :
Bước 1 : Mở chế độ chỉnh sửa HTML
Bạn vào Dashbroad -> Mẫu -> Chỉnh sửa HTML
Thay đổi nền cho body:
Bước 2: Xóa ảnh và background trong body cũ.
Tìm với khóa
Xóa hết background:....; như hình (phần bôi đen)
Bước 3: Tìm dòng lệnh sau :
Thêm trước đó code :
<script type="text/javascript">
var image = new Array()
image[0] = 'http://farm5.staticflickr.com/4107/5050448283_95f5893351.jpg'
image[1] = 'http://www.mediatechpro.com/free-backgrounds/free-website-background.jpg'
image[2] = 'http://waynempire.com/images/better-wood.jpg'
image[3] = 'http://www.desktopwallpaperhd.net/wallpapers/10/4/apple-mac-wallpapers-computers-101588.jpg'
image[4] = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjn4r3gkrw-zlcYtfNs3xOoLKep-zXJ47d4XsDk5m6LFgn1EhLmCac64-oZ5EtSca93vq1DKdhakAZ4EuthFWQkDPcHq11_S4uMuvg6Ujrf4iPl0A3DviBtclcWsIGJky3O-4xzPwquFBFa/s1600/Blue+Tree+2column+HEADER.jpg'
image[5] = 'http://theme.crumina.net/onetouch/wp-content/themes/theme_v_1.tmp/inc/custom_style/assets/img/pattern/diamond_upholstery2.png'
image[6] = 'http://theme.crumina.net/onetouch/wp-content/themes/theme_v_1.tmp/inc/custom_style/assets/img/pattern/vertical_cloth.png'
image[7] = 'http://www.wallsave.com/wallpapers/1920x1200/website-/485057/website-background-full-hd-backgrounds-vintage-red-485057.jpg'
var p = image.length;
<!-- var chooseImage = Math.round(Math.random()*(p-1));-->
<!-- Bạn có thể sử dụng một trong hai -->
var chooseImage = Math.floor(Math.random() * image.length);
function ChangeBack() {
document.body.background = image[chooseImage];
document.body.style.backgroundRepeat = "repeat";
document.body.style.backgroundPosition = "top left";
}
</script>
Bạn có thể thay đổi link ảnh nền tại vùng mình bôi đen.
Bước 4: Thêm dưới <body>
<script type="text/javascript">
ChangeBack();
</script>
Thay đổi nền cho thẻ div bất kỳ
Bước 1: Thêm JS trước </head>
<script type="text/javascript">
var image1 = new Array()
image1[0] = 'https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTsDlv5rSEpp0s-OHMRCpusNEj0KTTyKv1VjuSSwi9vzox4oy6fLQ'
image1[1] = 'https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcS5iRcciubu5eLesnvFHPl_mc0IQZUe84SIGmn-gi92KQ2g8v3yPw'
<!-- var chooseImage = Math.round(Math.random()*(p-1));-->
var chooseImage = Math.floor(Math.random() * image1.length);
function ChangeDiv() {
document.getElementById("Erhay").style.backgroundImage = "url('"+image1[chooseImage]+"')";
document.getElementById("Erhay").style.backgroundRepeat = "no-repeat";
}
</script>
<style type="text/css">
#Erhay{
width:200px;
height:200px;
overflow:hidden;
}
</style>
Tương tự bạn cần thay link ảnh muốn thay đổi khi refresh cho thẻ div. Chỉnh lại các thuộc tính CSS phù hợp với bạn thông qua ID #Erhay (phần được bôi đen)
Bước 2: Nơi bạn muốn đặt vùng Div thay đổi ảnh nền. (trong <body>)
Thêm code sau :
<div id="Erhay">
<script type='text/javascript'>
ChangeDiv();
</script> <!-- Đặt code bạn muốn vùng đó thay đổi ảnh nền vào đây -->
</div>
Ok. Vậy là đã xong. Mọi người không làm được có thể để lại Comment để được giúp đỡ.
(Vui lòng ghi rõ nguồn erhay khi bạn phát hành lại thông tin từ trang này)
Picture and Thumbs totally resizable
ReplyDeleteUtilizing CSS Animation together with FallBack for you to jQuery
Unrestricted Caption Sheets
Sayings like Movie, Picture and html tickets
can be simply Produced
Unrestricted Photo slides
i phone & Android Swipping Touch empowered
jQuery Turmoil free tool
Custom-made 100% via Tool After product sales
Slider Innovation Responsive WordPress Wordpress plugin nulled
Can be installed right away inside your Site
Specific Getting rid of
Vimeo as well as Youtube Reinforced
my web blog; slider revolution (www.youtube.com)