急需网页特效 jsfoot上的，各位大侠如有该网站的积分或者该特效，赠与小妹吧
发布网友
发布时间：2022-05-01 23:13
共1个回答
热心网友
时间：2023-10-08 15:16
这个不难吧，jquery很简单的
<style type="text/css">.photo {margin-top:5px;}
.photo .pHead {margin-top:5px;}
.photo .pBody {margin-top:5px;width:400px;height:280px;overflow:hidden;position:relative;}
.photo .pBody .photoBtn {position:absolute;width:380px;top:120px;left:10px;display:none;}
.photo .pBody .photoBtn a.pBtnLeft {float:left;background:#000;color:#FFF;}
.photo .pBody .photoBtn a.pBtnRight {float:right;background:#000;color:#FFF;}
.photo .pBody .photoBtn a:hover.pBtnLeft,.photo .pBody .photoBtn a:hover.pBtnRight {color:#666;}
.pshow img {position:relative;}
.pshow span {position:absolute;bottom:0px;left:0px;background:#333;display:block;width:400px;height:24px;text-align:left;line-height:24px;}
.pshow span a {color:#fff;padding-left:5px;}.pshow span a:hover {color:#999;}
.photo .pBody .minBtn {position:absolute;width:380px;bottom:34px;left:10px;display:none;}
.photo .pBody .minBtn span img {border:2px solid #EFEFEF;}
.photo .pBody .minBtn span.tabBorder img {border:2px solid #33F;}
</style>
<script type="text/javascript">
$(function(){
var pLen=$(".pList p").length;
var psLen=1;
var indexP=0;
$(".p-now-list").html(psLen);
$(".p-all-list").html(pLen);
$(".minBtn span").hover(function(){
var indexSpan=$(this).index();
indexP=indexSpan;
showImg(indexP);
});
$(".pBtnRight").click(function(){
indexP+=1;
if(indexP==pLen){indexP=0}
if(psLen==pLen){psLen=0}
showImg(indexP);
});
$(".pBtnLeft").click(function(){
indexP-=1;
if(indexP==-1){indexP=pLen-1}
if(psLen==1){psLen=pLen+1}
showImg(indexP);
});
$(document).keyup(function(e){
var key=e.which;
if(key==37){
$(".pBtnLeft").click();
}
if(key==39){
$(".pBtnRight").click();
}
});
function showImg(indexP){
$(".pList p").eq(indexP).addClass("pshow").show().siblings().removeClass("pshow").hide();
$(".minBtn span").eq(indexP).addClass("tabBorder").siblings().removeClass("tabBorder");
$(".linkUrl a").attr("href",$(".pList p.pshow img").attr("src"));
$(".p-now-list").html(indexP+1);
}
$(".pList,.photoBtn,.minBtn").hover(function(){
$(".photoBtn,.minBtn").toggle();
});
$(".pshow span").css("opacity","0.8");
});
</script>
<div class="tab">
<h4>以下效果仿门户新闻图片效果</h4>
<div class="photo">
<div class="pHead">
第 <span class="p-now-list" style="color:#ff0000;">0</span> 张，共 <span class="p-all-list">0</span> 张 <span class="linkUrl"><a target="_blank" href="works/photo/2013041601.jpg">查看原图</a> <font color="#FF0000" size=2>支持键盘左右键切换</font></span>
</div>
<div class="pBody">
<div class="pList">
<p class="pshow"><a target="_blank" href="http://news.163.com/13/0419/22/8SRUQ9UA00014AED.html"><img src="works/photo/2013041601.jpg"></a><span><a href="javscript:#1">农民工不能只走市民化这条路</a></span></p>
<p class=""><a target="_blank" href="http://news.163.com/13/0329/14/8R52BRVJ00014JB6.html"><img src="works/photo/2013ASDS02.jpg"></a><span><a href="javscript:#2">美国会少数党领袖：对待同性婚姻民众比政客宽容</a></span></p>
<p class=""><a target="_blank" href="http://news.163.com/13/0405/06/8RM69IIT00014AED.html"><img src="works/photo/fddfd5332.jpg"></a><span><a href="javscript:#3">网曝*月入过万这还不算是最高的</a></span></p>
<p class=""><a target="_blank" href="http://news.163.com/13/0420/00/8SS5G9TB00014AED.html"><img src="works/photo/2013DET604.jpg"></a><span><a href="javscript:#4">云南泼水节：25人借机猥亵妇女被抓</a></span></p>
<p class=""><a target="_blank" href="http://news.163.com/13/0415/21/8SHK5PG600014JB6.html"><img src="works/photo/201masf.jpg"></a><span><a href="javscript:#5">阿富汗突击队击毙22名*武装分子</a></span></p>
</div>
<div class="photoBtn">
<a class="pBtnLeft" href="javascript:void(0);">上一张</a>
<a class="pBtnRight" href="javascript:void(0);">下一张</a>
</div>
<div class="minBtn">
<span class="tabBorder"><img src="works/photo/2013041601.jpg" width="64" height="40"></span>
<span><img src="works/photo/2013ASDS02.jpg" width="64" height="40"></span>
<span><img src="works/photo/fddfd5332.jpg" width="64" height="40"></span>
<span><img src="works/photo/2013DET604.jpg" width="64" height="40"></span>
<span><img src="works/photo/201masf.jpg" width="64" height="40"></span>
</div>
</div>
</div>
</div>
