jquery 鼠标滑动显示详情应用示例
jquery 鼠标滑动显示详情应用示例
发布时间:2017-01-14 来源:查字典编辑
摘要:效果如下图:实现的代码很少,很简洁,可参考学习复制代码代码如下:jQuery(document).ready(function(){Show...

效果如下图:

jquery 鼠标滑动显示详情应用示例1

实现的代码很少,很简洁,可参考学习

复制代码 代码如下:

<script type="text/javascript">

jQuery(document).ready(function () {

ShowImage1();

});

var ShowImage1 = function () {

$(".show_box1 .show_box_dd").hover(function (e) {

$(".show_box1 .phover").hide();

$(".show_box1 .show_box_dd").show();

$(this).hide();

$(this).siblings().show();

},

function () {

});

};

</script>

复制代码 代码如下:

<pre code_snippet_id="169406" snippet_file_name="blog_20140124_1_9547095" name="code"><div></pre>

<pre></pre>

<pre code_snippet_id="169406" snippet_file_name="blog_20140124_2_3723790" name="code"> <dl>

<div>

<span>好评度排名</span>

</div>

<div>

<dd>

<em>1</em><img src="images/jiu.gif" width="100" height="100" />

<span><a href="#" target="_blank">五粮液</a> </span><span>品评评分:</span><span>8.6分</span>

<div><span><em></em></span></div>

</dd>

<dd>

<em>1</em><a href="#" target="_blank">五粮液</a><span>9分</span>

</dd>

</div>

<div>

<dd>

<em>2</em><img src="images/jiu.gif" width="100" height="100" />

<span><a href="#" target="_blank">泸州老窖</a> </span><span>品评评分:</span><span>8.6分</span>

<div><span><em></em></span></div>

</dd>

<dd>

<em>2</em><a href="#" target="_blank">泸州老窖</a><span>9分</span>

</dd>

</div>

<div>

<dd>

<em>3</em><img src="images/jiu.gif" width="100" height="100" />

<span><a href="#" target="_blank">金六福</a> </span><span>品评评分:</span><span>8.6分</span>

<div><span><em></em></span></div>

</dd>

<dd>

<em>3</em><a href="#" target="_blank">金六福</a><span>9分</span>

</dd>

</div>

</dl>

</div></pre>

<pre></pre>

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新Javascript教程学习
热门Javascript教程学习
编程开发子分类