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

前端技术 2023/09/02 JavaScript

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

<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 alt=\"【81发六锦系列组合烟花】\" src=\"data/files/store_927/goods_51/small_201312121557314803.JPG\" height=\"60\" width=\"60\"></a><b>1</b></div>
<div class=\"info\">
<div class=\"title\"><a href=\"index.php?app=goods&id=331\">【81发六锦系列组合烟花】</a></div>
<div class=\"price\">¥200.00</div>
</div>
</li>
<li >
<div class=\"pic\"><a href=\"index.php?app=goods&id=336\"><img alt=\"【八喜系列组合烟花】五福临门、六六大顺、七星高照、八方得利\" src=\"data/files/store_927/goods_33/small_201312121630335585.JPG\" height=\"60\" width=\"60\"></a><b>2</b></div>
<div class=\"info\">
<div class=\"title\"><a href=\"index.php?app=goods&id=336\">【八喜系列组合烟花】五福临门、六六大顺、七星高照、八方得利</a></div>
<div class=\"price\">¥180.00</div>
</div>
</li>
<li >
<div class=\"pic\"><a href=\"index.php?app=goods&id=375\"><img alt=\"【五福系列组合烟花】福运长流、福满人间、福寿满堂、福如东海、福到财来\" src=\"data/files/store_927/goods_193/small_201312130956337166.JPG\" height=\"60\" width=\"60\"></a><b>3</b></div>
<div class=\"info\">
<div class=\"title\"><a href=\"index.php?app=goods&id=375\">【五福系列组合烟花】福运长流、福满人间、福寿满堂、福如东海、福到财来</a></div>
<div class=\"price\">¥260.00</div>
</div>
</li>
<li style=\"border-color:#fff;\" >
<div class=\"pic\"><a href=\"index.php?app=goods&id=399\"><img alt=\"合家欢乐组合烟花\\小礼花\" src=\"data/files/store_927/goods_197/small_201312131059578989.JPG\" height=\"60\" width=\"60\"></a><b>4</b></div>
<div class=\"info\">
<div class=\"title\"><a href=\"index.php?app=goods&id=399\">合家欢乐组合烟花\\小礼花</a></div>
<div class=\"price\">¥480.00</div>
</div>
</li>
</ul>
<ul class=\"box box2\" id=\"box2_1476271702\" style=\"display:none;\">
<li >
<div class=\"pic\"><a href=\"index.php?app=goods&id=310\"><img alt=\"套餐烟花-儿孙满堂\" src=\"data/files/store_927/goods_92/small_201312121508128170.jpg\" height=\"60\" width=\"60\"></a> <b>1</b></div>
<div class=\"info\">
<div class=\"title\"><a href=\"index.php?app=goods&id=310\">套餐烟花-儿孙满堂</a></div>
<div class=\"price\">¥888.00</div>
</div>
</li>
<li >
<div class=\"pic\"><a href=\"index.php?app=goods&id=305\"><img alt=\"套餐烟花-六六大顺\" src=\"data/files/store_927/goods_136/small_201312121455369033.jpg\" height=\"60\" width=\"60\"></a> <b>2</b></div>
<div class=\"info\">
<div class=\"title\"><a href=\"index.php?app=goods&id=305\">套餐烟花-六六大顺</a></div>
<div class=\"price\">¥666.00</div>
</div>
</li>
<li >
<div class=\"pic\"><a href=\"index.php?app=goods&id=303\"><img alt=\"套餐烟花-一路顺发\" src=\"data/files/store_927/goods_118/small_201312121451582290.jpg\" height=\"60\" width=\"60\"></a> <b>3</b></div>
<div class=\"info\">
<div class=\"title\"><a href=\"index.php?app=goods&id=303\">套餐烟花-一路顺发</a></div>
<div class=\"price\">¥1,688.00</div>
</div>
</li>
<li style=\"border-color:#fff;\" >
<div class=\"pic\"><a href=\"index.php?app=goods&id=300\"><img alt=\"套餐烟花-喜事连连\" src=\"data/files/store_927/goods_14/small_201312121443346243.jpg\" height=\"60\" width=\"60\"></a> <b>4</b></div>
<div class=\"info\">
<div class=\"title\"><a href=\"index.php?app=goods&id=300\">套餐烟花-喜事连连</a></div>
<div class=\"price\">¥1,288.00</div>
</div>
</li>
</ul>
</div>
</div>
</div>


后端处理

//ajax
function ajaxBigImage()
{

if(!empty($_POST[\'goods_id\'])){
$goods_id=$_POST[\'goods_id\'];

$goodsimg_mod = & m(\'goodsimage\');
$uploadedfile_mod = & m(\'uploadedfile\');
//$file_id = $goodsimg_mod->getOne(\"select file_id from `ecm_goods_image` WHERE goods_id={$goods_id} ORDER BY file_id DESC\");

//获取file_id 字符串
$file_arr = $goodsimg_mod->getCol(\"select file_id from `ecm_goods_image` WHERE goods_id={$goods_id} ORDER BY file_id DESC\");
if(!empty($file_arr)){
$file_str = implode(\",\",$file_arr);
}
//echo $file_str;

$url_arr = $uploadedfile_mod->getAll(\"select file_type,file_path from `ecm_uploaded_file` WHERE file_id IN({$file_str}) ORDER BY add_time DESC\");

if(!empty($url_arr)){
foreach ($url_arr as $v){
if($v[\'file_type\'] == \'image/gif\'){
$url = $v[\'file_path\'];
break;
exit();
}else {
unset($v);
}
}
}

//$url = $uploadedfile_mod->getOne(\"select file_path from `ecm_uploaded_file` WHERE file_id={$file_id} ORDER BY add_time DESC\");

if(!empty($url)){
echo $url;
exit();
}else{
echo 0;
exit();
}
}else{
echo 0;
}
}

本文地址:https://www.stayed.cn/item/5899

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见,何事秋风悲画扇。