<!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>
工作显示写的效果 扩展插件的形式方便调用
时间： 2024-11-05 13:23:33