jQ悬浮滑动显示全图特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQ悬浮滑动显示全图特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery悬浮滑动显示全图</title>
<link href="css/style.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery.1.4.2-min.js"></script>
</head>

<body>
<!--演示内容开始-->
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}
#topmenu{width:700px;margin:20px auto 0 auto;height:40px;position:relative;}
#topmenu ul li{float:left;font-size:12px;list-style:none;background:#222;position:relative;text-align:center;width:70px;margin:0 10px;display:inline;line-height:30px;}
#topmenu ul li a{color:#aaa;text-decoration:none;}
#topmenu ul li a:hover{color:#fff;}
#topmenu ul li.active a{color:#fff;font-weight:800;}
.demo{width:700px;margin:0 auto;}
.clear{clear:both;display:block;height:0;overflow:hidden;}
/* images */
#images img{float:left;margin:10px;border:2px solid #ccc;}
</style>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.asexy.min.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$('#images img').asexy();
	});
</script>

<div id="topmenu">
</div>
<div class="demo">
	<div id="images">
        <img src="images/Peach_and_Lime.jpg" alt="Peach and Lime" />
        <img src="images/Rock_Chick.jpg" alt="Rock Chick" />
        <img src="images/Angel.jpg" alt="Angel" />
        <img src="images/More_stripes.jpg" alt="More stripes" />
    </div>
    <br class="clear"/>
</div>
</body>
</html>

JS代码(jquery.asexy.min.js):

/** * jQuery (a)Sexy images plugin * * Copyright (c) 2009 Anton Shevchuk * Dual licensed under the MIT (MIT-LICENSE.txt) * and GPL (GPL-LICENSE.txt) licenses. * * @authorAnton Shevchuk AntonShevchuk@gmail.com * @version 0.0.4 */
;
	(function($){
	defaults={
	width:320,height:240,left:0,top:0,zoom:true,opacity:0.8,func:"snake",speed:500,round:"auto"}
;
	$.fn.asexy=function(o){
	var p=this;
	this.options=$.extend({
}
,defaults,o);
	if(this.options.round=='auto'){
	this.options.round=Math.round(this.options.round/4)}
this.each(function(){
	var m=$(this);
	m.load(function(){
	if(m.data('asexy')){
	return true}
else{
	m.data('asexy',true)}
m.removeAttr("width").removeAttr("height").css({
	width:"",height:""}
);
	var a=m.wrap('<div class="asexy"></div>').parent();
	var b=m.width();
	var c=m.height();
	if(p.options.zoom){
	var d=p.options.width/b;
	var e=p.options.height/c;
	var f=(d>e)?d:e;
	b=f*b;
	c=f*c;
	m.attr('width',b);
	m.attr('height',c)}
var g={
	width:p.options.width,height:p.options.height,position:'relative',overflow:'hidden'}
;
	var h=['margin-top','margin-right','margin-bottom','margin-left','padding-top','padding-right','padding-bottom','padding-left','border-top-width','border-right-width','border-bottom-width','border-left-width','border-top-color','border-right-color','border-bottom-color','border-left-color','border-top-style','border-right-style','border-bottom-style','border-left-style','z-index','float','clear','cursor'];
	var j=h.length;
	for(var i=0;
	i<j;
	i++)g[h[i]]=m.css(h[i]);
	var k=p.options.left;
	var l=p.options.top;
	if(k=='center'){
	k=-((b/2)-(p.options.width/2))}
if(l=='center'){
	l=-((c/2)-(p.options.height/2))}
m.css({
	top:l,left:k,padding:0,margin:0,border:0,position:'absolute',opacity:p.options.opacity}
);
	a.css(g).data('asexy',{
	img:{
	width:b,height:c}
,div:{
	width:p.options.width,height:p.options.height}
,def:{
	top:l,left:k}
,diff:{
	width:Math.round(b-p.options.width),height:Math.round(c-p.options.height)}
}
);
	a.hover(function(){
	p.go(this)}
,function(){
	p.back(this)}
)}
);
	var n=m.attr('src');
	m.attr('src','');
	m.attr('src',n);
	return this}
);
	this.go=function(a){
	$(a).find('img').fadeTo(p.options.speed/2,1);
	switch(p.options.func){
	case'x':p.go.x(a);
	break;
	case'vertical':p.go.vertical(a);
	break;
	case'horizontal':p.go.horizontal(a);
	break;
	case'linear':p.go.linear(a);
	break;
	case'zigzag':p.go.zigzag(a);
	break;
	case'snake':default:p.go.snake(a);
	break}
}
;
	this.go.linear=function(a){
	var b=$(a);
	var c=b.find('img');
	var d=b.data('asexy');
	var e=c.css('left');
	var f=c.css('top');
	var g=p.options.speed;
	if((d.img.width/d.div.width)>=(d.img.height/d.div.height)){
	c.animate({
	left:-d.diff.width}
,g)}
else{
	c.animate({
	top:-d.diff.height}
,g)}
}
;
	this.go.snake=function(a){
	var b=$(a);
	var c=b.find('img');
	var d=b.data('asexy');
	var e=c.css('left');
	var f=c.css('top');
	var g=Math.ceil(d.img.height/d.div.height);
	g=(g>1)?g:2;
	var h=p.options.speed;
	for(i=1;
	i<g;
	i++){
	var j=i*d.div.height;
	if(d.diff.width){
	if(i%2==0){
	c.animate({
	left:0}
,h)}
else{
	c.animate({
	left:-d.diff.width}
,h)}
}
if((d.diff.height+d.div.height-j)<p.options.round){
	break}
if(d.diff.height){
	if(j>d.diff.height){
	vspeed=Math.round(d.div.height/h*2*(j-d.diff.height));
	j=d.diff.height}
else{
	vspeed=h}
c.animate({
	top:-j}
,vspeed)}
}
}
;
	this.go.zigzag=function(a){
	var b=$(a);
	var c=b.find('img');
	var d=b.data('asexy');
	var e=c.css('left');
	var f=c.css('top');
	var g=Math.ceil(d.img.height/d.div.height);
	g=(g>1)?g:2;
	var h=p.options.speed;
	for(i=1;
	i<=g;
	i++){
	var j=i*d.div.height;
	if(d.diff.width){
	c.animate({
	left:-d.diff.width}
,h)}
if((d.diff.height+d.div.height-j)<p.options.round){
	break}
if(d.diff.height){
	if(j>d.diff.height){
	j=d.diff.height}
if(i!=g){
	c.animate({
	top:-j,left:0}
,h)}
}
}
}
;
	this.go.horizontal=function(a){
	var b=$(a);
	var c=b.find('img');
	var d=b.data('asexy');
	var e=c.css('left');
	var f=c.css('top');
	var g=p.options.speed;
	c.animate({
	left:-d.diff.width}
,g).animate({
	left:0}
,g)}
;
	this.go.vertical=function(a){
	var b=$(a);
	var c=b.find('img');
	var d=b.data('asexy');
	var e=c.css('left');
	var f=c.css('top');
	var g=p.options.speed;
	c.animate({
	top:-d.diff.height}
,g).animate({
	top:0}
,g)}
;
	this.go.x=function(a){
	var b=$(a);
	var c=b.find('img');
	var d=b.data('asexy');
	var e=c.css('left');
	var f=c.css('top');
	var g=p.options.speed;
	c.animate({
	left:-d.diff.width,top:-d.diff.height}
,g).animate({
	left:-d.diff.width,top:0}
,g).animate({
	left:0,top:-d.diff.height}
,g).animate({
	left:0,top:0}
,g)}
;
	this.back=function(a){
	var b=$(a);
	var c=b.find('img');
	var d=b.data('asexy');
	c.stop(true);
	c.animate({
	top:d.def.top,left:d.def.left}
,p.options.speed).fadeTo(p.options.speed/2,p.options.opacity)}
;
	return this}
}
)(jQuery);

CSS代码(style.css):

@charset "utf-8";/* reset */
*{margin:0;padding:0;list-style-type:none;}
a{blr:expression(this.onFocus=this.blur())}
/*去掉a标签的虚线框，避免出现奇怪的选中区域*/
:focus{outline:0;}
label{cursor:pointer;}
img{vertical-align:middle;}
table{empty-cells:show;border-collapse:collapse;border-spacing:0;}
h1{font-size:16px;}
h2,h3,h4{font-size:14px;}
h5,h6{font-size:12px;}
abbr,acronym{border:0;font-variant:normal}
address,caption,cite,code,dfn,em,th,var,optgroup{font-style:normal;font-weight:normal}
input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit}
input,button,textarea,select{*font-size:100%}
a,img{border:0;}
a,a:visited{color:#5e5e5e;text-decoration:none;}
a:hover{color:#4183C4;text-decoration:underline;}
.clear{display:block;overflow:hidden;clear:both;height:0;line-height:0;font-size:0;}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
.clearfix{display:inline-table;}
/* Hides from IE-mac \*/
*html .clearfix{height:1%;}
.clearfix{display:block;}
/* End hide from IE-mac */
*+html .clearfix{min-height:1%;}
body{font:12px/180% Arial,Lucida,Verdana,"宋体",Helvetica,sans-serif;color:#333;background:#fff;}
/* shortcut */
.shortcut{position:fixed;top:0;left:0;z-index:9999;width:100%;}
*html,*html body /* 修正IE6振动bug */
{background-image:url(about:blank);background-attachment:fixed;}
*html .shortcut{position:absolute;top:expression(eval(document.documentElement.scrollTop));}
.shortcut{height:28px;line-height:28px;font-size:12px;background:#EEEEEE;text-transform:uppercase;box-shadow:1px 0px 2px rgba(0,0,0,0.2);border-bottom:1px solid #DDDDDD;}
.shortcut h1{font-size:14px;font-family:"微软雅黑","宋体";}
.shortcut a,.shortcut h1{padding:0px 10px;letter-spacing:1px;color:#333;text-shadow:0px 1px 1px #fff;display:block;float:left;}
.shortcut a:hover{background:#fff;}
.shortcut span.right{float:right;}
.shortcut span.right a{float:left;display:block;color:#ff6600;font-weight:800;}
.headeline{height:40px;overflow:hidden;}
.adv960x90{width:960px;height:90px;overflow:hidden;border:solid 1px #E6E6E6;margin:40px auto 0 auto;}
.adv728x90{width:728px;height:90px;overflow:hidden;border:solid 1px #E6E6E6;margin:0 auto;}

附件:下载该文件资源,减少时间成本(增值服务)