jQuery动态缩放焦点图代码jQuery动态缩放焦点图代码是一款jQuery+CSS3实现的动态缩放焦点图代码，鼠标移动到缩略图上时，大图利用transform属性动态缩放。 jquery,动态缩放,鼠标悬停,缩略图
<!-- 代码 开始 -->
<div class="sec bnspic">
<div class="big_pic">
<ul>
<li class="on"><a href="http://www.codesocang.com"><img src="images/ookamikodomo.jpg" title="狼之子雨与雪" /><span class="txt">细田守《狼之子雨与雪》狼孩子的伟大母亲</span></a></li>
<li><a href="http://www.codesocang.com"><img src="images/hotarubi.jpg" title="萤火之森" /><span class="txt">绿川幸《萤火之森》——凄美伤感的半人半妖与人类之恋</span></a></li>
<li><a href="http://www.codesocang.com"><img src="images/tsuioku.jpg" title="对某个飞行员的追忆" /><span class="txt">犬村小六《对某个飞行员的追忆》——相爱不能相守的空战罗曼剧</span></a></li>
<li><a href="http://www.codesocang.com"><img src="images/tokikake.jpg" title="穿越时空的少女" /><span class="txt">细田守《穿越时空的少女》——在未来等你</span></a></li>
<li><a href="http://www.codesocang.com"><img src="images/aura.jpg" title="AURA 魔龙院光牙最后的战斗" /><span class="txt">田中罗密欧《AURA 魔龙院光牙最后的战斗》——中二先驱妄想战士</span></a></li>
<li><a href="http://www.codesocang.com"><img src="images/neragaku.jpg" title="被狙击的学园" /><span class="txt">眉村卓《被狙击的学园》——穿越时间的警示</span></a></li>
</ul>
</div><!-- /big_pic -->
<div class="small_pic clearfix">
<ul>
<li class="on"><a href="http://www.codesocang.com"><img src="images/ookamikodomo_.jpg" alt="图片说明" /></a></li>
<li><a href="http://www.codesocang.com"><img src="images/hotarubi_.jpg" alt="图片说明" /></a></li>
<li><a href="http://www.codesocang.com"><img src="images/tsuioku_.jpg" alt="图片说明" /></a></li>
<li><a href="http://www.codesocang.com"><img src="images/tokikake_.jpg" alt="图片说明" /></a></li>
<li><a href="http://www.codesocang.com"><img src="images/aura_.jpg" alt="图片说明" /></a></li>
<li><a href="http://www.codesocang.com"><img src="images/neragaku_.jpg" alt="图片说明" /></a></li>
</ul>
</div><!-- /small_pic -->
</div>
<script>
$(".small_pic li").mouseover(function(){
$(this).siblings().removeClass("on");
$(this).addClass("on");
var preNumber=$(this).prevAll().size()+1;
$(".big_pic li").removeClass("on");
$(".big_pic li:nth-child("+preNumber+")").addClass("on");
});
</script>
<!-- 代码 结束 --><div class="clear"></div>
本站资源仅限于学习研究，严禁从事商业或者非法活动!
源码搜藏网所有源码来自互联网转载与用户上传分享，如果侵犯了您的权益请与我们联系，我们将在24小时内删除！谢谢！
上一篇：纯CSS实现图片定时切换焦点图
下一篇：纯JS仿FLASH图片轮换播放
焦点图下载排行
-
2017-03-24
-
2019-06-28
-
2014-03-13
-
2018-07-11
-
2015-02-05
-
2017-03-24
-
2013-08-27
-
2017-03-24
最新文章
-
JQuery手风琴式相册图片特效是一款只需点击图片缩略图即可展开当前的图片
2022-03-15
-
-
Jquery带进度条提示焦点图是一款带进度条提示的图片淡出淡进切换效果代码
2022-03-15
-
2019-06-28
-
2018-07-11
-
2018-05-14
-
2017-03-24
-
2017-03-24
热门源码
