JavaScriptBank.com
Thành viên mới
- Tham gia
- 27/4/09
- Bài viết
- 33
- Được thích
- 7
Thư viện JavaScript
Xem ảnh qua kính
Hiệu ứng làm cho ảnh bạn cần xem ẩn bên dưới lớp nền của trang web. Bạn chỉ có thể xem qua ảnh này bằng cách giữ và kéo rê ô vuông đến những nơi cần ... chi tiết
Cách cài đặt
Bước 1: Copy mã CSS bên dưới và dán vào khu vực HEAD trên trang web của bạn
CSS
Mã:
<STYLE type=text/css>A {
COLOR: #000000
}
A:visited {
COLOR: #000000
}
A:active {
COLOR: #000000
}
A:hover {
COLOR: #ff0000
}
.baselinestyle {
FONT-FAMILY: Verdana; FONT-SIZE: 8pt; LEFT: 10px; POSITION: absolute; TOP: 200px; WIDTH: 240pt
}
</STYLE>
<!--
This script downloaded from www.JavaScriptBank.com
Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
-->Bước 2: Copy mã JavaScript bên dưới và dán vào khu vực HEAD trên trang web của bạn
JavaScript
Mã:
<SCRIPT language=JavaScript>
// Magic picture effect script
var isNav, isIE
var offsetX, offsetY
var selectedObj
var dragimg_width=64
var dragimg_height=64
var dragimg_startx=410
var dragimg_starty=80
var clipLeft=dragimg_startx
var clipTop=dragimg_starty
var clipRight=clipLeft+dragimg_width
var clipBottom=clipTop+dragimg_height
if (parseInt(navigator.appVersion) >= 4) {
if (navigator.appName == "Netscape") {
isNav = true
} else {
isIE = true
}
}
function setZIndex(obj, zOrder) {
obj.zIndex = zOrder
}
function shiftTo(obj, x, y) {
if (isNav) {
obj.moveTo(x,y)
document.bgimage.clip.top=y
document.bgimage.clip.left=x
document.bgimage.clip.bottom=y+dragimg_height
document.bgimage.clip.right=x+dragimg_width
}
else {
clipTop=y
clipLeft=x
clipBottom=y+dragimg_height
clipRight=x+dragimg_width
document.all.bgimage.style.clip="rect("+clipTop+" "+clipRight+" "+clipBottom+" "+clipLeft+")"
obj.pixelLeft = x
obj.pixelTop = y
}
}
function setSelectedElem(evt) {
if (isNav) {
var testObj
var clickX = evt.pageX
var clickY = evt.pageY
for (var i = document.layers.length - 1; i >= 0; i--) {
testObj = document.layers[i]
if ((clickX > testObj.left) &&
(clickX < testObj.left + testObj.clip.width) &&
(clickY > testObj.top) &&
(clickY < testObj.top + testObj.clip.height) && (testObj.name=="picture1")) {
selectedObj = testObj
setZIndex(selectedObj, 100)
return
}
}
} else {
var imgObj = window.event.srcElement
if (imgObj.parentElement.id.indexOf("picture") != -1) {
selectedObj = imgObj.parentElement.style
setZIndex(selectedObj,100)
return
}
}
selectedObj = null
return
}
function dragIt(evt) {
if (selectedObj) {
if (isNav) {
shiftTo(selectedObj, (evt.pageX - offsetX), (evt.pageY - offsetY))
} else {
shiftTo(selectedObj, (window.event.clientX - offsetX), (window.event.clientY - offsetY))
return false
}
}
}
function engage(evt) {
setSelectedElem(evt)
if (selectedObj) {
if (isNav) {
offsetX = evt.pageX - selectedObj.left
offsetY = evt.pageY - selectedObj.top
} else {
offsetX = window.event.offsetX
offsetY = window.event.offsetY
}
}
return false
}
function release(evt) {
if (selectedObj) {
setZIndex(selectedObj, 0)
selectedObj = null
}
}
function setNavEventCapture() {
if (isNav) {
document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP)
}
}
function init() {
if (isNav) {
setNavEventCapture()
}
document.onmousedown = engage
document.onmousemove = dragIt
document.onmouseup = release
if (document.all) {
clipTop=dragimg_starty
clipLeft=dragimg_startx
clipBottom=clipTop+dragimg_height
clipRight=clipLeft+dragimg_width
document.all.picture1.style.posLeft=dragimg_startx
document.all.picture1.style.posTop=dragimg_starty
document.all.bgimage.style.posLeft=0
document.all.bgimage.style.posTop=0
document.all.bgimage.style.clip="rect("+clipTop+" "+clipRight+" "+clipBottom+" "+clipLeft+")"
}
if (document.layers) {
document.bgimage.clip.left=dragimg_startx
document.bgimage.clip.right=clipLeft+dragimg_width
document.bgimage.clip.top=dragimg_starty
document.bgimage.clip.bottom=clipTop+dragimg_height
document.picture1.left=dragimg_startx
document.picture1.top=dragimg_starty
document.bgimage.left=0
document.bgimage.top=0
}
}
// - End of JavaScript - -->
</SCRIPT>
<!--
This script downloaded from www.JavaScriptBank.com
Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
-->Bước 3: Copy mã HTML bên dưới và dán vào khu vực BODY trên trang web của bạn
HTML
Mã:
<BODY onload=init()>
<DIV id=bgimage style="LEFT: 0px; POSITION: absolute; TOP: -3000px">
<IMG
name=bgimagpic src="pic191.jpg" width="600" height="414"></DIV>
<DIV id=picture1 style="LEFT: 0px; POSITION: absolute; TOP: -3000px; wdith: 100%;">
<IMG
name=picturePic1 src="dragpic271.gif" width="64" height="64"></DIV>
<DIV class=baselinestyle id=redirtext><b>Drag the image to experience the new magic unveiling effect.</b></DIV>
</BODY>
<!--
This script downloaded from www.JavaScriptBank.com
Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
-->Bước 4: Tải các file bên dưới về
Files
dragpic271.gif
Bạn có thể xem thêm nhiều JavaScript khác về Hình ảnh và Xem ảnh
