先我们看飞入式图片幻灯版的效果图片
css代码
| 代码如下 | 复制代码 |
|
<style type="text/css"> *{margin:0;padding:0;} body{color:#333;font-size:12px;font-family:Verdana,Arial,Helvetica,sans-serif;} img{border:0;} ol,ul,li{list-style:none;} a{text-decoration:none;color:#333;} a:hover{text-decoration:underline;} .focus{width:600px;height:250px;background:#eee;margin:10px auto;position:relative;overflow:hidden;} .focus ul{} .focus li{width:550px;height:200px;padding:25px;position:absolute;left:600px;top:0;} .focus li h5,.focus li p,.focus li a.button{float:left;position:relative;} .focus li h5{width:300px;font-size:22px;font-family:"Microsoft YaHei";} .focus li p{width:300px;line-height:22px;font-size:14px;margin:1em 0;} .focus li a.button{width:100px;height:30px;background:#333;cursor:pointer;display:none;} .focus li a.button:hover{background:#666;} .focus li div.imgBox{float:right;width:200px;height:200px;position:relative;background:#f00;} .focus li div.imgBox img{} .focus .btn{position:absolute;width:600px;height:6px;padding:10px;text-align:center;left:0;bottom:0;} .focus .btn span{display:inline-block;width:10px;height:6px;background:#999;margin:0 3px;} .focus .btn span.on{background:#000;} </style> |
|
javascript代码
| 代码如下 | 复制代码 |
|
<script type="text/javascript" src="/effect/images/20127/141615/jquery-1.6.2.min.js"></script> <script type="text/javascript"> $(function() { var len = $(".focus ul li").length; var width = 600; //整体宽度，根据此计算偏移量 var indent = 50; //标题隐藏时往回走的一小段长度 var index = 0; var picTimer; var btn = "<div class='btn'>"; for(var i = 0; i < len; i++) { btn += "<span></span>"; } btn += "</div>"; $(".focus").append(btn); $(".focus .btn span").mouseenter(function() { index = $(".focus .btn span").index($(this)); play(index); }).eq(0).trigger("mouseenter"); $(".focus").hover(function() { clearInterval(picTimer); },function() { picTimer = setInterval(function() { index++; if(index == len) {index = 0;} play(index); },5000); }).trigger("mouseleave"); function play(index) { var $now = $(".focus ul li.on"); if($now.length > 0) { $now.find("h5").stop(true,true).animate({left:"-" + (width - indent) + "px"},400,function() { $(this).animate({left:"-"+ (2*width) +"px"},400); }); $now.find("a.button").stop(true,true).fadeTo(400,0); var hideDelay = setTimeout(function() { $now.find("p").stop(true,true).animate({left:"-" + (width - indent) + "px"},400,function() { $(this).animate({left:"-"+ (2*width) +"px"},400); $now.find("div.imgBox").stop(true,true).animate({left:"-"+ (2*width) +"px"},400); }); },200); var showDelayA = setTimeout(function() { show(index); },700); } else { show(index); } } function show(index) { var $next = $(".focus ul li").eq(index); $next.find("h5").css({left:"0px"}); $next.find("p").css({left:"0px"}); $next.find("a.button").css({left:"0px"}); $next.find("div.imgBox").css({left:"0px"}); $next.find("h5").stop(true,true).animate({left:"-"+ width +"px"},400); var showDelayB = setTimeout(function() { $next.find("div.imgBox").stop(true,true).animate({left:"-"+ width +"px"},300); $next.find("p").stop(true,true).animate({left:"-"+ width +"px"},300,function() { $next.find("a.button").stop(true,true).animate({left:"-"+ width +"px"},300,function() {$(this).fadeTo(400,1);}); }); },300); $(".focus .btn span").removeClass("on").eq(index).addClass("on"); $(".focus ul li").removeClass("on").eq(index).addClass("on"); } }); </script> |
|
html代码
| 代码如下 | 复制代码 |
|
<div class="focus"> <ul> <li class="clearfix"> <div class="imgBox"><img src="/effect/images/20127/141615/t1.gif" alt="建站素材"></div> <h5>建站素材</h5> <p>一个专注于高质量网页模板、网站源码及设计素材资源分享的专业平台，主要提供网页模板、网站模板、商业网站源码、平面设计素材、3D三维设计素材、影视素材等高品质的素材资源。<p> </li> <li class="clearfix"> <div class="imgBox"><img src="/effect/images/20127/141615/t2.gif" alt="网页特效"></div> <h5>网页特效</h5> <p>网页特效提供的建站常用的js特效代码演示及下载。<p> <a class="button">Download</a> </li> <li class="clearfix"> <div class="imgBox"><img src="/effect/images/20127/141615/t3.gif" alt="广告代码"></div> <h5>广告代码</h5> <p>提供各种常用的广告代码，欢迎各位站长下载使用，谢谢大家的支持！</p> <a class="button">Download</a> </li> </ul> </div> |
|
我们只要把上面三段代码组合在一起就可以快速实现你想要的幻版效果了。
时间： 2024-10-22 22:42:38