Phiên bản đầy đủ: jsB@nk » Hình ảnh » Đổi ảnh khi di chuyển chuột
URL: https://www.javascriptbank.com/magicpicture.html
Hiệu ứng đổi ảnh được chỉ định sang ảnh khác khi người dùng di chuyển con trỏ chuột trên trang web. Ảnh được đổi và sẽ đổi đều sử dụng hiệu ứng mờ.
Phiên bản đầy đủ: jsB@nk » Hình ảnh » Đổi ảnh khi di chuyển chuột
URL: https://www.javascriptbank.com/magicpicture.html
<SCRIPT language=JavaScript><!-- Beginning of JavaScript -// MagicPicture 2.0: image fade-in fade-out onmousemove with 2 images// the URL of your first imagevar image_url_1="photo3.jpg"// the URL of your second imagevar image_url_2="photo6.jpg"// The vertical position of the first image (distance to the top border of the webpage, pixels)var imgpostop1=10// The horizontal position of the first image (distance to the left border of the webpage, pixels)var imgposleft1=10// The vertical position of the second image (distance to the top border of the webpage, pixels)var imgpostop2=10// The horizontal position of the second image (distance to the left border of the webpage, pixels)var imgposleft2=10// Don't edit the variables below.img1=new Image()img1.src=image_url_1img2=new Image()img2.src=image_url_2var i_fadestrength=0var marginrightvar center_xvar distance_xvar imgwidth1var imgheight1var imgwidth2var imgheight2var i_visible=1var x,yfunction initiate() {if (document.all) {document.onmousemove = handlerMM; marginright=document.body.clientWidthimgwidth1=imgcontainer1.offsetWidthimgheight1=imgcontainer1.offsetHeightimgwidth2=imgcontainer2.offsetWidthimgheight2=imgcontainer2.offsetHeightcenter_x=Math.round(marginright/2)imgcontainer1.innerHTML="<img src="+image_url_1+">"imgcontainer2.innerHTML="<img src="+image_url_2+">"document.all.imgcontainer1.style.posLeft=imgposleft1document.all.imgcontainer1.style.posTop=imgpostop1document.all.imgcontainer1.style.visibility="visible"document.all.imgcontainer2.style.posLeft=imgposleft2document.all.imgcontainer2.style.posTop=imgpostop2document.all.imgcontainer2.style.visibility="visible"changeopacity()}}function changeopacity() {imgcontainer1.filters.alpha.opacity=Math.round(i_fadestrength)imgcontainer2.filters.alpha.opacity=100-Math.round(i_fadestrength)var timer=setTimeout("changeopacity()",80)}function handlerMM(e){x=document.body.scrollLeft+event.clientXy=document.body.scrollTop+event.clientYdistance_x=Math.abs(x-center_x)i_fadestrength=Math.round(100/marginright*distance_x*2)}// - End of JavaScript - --></SCRIPT><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><BODY onload=initiate()><DIV id=imgcontainer1 style="FILTER: alpha(opacity=50); POSITION: absolute; VISIBILITY: hidden"></DIV><DIV id=imgcontainer2 style="FILTER: alpha(opacity=50); POSITION: absolute; VISIBILITY: hidden"></DIV></BODY><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->