带箭头的焦点图效果-插件特效-星河码客

HTML

Leonardo Maia

skillicorn

theenergycell

Fred Maya

CSS代码 #preview_wrap { margin: 0 auto; padding: 22px; width: 550px; height: 400px; background: url('images/bg_preview.gif') top left no-repeat; } #preview_outer { overflow: hidden; width: 550px; height: 400px; position: relative; } #preview_inner { text-align: left; height: 100%; position: relative; } #preview_inner div { float: left; width: 550px; height: 400px; position: relative; } #preview_inner div a { position: absolute; bottom: 0; left: 0; display: block; width: 100%; text-indent: 20px; padding: 20px 0; color: #fff; background: url(images/bg_trans.png); text-decoration: none; font-size: 18px; } #thumbs { padding-top: 30px; position: relative; width: 750px; text-align: center; } #thumbs span { padding: 12px; width: 80px; height: 80px; cursor: pointer; background: url('images/bg_thumb.gif') top left no-repeat; display: inline-block; } #arrow { position: absolute; top: -13px; background: url('images/bg_arrow.gif') top center no-repeat; width: 104px; height: 39px; display: none; }jQuery $(document).ready(function () { // Save the jQuery objects for later use. var outer = $("#preview_outer"); var arrow = $("#arrow"); var thumbs = $("#thumbs span"); var preview_pos; var preview_els = $("#preview_inner div"); var image_width = preview_els.eq(0).width(); // Get width of imaages // Hook up the click event thumbs.click(function () { // Get position of current image preview_pos = preview_els.eq(thumbs.index(this)).position(); // Animate them! outer.stop().animate({ 'scrollLeft': preview_pos.left }, 500); arrow.stop().animate({ 'left': $(this).position().left }, 500); }); // Reset positions on load arrow.css({ 'left': thumbs.eq(0).position().left }).show(); outer.animate({ 'scrollLeft': 0 }, 0); // Set initial width $("#preview_inner").css('width', preview_els.length * image_width); });

带箭头的焦点图效果

在线演示积分下载 6毛下载砍两刀下载

文件目录······

暂无数据

猜你喜欢更多»