首页 > 语言 > JavaScript > 正文

鼠标悬浮停留三秒后自动显示大图js代码

2024-05-06 16:08:40
字体:
来源:转载
供稿:网友
这篇文章主要介绍了鼠标悬浮停留三秒后显示大图,在网页中还是比较实用的,下面是示例代码
 
 

鼠标悬浮停留三秒后显示大图,在网页中还是比较实用的

<style>*{margin:0;padding:0;list-style-type:none;}img,a{border:0;}.piccon{height:75px;margin:100px 0 0 50px;}.piccon li{float:left;padding:0 10px;}#preview{position:absolute;border:1px solid #ccc;background:#333;padding:5px;display:none;color:#fff;z-index:2000;}</style>
<script type="text/javascript">this.imagePreview = function(){xOffset = 10;yOffset = 30;var urll;$(".widget .ks-content a,.box .ks-switchable-content div li a").hover(function(){//$(".widget .ks-content a").hover(function(e){//var goods_id = $(this).attr("href").replace("goods/", "");var goods_id = $(this).attr("href").replace("index.php?app=goods&id=", "");this.t = this.title;this.title = " ";var c = (this.t != "") ? "<br/>" + this.t : " ";$.post("index.php?app=default&act=ajaxBigImage", {goods_id: goods_id},function(data){$.ajaxSettings.async = false;if(data!=0){urll = data;$("body").append("<div id='preview'><img src="+ urll +" />"+ c +"</div>");return true;}else{return false;}});/*$("#preview").css("top",(e.pageY - xOffset) + "px").css("left",(e.pageX + yOffset) + "px").fadeIn("fast");*/$('#preview').css({position:'absolute',left: ($(window).width() - $('#preview').outerWidth())/2,top: ($(window).height() - $('#preview').outerHeight())/2 + $(document).scrollTop()});setTimeout(function(){$("#preview").fadeIn("fast");},3000)},function(){this.title = this.t;$("#preview").remove();});/*$("a.preview").mousemove(function(e){$("#preview").css("top",(e.pageY - xOffset) + "px").css("left",(e.pageX + yOffset) + "px");});*/};$(document).ready(function(){imagePreview();});</script><div id="_widget_579" name="jdr_sale_list" widget_type="widget" class="widget"><div class="sale_list mt10 clearfix"><h2>销售排行</h2><div><ul class="ks-nav ks-nav1476271702"><li class="ks-active nav1">特效礼花</li><li class="nav2">套餐烟花</li></ul><div class="ks-content"><ul class="box" id="box1_1476271702"><li ><div class="pic"><a href="index.php?app=goods&id=331"><img style="padding: 0px 0px 20px; margin: 0px; clear: both; overflow: hidden; width: 680px; color: rgb(0, 0, 0); font-family: Tahoma, Helvetica, Arial, 宋体, sans-serif; background-color: rgb(247, 252, 255);">		 

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表

图片精选