Phiên bản đầy đủ: jsB@nk » Framework » jQuery » Làm mờ các đối tượng với sự kiện rê chuột
URL: https://www.javascriptbank.com/fading-objects-onmouseover.html
Với đoạn mã này, bạn sẽ dễ dàng tác động hiệu ứng mờ dần khi người dùng rê chuột đến cho bất cứ đối tượng nào trên web một cách nhanh chóng, bằng cách thêm một tên lớp cho đối tượng và các công việc còn lại sẽ được hiệu ứng thực hiện.
Phiên bản đầy đủ: jsB@nk » Framework » jQuery » Làm mờ các đối tượng với sự kiện rê chuột
URL: https://www.javascriptbank.com/fading-objects-onmouseover.html
<style type="text/css">#overlappopup{ /*don't change id name */position: absolute; /*don't change position property */z-index: 1000;background: white;border: 12px solid black;padding: 10px;left: 0;top: 0;visibility: hidden;}</style><script type="text/javascript" src="/javascript/jquery.js"></script><script type="text/javascript" name="overlapviewer.js">/************************************************ Overlap Image Viewer script- by JavaScript Kit (www.javascriptkit.com)* This notice must stay intact for usage* Visit JavaScript Kit at http://www.javascriptkit.com/ for this script and 100s more***********************************************///Overlap Image Viewer (March 2nd, 08'): By JavaScript Kit: http://www.javascriptkit.comvar overlapviewer={thumbclass: "jkimagelarge", //Shared css class name to apply efect tostartopacity: 1, //Opacity of element before mouse moves over itendopacity: 0.5, //Opacity of element when mouse is over it (and showing enlarged image)increment: 0.1, //Amount of opacity to increase after each iteration (suggestion: 0.1 or 0.2)loadingmsg: "Loading Image. Please Wait...",isContained:function(m, e){var e=window.event || evar c=e.relatedTarget || ((e.type=="mouseover")? e.fromElement : e.toElement)while (c && c!=m)try {c=c.parentNode} catch(e){c=m}if (c==m)return trueelsereturn false},dim_and_reveal:function(e, t, config){var windowsize={w: $(window).width(), h: $(window).height()}var scrollpoint={x: e.pageX-e.clientX, y: e.pageY-e.clientY}$(t).fadeTo('normal', overlapviewer.endopacity, function(){config.$popupdiv.html('<img id="jkpopupimage" src="'+t.getAttribute('targetimage')+'" border="0" />')var isimglink=t.childNodes.length==1 && t.firstChild.tagName=="IMG" //see if anchor object is image linkvar $target=(isimglink)? $(t.firstChild) : $(t)var targetcoord=$target.offset()$('#jkpopupimage').one('load', function(){var popupdiv=config.$popupdiv.get(0)targetcoord.left=(windowsize.w < targetcoord.left-scrollpoint.x+popupdiv.offsetWidth)? targetcoord.left-popupdiv.offsetWidth+$target.width() : targetcoord.leftconfig.$popupdiv.css({left: targetcoord.left, top: targetcoord.top, visibility: 'visible'})})})},undim_and_hide:function(e, t, config){$(t).fadeTo('normal', overlapviewer.startopacity)config.$popupdiv.empty().css({left:0, top:0, visibility: 'hidden'})},init:function(config){$(document).ready(function(){config.$thumbnails=$('.'+overlapviewer.thumbclass)config.$popupdiv=$('<div id="overlappopup"></div>').prependTo('body')config.$thumbnails.each(function(index){$(this).attr('targetimage', this.getAttribute('title')).attr('title', '') //save url to enlarged image in custom 'targetimage' attribute$(this).bind('mouseenter', function(e){if (!overlapviewer.isContained(config.$popupdiv.get(0), e)) //check if mouse accidently entered pop up divoverlapviewer.dim_and_reveal(e, this, config)})$(this).bind('mouseleave', function(e){if (!overlapviewer.isContained(config.$popupdiv.get(0), e)) //check if mouse accidently entered pop up divoverlapviewer.undim_and_hide(e, this, config)})}) //end each loopconfig.$popupdiv.bind('mouseleave', function(e){config.$thumbnails.stop().fadeTo('normal', overlapviewer.startopacity)config.$popupdiv.empty().css({left:0, top:0, visibility: 'hidden'})})}) //end document.ready}}overlapviewer.init({})/* This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com*/</script><center><a href="http://www.javascriptbank.com/" class="jkimagelarge" title="">Free Javascript Codes Downloads</a><br /><br /><br /><img style="opacity: 1;" targetimage="/logos/logo_jsb_120x60.jpg" src="/logos/logo_jsb_120x60.jpg" class="jkimagelarge" title="" border="0" width="120" height="60"></center>
/javascript/jquery.js