កូដនៃ Page ខាងលើៈ
<html>
<head>
<title>Animation Image</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"> </script>
<script type="text/javascript" src="jquery.magnifier.js"></script>
</head>
<body>
<h1 align="center">Computer Magazine</h1>
<br>
<br>
<img src="autumn.jpg" class="magnify" style="width:200px; height:150px" border="1"/>
<img src="cave.jpg" class="magnify" style="width:200px; height:150px" border="1" />
<img src="pool.jpg" class="magnify" style="width:200px; height:150px" border="1"/>
</body>
</html>
បន្ទាប់មកលោកអ្នកត្រូវបង្កើត File JavaScript ចំនួនពីរទៀតដូចខាងក្រោមៈ
jQuery.noConflict()
jQuery.imageWarp={
dsettings: {
warpfactor: 1.5,
duration: 1000,
imgopacity: [0.5, 1],
warpopacity: [0.1, 0.5]
},
warpshells: [],
refreshoffsets:function($target, warpshell){
var $offsets=$target.offset()
warpshell.attrs.x=$offsets.left
warpshell.attrs.y=$offsets.top
warpshell.newattrs.x=warpshell.attrs.x-((warpshell.newattrs.w-warpshell.attrs.w)/2)
warpshell.newattrs.y=warpshell.attrs.y-((warpshell.newattrs.h-warpshell.attrs.h)/2)
},
addEffect:function($, $target, options){
var setting={}
var setting=jQuery.extend(setting, this.dsettings, options)
var effectpos=this.warpshells.length
var attrs={w:$target.outerWidth(), h:$target.outerHeight()}
var newattrs={w:Math.round(attrs.w*setting.warpfactor),
h:Math.round(attrs.h*setting.warpfactor)
}
var $clone=$target.clone().css({position:"absolute", left:0, top:0, visibility:"hidden", border:"1px solid gray"}).appendTo(document.body)
$target.add($clone).data("pos", effectpos)
var $targetlink=$target.parents("a").eq(0)
this.warpshells.push({$clone:$clone, attrs:attrs, newattrs:newattrs, $link:($targetlink.length==1)? $targetlink : null})
$target.click(function(e){
var $this=$(this).css({opacity:setting.imgopacity[0]})
var imageinfo=jQuery.imageWarp.warpshells[$(this).data("pos")]
jQuery.imageWarp.refreshoffsets($this, imageinfo)
if (imageinfo.$link){
e.preventDefault()
}
var $clone=imageinfo.$clone
$clone.stop().css({left:imageinfo.attrs.x, top:imageinfo.attrs.y, width:imageinfo.attrs.w, height:imageinfo.attrs.h, opacity:setting.warpopacity[0], visibility:"visible"}).animate({opacity:setting.warpopacity[1], left:imageinfo.newattrs.x, top:imageinfo.newattrs.y, width:imageinfo.newattrs.w, height:imageinfo.newattrs.h}, setting.duration,
function(){
$clone.css({left:0, top:0, visibility:"hidden"})
$this.css({opacity:setting.imgopacity[1]})
if (imageinfo.$link){
window.location=imageinfo.$link.attr("href")
}
})
})
}
};
jQuery.fn.imageWarp=function(options){
var $=jQuery
return this.each(function(){
var $imgref=$(this)
if (this.tagName!="IMG")
return true
if (parseInt($imgref.css("width"))>0 && parseInt($imgref.css("height"))>0){
jQuery.imageWarp.addEffect($, $imgref, options)
}
else if (this.complete){
jQuery.imageWarp.addEffect($, $imgref, options)
}
else{
$(this).bind("load", function(){
jQuery.imageWarp.addEffect($, $imgref, options)
})
}
})
};
បន្ទាប់ពីសរសេររួចរាល់ហើយសូមធ្វើការ Save វាទុកដោយដាក់ឈ្មោៈថា jquery.imageWarp.js នៅក្នុង Folder ជាមួយគ្នា។
- ជំហានបន្ទាប់សូមលោកអ្នកធ្វើការបង្កើត File មួយទៀតដូចខាងក្រោមៈ
jQuery.noConflict()
jQuery.imageMagnifier={
dsettings: {
magnifyby: 3,
duration: 500,
imgopacity: 0.2
},
cursorcss: "url(magnify.cur), -moz-zoom-in",
zIndexcounter: 100,
imgshells: [],
refreshoffsets:function($window, $target, warpshell){
var $offsets=$target.offset()
var winattrs={x:$window.scrollLeft(), y:$window.scrollTop(), w:$window.width(),
h:$window.height()
}
warpshell.attrs.x=$offsets.left
warpshell.attrs.y=$offsets.top
warpshell.newattrs.x=winattrs.x+winattrs.w/2-warpshell.newattrs.w/2
warpshell.newattrs.y=winattrs.y+winattrs.h/2-warpshell.newattrs.h/2
if (warpshell.newattrs.x<winattrs.x+5){
warpshell.newattrs.x=winattrs.x+5
}
else if (warpshell.newattrs.x+warpshell.newattrs.w > winattrs.x+winattrs.w){
warpshell.newattrs.x=winattrs.x+5
}
if (warpshell.newattrs.y<winattrs.y+5){
warpshell.newattrs.y=winattrs.y+5
}
},
magnify:function($, $target, options){
var setting={}
var setting=jQuery.extend(setting, this.dsettings, options)
var effectpos=this.imgshells.length
var attrs={w:$target.outerWidth(), h:$target.outerHeight()}
var newattrs={w:Math.round(attrs.w*setting.magnifyby), h:Math.round(attrs.h*setting.magnifyby)
}
$target.css("cursor", jQuery.imageMagnifier.cursorcss)
var $clone=$target.clone().css({position:"absolute", left:0, top:0, visibility:"hidden", border:"1px solid gray", cursor:"pointer"}).appendTo(document.body)
$target.add($clone).data("pos", effectpos)
this.imgshells.push({$target:$target, $clone:$clone, attrs:attrs, newattrs:newattrs})
$target.bind("click.magnify", function(e){
var $this=$(this).css({opacity:setting.imgopacity})
var imageinfo=jQuery.imageMagnifier.imgshells[$this.data("pos")]
jQuery.imageMagnifier.refreshoffsets($(window), $this, imageinfo)
var $clone=imageinfo.$clone
$clone.stop().css({zIndex:++jQuery.imageMagnifier.zIndexcounter, left:imageinfo.attrs.x, top:imageinfo.attrs.y, width:imageinfo.attrs.w, height:imageinfo.attrs.h, opacity:0, visibility:"visible"}).animate({opacity:1, left:imageinfo.newattrs.x, top:imageinfo.newattrs.y, width:imageinfo.newattrs.w, height:imageinfo.newattrs.h}, setting.duration,
function(){
})
})
$clone.click(function(e){
var $this=$(this)
var imageinfo=jQuery.imageMagnifier.imgshells[$this.data("pos")]
jQuery.imageMagnifier.refreshoffsets($(window), imageinfo.$target, imageinfo)
$this.stop().animate({opacity:0, left:imageinfo.attrs.x, top:imageinfo.attrs.y, width:imageinfo.attrs.w, height:imageinfo.attrs.h}, setting.duration,
function(){
$this.hide()
imageinfo.$target.css({opacity:1})
})
})
}
};
jQuery.fn.imageMagnifier=function(options){
var $=jQuery
return this.each(function(){
var $imgref=$(this)
if (this.tagName!="IMG")
return true
if (parseInt($imgref.css("width"))>0 && parseInt($imgref.css("height"))>0){
jQuery.imageMagnifier.magnify($, $imgref, options)
}
else if (this.complete){
jQuery.imageMagnifier.magnify($, $imgref, options)
}
else{
$(this).bind("load", function(){
jQuery.imageMagnifier.magnify($, $imgref, options)
})
}
})
};
jQuery(document).ready(function($){
var $targets=$(".magnify")
$targets.each(function(i){
var $target=$(this)
var options={}
if ($target.attr("data-magnifyby"))
options.magnifyby=parseFloat($target.attr("data-magnifyby"))
if ($target.attr("data-magnifyduration"))
options.duration=parseInt($target.attr("data-magnifyduration"))
$target.imageMagnifier(options)
})
var $triggers=$("a[rel^="magnify["]")
$triggers.each(function(i){
var $trigger=$(this)
var targetid=$trigger.attr("rel").match(/\[.+\]/)[0].replace(/[\[\]"]/g, "")
$trigger.data("magnifyimageid", targetid)
$trigger.click(function(e){
$("#"+$(this).data("magnifyimageid")).trigger("click.magnify")
e.preventDefault()
})
})
})
បន្ទាប់ពីសរសេររួចរាល់ហើយសូមធ្វើការ Save វាទុកដោយដាក់ឈ្មោៈថា jquery.magnifier.js នៅក្នុង Folder ជាមួយគ្នា។ ជំហានចុងក្រោយសូមធ្វើការសាកល្បងនូវកូដដែលលោកអ្នកបានសរសេរ។ សូមមើលលទ្ធផលដូចខាងក្រោមៈ
|