jQuery实战~划过小图显示大图
代码是看了帅哥的代码模仿过来的~http://hi.baidu.com/frozensorrow/blog/item/f555ec4a2b839722afc3abdb.html
1.下面是自己做的一些修改~
var paths=["bigImage/bg1.jpg","bigImage/bg2.jpg","bigImage/bg3.jpg",///存储大图片路径的数量
"bigImage/bg4.jpg","bigImage/bg1.jpg","bigImage/bg2.jpg"];
在存储大图片路径的时候,这里是手动加工,
我将它改成用自动获取的方式,先得到字符串,再将字符串分割成数组。
代码如下:
var Paths='';
$('.imageview').find('img').each(function(){
Paths+=$(this).attr('src')+'|';
})
var paths = Paths.split("|");
2. 起先不明白$(obj).hover(...).mousemove()连起的用法是什么意思。。后来经过帅哥的指教~
hover.mousemove即就是在停在该图片的范围内,鼠标移动,图片也随之移动。
“
hover 就是 mouseover 和 mouseout 的结合,这个不用说
mousemove,主要是为了让鼠标悬停所显示的图片随着鼠标的移动在指定的范围内和鼠标指针保持一定的距离
,具体效果你可以注释掉相关语句,然后再改回来对比看看
”
----------------------------------------![]()
![]()
![]()
![]()
![]()
![]()
-------------------------------------------------------
3. 还有一个收获就是: 将图显示比例的大小进行修正。 代码来自这里http://www.19860828.com/article.asp?id=96
/*调整图片尺寸start*/
var thisimg = new Image()
thisimg.src = this.src //这是一种很好的调整图片大小的方法。
var r = thisimg.width / thisimg.height
if (r >= 1) //
{ w = maxsize; h = maxsize / r; }
else
{ w = maxsize * r; h = maxsize }
bigpic.getElementsByTagName("img")[0].style.width = w + "px";
bigpic.getElementsByTagName("img")[0].style.height = h + "px";
------------------------------------------------------------------------------------------------------------
值得注意的是:取的宽和高的对象要看清楚,不要不知所谓的直接使用this,要看清楚正在使用的是什么对象,即将获取图片的对象又是什么表达式。
比如说:
$('.showDetail img').css({ "width": w + "px", "height": h + "px" });[这个是图片的大小,如果没有写img,外面那个div不管宽高多少,依然显示出图本身的宽高,并没有起到缩放效果。]
$('.showDetail').css({ "top": (e.pageY - 350) + "px", "left": (e.pageX - $('.showDetail').width()-50) + "px", "width":w + "px", "height":h + "px" }).fadeIn("slow");
