当前位置: 首页 >> javascript
 
 

鼠标经过文字显示图片jquery特效

来源:     时间:2018-06-07     浏览:  

今天一个客户想要实现产品列表页,鼠标经过产品名称的时候,能够显示对应的产品缩略图。从网上找的一个非常不错的代码。源代码是压缩包,我直接发代码,方便大家查看。

URL Screenshot Preview with jQueryURL Screenshot Preview with jQueryIn order to test screenshot preview roll over the Css Globe link.If you want to see screenshot with caption, roll over this Css Globe link.


调用的jq代码不再写了,贴出来main.js的代码:

this.screenshotPreview = function(){
/* CONFIG */
xOffset = 10;
yOffset = 30;
// these 2 variable determine popup's distance from the cursor you might want to adjust to get the right result
/* END CONFIG */
$("a.screenshot").hover(function(e){
this.t = this.title;
this.title = "";
var c = (this.t != "") ? "
" + this.t : "";
$("body").append(""); 
$("#screenshot")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px")
.fadeIn("fast");
    },
function(){
this.title = this.t;
$("#screenshot").remove();
    });
$("a.screenshot").mousemove(function(e){
$("#screenshot")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px");
});
};
// starting the script on page load
$(document).ready(function(){
screenshotPreview();
});


 
  • 联系我们

  • 邮箱:794421925@qq.com
  • 电话:13832367531
  • Q Q:794421925 点击交谈
  • 地址:石家庄市桥西区芳馨家园六号楼底商
  • 淘宝店铺金翼网络淘宝店铺

Copyright © 2008-2020 石家庄捷搜网络科技有限公司 版权所有 备案号:冀ICP备16025780号-1