QQ 1640076782
随着客户越来越重视网站用户体验，许多的购物网站上的产品在鼠标经过时都会变换一张图片，传统的是用onmouseover和onmouseout来实现，但是这个做起来烦琐，图片加载的时候也很慢，而且变换的过程过于生硬。现在就来看一下用Jquery来实现的图片变换效果：
首先我们需要引用jquery
<script type=”text/javascript” src=”js/jquery-1.6.4.min.js”></script>
这个网上很容易下载的，有不同的版本，只要版本不是太低都不会有问题。
这段js代码很关键，当然是必不可少的：
<script type=”text/javascript”>
$(function(){
//图片切换
if(typeof(view_model) == ‘undefined’) view_model = false;
// 2011-12-24 鼠标滑过图片切换增加延迟功能
$(“.list_img > img”).mouseover(function(){
var _this = this;
_ZPsearchImgAutoID = setTimeout(function(){
var data = eval(“(“+$(_this).attr(“rel”)+ “)”);
if (view_model == false) {
_this.src = data.rollover;
} else {
_this.src = data.def;
}
},200);
}).mouseout(function(){
if(_ZPsearchImgAutoID ){clearTimeout(_ZPsearchImgAutoID);};
var data = eval(“(“+$(this).attr(“rel”)+ “)”);
if (view_model == false) {
this.src = data.def;
} else {
this.src = data.rollover;
}
});
});
</script>
再就是在实际操作的时候要注意原图和经过时变换的图片的路径不要写错！
<div id=”procont”>
<ul>
<li><a href=”product_view.html” class=”list_img”><img width=”180″ height=”240″ data-pinit=”registered” style=”display: inline;” src=”images/p1.jpg” original=”images/p1.jpg” rel=”{rollover:’images/p2.jpg’,def:’images/p1.jpg’}” /></a> <span><a href=”#”>Dots & stripes boatneck T</a></span></li>
<li><a href=”product_view.html” class=”list_img”><img width=”180″ height=”240″ data-pinit=”registered” style=”display: inline;” src=”images/p2.jpg” original=”images/p2.jpg” rel=”{rollover:’images/p3.jpg’,def:’images/p2.jpg’}” /></a> <span><a href=”#”>Dots & stripes boatneck T</a></span></li>
<li><a href=”product_view.html” class=”list_img”><img width=”180″ height=”240″ data-pinit=”registered” style=”display: inline;” src=”images/p3.jpg” original=”images/p3.jpg” rel=”{rollover:’images/p4.jpg’,def:’images/p3.jpg’}” /></a> <span><a href=”#”>Dots & stripes boatneck T</a></span></li>
<li><a href=”product_view.html” class=”list_img”><img width=”180″ height=”240″ data-pinit=”registered” style=”display: inline;” src=”images/p4.jpg” original=”images/p4.jpg” rel=”{rollover:’images/p1.jpg’,def:’images/p4.jpg’}” /></a> <span><a href=”#”>Dots & stripes boatneck T</a></span></li>
</ul>
</div>
a标签里面的 class=”list_img” 这个不能漏掉了，这个是JS用来识别哪里的图片是需要变换的！
其次是要注意<img>标签里面除了我们常用的几个属性以外，还需要加入几个特殊的，也是一个都不能少的。如： data-pinit=”registered” 和 original=”images/p2.jpg”
最关键的是：rel=”{rollover:’images/p3.jpg’,def:’images/p2.jpg’}” 这段代码，这里的rollover后面的图片表示是的鼠标经过时变换的图片，def表示的是原图，顺序不能颠倒了！
以上问题都注意了，做出效果来就没什么问题了，如果有更好的方法，欢迎留言交流！
QQ客服：415682727
电话：020-39907297
xueposter@gmail.com