灵活运用html的自定义属性
代码如下:
function getTopPic(preview){ $.ajax({ url: "topPic.action", type: "post", data: {partId:24,preview : preview}, dataType :"json", cache : false, ansyc : false, success : function(msg) { var articles=msg.articleList; imageip = msg.imageip; var topSmallPic=""; var picUrlTemp = articles[0].VC2THUMBPICURL; var urlBig = picUrlTemp.replace(.jpg,_630_349.jpg); $("#focus_big").html( <a href="#"><img id="bigImage" src=+imageip+/images/resources+urlBig + /></a><div class="filterbg"></div><p class=""></p>); for ( var i = 0; i < articles.length; i++) { var picUrl = articles[i].VC2THUMBPICURL; var smallimgid = articles[i].NUMARTICLEID; var url = picUrl.replace(.jpg,_184_108.jpg); var url1 = picUrl.replace(.jpg,_630_349.jpg); topSmallPic+="<li><a href=javascript:void(0) id=smallimage_"+smallimgid+" smallimage="+url+" οnclick=dynamicTopPic("+smallimgid+"); return false;><image src= "+imageip+"/images/resources"+url+"></a></li>"; } $("#focus_list").html(topSmallPic); // alert($(#focus_list)) }, error:function(){ alert("您好,系统繁忙"); } }); }
功能需求:比较简单,就是点击左侧小图,动态更换中间大图,为小图的不同尺寸的缩略图。
function dynamicTopPic(smallimgid){ var url = $("#smallimage_"+smallimgid).attr("smallimage"); $(#focus_big).find("#bigImage").attr("src",imageip+"/images/resources"+url); }
