情感专家

jquery鼠标悬停缩略图、实现放大跟随展示大图片特效代码 - js相册特效

jquery鼠标悬停缩略图、实现放大跟随展示大图片特效代码发布时间:2015-09-2513:52:03您是第位浏览者本js特效代码兼容:ie6、ie7、ie8、ie9、ie10、ie11、chrome、firefox、opera、safari、等浏览器!DOCTYPEhtmlPUBLIC-//W3C////ENhttp:///TR/xhtml1/DTD/=http:///1999/xhtmlheadmetahttp-equiv=Content-Typecontent=text/html;charset=gb2312/titlejquery鼠标悬停缩略图、实现放大跟随展示大图片特效代码/titlelinkhref=css/=stylesheettype=text/cssscripttype=text/javascriptsrc=js//scriptscript$(function(){varx=22;vary=20;$().hover(function(e){//绑定一个鼠标悬停时事件//新建一个p标签来存放大图片,就是获取到a标签的大图片的路径,然后追加到body中$(body).append(pid=bigimageimgsrc=++alt=//p//改变小图片的透明度为,结合上面的CSS,看起来就象是图片变暗了$(this).find(img).stop().fadeTo(slow,);//将鼠标的坐标和声明的x,y做运算并赋值给大图片绝对定位的坐标,然后以fadeIn的效果显示$(#bigimage).css({top:()+px,left:(+x)+px}).fadeIn(fast},function(){//鼠标离开后//将变暗的图片复原$(this).find(img).stop().fadeTo(slow,1);//移除新增的p标签$(#bigimage).remove();});$().mousemove(function(e){//绑定一个鼠标移动的事件//将鼠标的坐标和声明的x,y做运算并赋值给大图片绝对定位的坐标,这样大图片就能跟随图片而移动了$(#bigimage).css({top:()+px,left:(+x)+px});});});/script/headbodyulid=galleryliahref=http:///class=smallimagerel=images/001_=images/001_=//a/liliahref=http:///class=smallimagerel=images/002_=images/002_=//a/liliahref=http:///class=smallimagerel=images/003_=images/003_=//a/li/ul/body/html。

jquery鼠标悬停缩略图、实现放大跟随展示大图片特效代码 - js相册特效

提供的文章均由网友转载于网络,若本站转载中的文章侵犯了您的权益,请与本站管理员联系.
Copyright © 2006-2019 www.cp3158.com情感专家-情感天地 All Rights Reserved.