本文实例讲述了jquery实现鼠标滑过小图时显示大图的方法。分享给大家供大家参考。具体实现方法如下： 复制代码 代码如下: <br /> li{list-style:none;float:left;margin-left:10px;}<br /> <br /> var data = {<br /> "images/11_s.jpg":["images/11_b.jpg","美人1"],<br /> "images/22_s.jpg":["images/22_b.jpg","美人2"],<br /> "images/33_s.jpg":["images/33_b.jpg","美人3"],<br /> "images/44_s.jpg":["images/44_b.jpg","美人4"]<br /> };<br /> $(function(){<br /> $.each(data,function(key,value){<br /> //初始化最后一个div为隐藏<br /> $("div").last().hide();<br /> //创建小图的节点<br /> var smallPath = $("<img src='" + key + "' / alt="jquery实现鼠标滑过小图时显示大图的方法_jquery" >").css({"margin":"5px","padding":"2px","border":"1px solid #000"});<br /> //设置大图地址和名称<br /> bigImgPath = smallPath.attr("bigMapPath",value[0]);<br /> bigImgName = smallPath.attr("bigMapName",value[1]); <p> $("div").first().append(smallPath); <p> //小图上添加事件<br /> smallPath.mouseover(function(){<br /> //最后一个div淡入效果<br /> $("div").last().fadeIn("fast");<br /> //获取大图地址<br /> $("#show").attr("src",$(this).attr("bigMapPath"));<br /> //获取大图名称并设置样式<br /> $("#imgTitle").text($(this).attr("bigMapName")).css({"background":"#ebf1de","padding":"10px","margin-bottom":"10px"});<br /> });<br /> smallPath.mouseout(function(){<br /> $("div").last().fadeOut("fast");<br /> });<br /> });<br /> });<br /> 希望本文所述对大家的jQuery程序设计有所帮助。
