-
很大氣美觀的滑動門圖片特效，右側顯示標題，鼠標滑上去左側的大圖片就切換，可爲圖片增加描述和標題介紹，支持Alt標籤和title標籤，示例中可能去掉了這些，若需要的話自己再添加上去。本圖片的流暢平滑效果要歸功於jquery，歡迎學習前端圖片特效的參閱代碼。
<!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> <title>響應式圖片切換jQuery選項卡</title> <style> html,body,div,img,q,dl,dt,dd,ol,ul,li{margin:0;padding:0;} img,a img{border-style:none;border-width:0;} a,a:hover{ text-decoration:none} html {margin:0 auto;} ol,ul,li{list-style: none;}:focus{outline: 0;} body{background-color:#eef9f8; color:#666} a,a:visited{ color:#666} a:hover {color:#009966;} .main{ font-family:宋體; color:#666; width:912px; margin:0 auto} .slider-scroll{margin-top:12px; overflow:hidden;height:421px;} #showArea{ width:664px; float:left;height:419px;border:1px solid #bebebe; border-right:none} #showArea img{ opacity:0; display:none;} #scrollDiv{float:left; width:246px; height:421px; background:url(/jscss/demoimg/201402/slider_side.jpg) 0 0 no-repeat} #scrollDiv ul{ padding:19px 0 0 0} #scrollDiv li{width:220px;height:57px;padding:10px 0 10px 26px; cursor:pointer; font-family:微軟雅黑;} #scrollDiv li.on{ background:#003030; position:relative;} #scrollDiv li a{display:block; font-size:16px; height:35px; line-height:35px; color:#fff;} #scrollDiv li span{display:block; color:#66ffff; font-size:14px; height:15px; line-height:15px; } #scrollDiv li span.entity-triangle{ display:none; } #scrollDiv li.on span.entity-triangle{position:absolute; top:31px; left:-6px; display:block; width:6px; height:22px;z-index:99;} </style> <script type="text/javascript" src="/ajaxjs/jquery-1.6.2.min.js"></script> <script type="text/javascript"> $.extend({ manualScroll:function(opt,callback){ //alert("suc"); this.defaults = { objId:"", // 滾動區域id showArea:"", // 大圖顯示區域id，如果沒有就不顯示 showWidth:419, // 大圖寬度 showHeight:664, // 大圖高度 showTitle: false, // 是否在大圖下方顯示標題 width:300, // 每行的寬度 height:100, // div的高度 picTimer:0, // 間隔句柄，不需要設置，只是作爲標識使用 interval:5500 }; //參數初始化 var opts = $.extend(this.defaults,opt); var $objId = opts.objId; var $showArea = opts.showArea; var $showWidth = opts.showWidth; var $showHeight = opts.showHeight; var $showTitle = opts.showTitle; var $width = opts.width; var $height = opts.height; var $titleopacity = opts.titleopacity; var $picTimer = opts.picTimer; var index=0; var $len = $("#"+$objId).find("ul li").length; /*設置顯示圖片大小*/ $("#"+$showArea).find("img").css({"height":$showHeight,"width":$showWidth}); /*鼠標移動事件*/ $("#"+$objId).find("ul li").hover(function(){ index = $(this).index(); showimg(index); }); /*自動切換*/ $(".slider-scroll").hover(function(){ clearInterval($picTimer); },function(){ $picTimer = setInterval(function() { if(index==$len-1) { index=0; } else { index+=1; } $("#"+$objId).find("ul li").removeClass("on"); $("#"+$objId).find("ul li").eq(index).addClass("on"); $("#"+$showArea).find("img").css({"display":"none","opacity":"0.3"}); $("#"+$showArea).find("img").eq(index).css({"display":"block"}).stop(true,false).animate({"opacity":"1"},500); },opts.interval); // 自動播放的間隔，單位：毫秒 }).trigger("mouseleave"); function showimg(index) { if(index==$len) { index=0; } $("#"+$objId).find("ul li").removeClass("on"); $("#"+$objId).find("ul li").eq(index).addClass("on"); $("#"+$showArea).find("img").css({"display":"none","opacity":"0.3"}); $("#"+$showArea).find("img").eq(index).css({"display":"block"}).stop(true,false).animate({"opacity":"1"},500); index+=1; } } }); </script> </head> <body> <script type="text/javascript"> //home 頂部大圖切換 $(document).ready(function(){ $.manualScroll({ objId:"scrollDiv", showArea:"showArea", showWidth:664, // 大圖寬度 showHeight:419, // 大圖高度 showTitle: true, picTimer:0, interval:3000 }); }); </script> <div class="main"> <div class="slider-scroll f-c"> <div id="showArea"> <a href="/" target="_blank"><img style="display:block; opacity:1;" src="/jscss/demoimg/wall1.jpg" width="664px" height="419px"></a> <a href="/" target="_blank"><img style="display:block; opacity:1;" src="/jscss/demoimg/wall4.jpg" width="664px" height="419px"></a> <a href="/" target="_blank"><img style="display:block; opacity:1;" src="/jscss/demoimg/wall6.jpg" width="664px" height="419px"></a> <a href="/" target="_blank"><img style="display:block; opacity:1;" src="/jscss/demoimg/wall7.jpg" width="664px" height="419px"></a> <a href="/" target="_blank"><img style="display:block; opacity:1;" src="/jscss/demoimg/wall9.jpg" width="664px" height="419px"></a> </div> <div id="scrollDiv"> <ul> <li class="on"><a href="/" target="_blank">斜弱視專家援疆<!--12個字以內--><span>權威治療疑難斜弱視<!--14個字以內--></span></a><span class="entity-triangle"></span></li> <li ><a href="/" target="_blank">IntraLase飛秒激光治近視<!--12個字以內--><span>全程無刀安全治近視首選<!--14個字以內--></span></a><span class="entity-triangle"></span></li> <li ><a href="/" target="_blank">青少年近視防控<!--12個字以內--><span>非手術治近視<!--14個字以內--></span></a><span class="entity-triangle"></span></li> <li ><a href="/" target="_blank">白內障防治<!--12個字以內--><span>愛讓父母看得見<!--14個字以內--></span></a><span class="entity-triangle"></span></li> <li ><a href="/" target="_blank">ICL人工晶體植入術<!--12個字以內--><span>無損角膜之高端近視治療<!--14個字以內--></span></a><span class="entity-triangle"></span></li> </ul> </div> </div> </div> <div style="text-align:center;clear:both"> </div> </body> </html>
很大氣的滑動門圖片特效
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章