<!doctype html> <html> <head> <meta charset="utf-8"> <title>图片透明切换效果</title> <style> *{ padding:0px; margin:0px;} .box{ position:relative; width:500px; height:400px; margin:50px auto; overflow:hidden;} div{position:absolute; top:0px; left:0px; opacity:1;} div img{ width:500px; height:400px;} .div1{ z-index:3;} .div2{ z-index:2;} .div3{ z-index:1;} </style> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script src="jquery-1.11.1.min.js"></script> <script> ;(function($){ function PicChange(ele,opt){ this.$parent = ele; this.child = this.$parent.children(); this.btn = true; this.flag = true; } PicChange.prototype = { 'init':function(){ this.hover(); this.leave(); }, 'hover':function(){ var objWidth = parseInt(this.$parent.outerWidth(true)); var objHeight = parseInt(this.$parent.outerHeight(true)); var x = [-objWidth,objWidth]; var y = [-objHeight,objHeight]; var _this = this; this.child.on('mouseover',function(){ if(_this.btn&&_this.flag){ _this.btn = false; _this.flag = false; var n = Math.round(Math.random()*1); var m = Math.round(Math.random()*1); if(n){ $(this).animate({'left':x[m],'opacity':0},1000,function(){ _this.callBack($(this)); _this.flag = true; }); }else{ $(this).animate({'top':y[m],'opacity':0},1000,function(){ _this.callBack($(this)); _this.flag = true; }); } } }); }, 'leave':function(){ var _this = this; this.$parent.on('mouseleave',function(){ _this.btn = true; }); }, 'callBack':function(obj){ obj.css({ 'left':0, 'top':0, 'opacity':1, 'z-Index':1 }); this.child.not(obj).each(function(index, element) { var nowIndex=parseInt($(this).css('z-index')); $(this).css('z-index',nowIndex+1); }); } } $.fn.picChange = function (opt){ var oChange = new PicChange(this,opt); return oChange.init(); } })(jQuery); $(function(){ $('.box').picChange();//插件形式调用 }); </script> <script> /*$(function(){ var $div = $('div').not('.box'); var $box = $('.box'); var btn = true; var flag = true; var objwidth = $('.box').width(); var px = [100,-100]; $div.mouseover(function(){ if(btn&&flag){ btn = false; flag = false; var n = Math.round(Math.random()*1); var m = Math.round(Math.random()*1); if(n){ $(this).animate({'left':px[m],'opacity':0},1000,function(){ callBack($(this)); flag = true; }); }else{ $(this).animate({'top':px[m],'opacity':0},1000,function(){ callBack($(this)); flag = true; }); } } }); $box.mouseleave(function(){ btn = true; }); function callBack(obj){ obj.css({ 'left':0, 'top':0, 'opacity':1, 'z-Index':1 }); $div.not(obj).each(function(index, element) { var nowIndex=parseInt($(this).css('z-index')); $(this).css('z-index',nowIndex+1); }); }; });*/ </script> </head> <body> <div class="box"> <div class="div1"><img src="http://f.hiphotos.baidu.com/image/pic/item/80cb39dbb6fd526695449c19a918972bd407364b.jpg"/></div> <div class="div2"><img src="http://e.hiphotos.baidu.com/image/pic/item/2934349b033b5bb51d5395f734d3d539b600bc37.jpg"/></div> <div class="div3"><img src="http://e.hiphotos.baidu.com/image/pic/item/03087bf40ad162d9467e381d13dfa9ec8a13cd1b.jpg"/></div> </div> </body> </html>
工作要用到的效果 扩展插件的形式方便调用