H2ACode tao anh truot 2 ben trang web blog
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (97.6 KB, 5 trang )
<span class='text_page_counter'>(1)</span><div class='page_container' data-page=1>
<b>H2A_Code tạo ảnh trượt 2 bên trang web, blog</b>
html>
<head>
<title>uoon demo Set Position</title>
<style type="text/css">
.float {
width: 115px;
height: 200px;
border: solid 1px blue;
}
</style>
</head>
<body>
<div style="width: 0px;height: 0px;">
<b> <div id="a" class="float"><a href=" Link địa chỉ bạn muốn dẫn đến khi bấm chuột</b>
<b>vào ảnh phải "><img src=' Link của ảnh sẽ hiển thị bên phải '></div></b>
<b> <div id="c" class="float"><a href=" Link địa chỉ bạn muốn dẫn đến khi </b>
<b>bấm chuột vào ảnh trái"><img src=' Link của ảnh sẽ hiển thị bên trái '></div></b>
</div>
<span class='text_page_counter'>(2)</span><div class='page_container' data-page=2>
<script type="text/javascript">
function setPosition(id, position) {
var store = {
ram : {
top : 0,
left : 0,
right : 0,
bottom : 0
},
rom : {
top : null,
left : null,
right : null,
bottom : null
}
};
</div>
<span class='text_page_counter'>(3)</span><div class='page_container' data-page=3>
var element = document.getElementById(id);
for (i in store) {element[i] = store[i];}
element.rom.move = function() {
if (window.innerHeight) {
var topPage = window.pageYOffset;
var leftPage = window.pageXOffset;
var rightPage = leftPage + window.innerWidth - element.offsetWidth;
var bottomPage = topPage + window.innerHeight - element.offsetHeight;
}
else {
var topPage = document.body.scrollTop;
var leftPage = document.body.scrollLeft;
var rightPage = leftPage + document.body.clientWidth - element.offsetWidth;
var bottomPage = topPage + document.body.clientHeight - element.offsetHeight;
}
element.style.position = "absolute";
</div>
<span class='text_page_counter'>(4)</span><div class='page_container' data-page=4>
element.style.top = element.ram.top;
}
if (element.rom.left != null) {
element.ram.left += Math.round((leftPage + element.rom.left -
element.ram.left)/20);
element.style.left = element.ram.left;
}
if (element.rom.right != null) {
element.ram.right += Math.round((rightPage - element.rom.right -
element.ram.right)/20);
element.style.left = element.ram.right;
}
if (element.rom.bottom != null) {
element.ram.bottom += Math.round((bottomPage - element.rom.bottom -
element.ram.bottom)/20);
element.style.top = element.ram.bottom;
}
setTimeout("document.getElementById('"+element.id+"').rom.move()",10);
};
element.rom.move();
}
</div>
<span class='text_page_counter'>(5)</span><div class='page_container' data-page=5>
setPosition("c", {top: 20, left: 30});
</script>
</div>
<!--links-->
Chương 17 Tạo hiệu ứng Rollover cho trang web
- 30
- 378
- 1
![]( <br /> </p><!-- <p class="text-xl pb-40 overlay-read-more absolute bottom-0 left-0 w-full text-center bg-gradient-to-t from-white to-transparent">--><!----><!-- </p>--><!-- </div>--><!-- <a href="javascript:" class="bg-secondary px-6 py-2 rounded text-white absolute bottom-0 left-1/2 mb-4 transform -translate-x-1/2" id="showmore">Xem Thêm</a>--> </div> <div style="position: relative;" class="col-span-3 hidden md:block px-1 text-center"> <div style="position: sticky;top: 10px;width: 300px; height: 600px;"> <ins class="adsbygoogle" style="display:inline-block;width:300px;height:600px" data-ad-client="ca-pub-2979760623205174" data-ad-slot="8377321249"></ins><script defer>(adsbygoogle = window.adsbygoogle || []).push({});</script> </div> </div> </div> <div class="vf_link_relate px-2 my-2"> <h2 class="vf_doc_relate text-2xl font-bold my-4">Tài liệu liên quan</h2> <ul class="grid grid-cols-12 gap-2"> <li class="col-span-6 md:col-span-2"> <div class="card-doc " onclick="actionDocRelated(this)"> <a class="card-doc-img" href="https://text.123docz.net/document/75342-chuong-17-tao-hieu-ung-rollover-cho-trang-web.htm" title="Chương 17 Tạo hiệu ứng Rollover cho trang web"> <i class="icon i_type_doc i_type_doc2"></i> <img class="lazy" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" data-src="https://media.store123doc.com/images/document/12/ve/gb/medium_ofDnnQzKcV.jpg" width="124" height="179" alt="Chương 17 Tạo hiệu ứng Rollover cho trang web" onerror="this.src=){kind=link}