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


Posted in Javascript onSeptember 09, 2014

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

<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;
}
}
Javascript 相关文章推荐
javaScript 数值型和字符串型之间的转换
Jul 25 Javascript
js 数组克隆方法 小结
Mar 20 Javascript
jquery如何把参数列严格转换成数组实现思路
Apr 01 Javascript
javascript:window.open弹出窗口的位置问题
Mar 18 Javascript
浅谈jQuery事件绑定原理
Jan 02 Javascript
js实现漂浮回顶部按钮实例
May 06 Javascript
javascript删除数组重复元素的方法汇总
Jun 24 Javascript
javascript常用函数(2)
Nov 05 Javascript
javascript 动态脚本添加的简单方法
Oct 11 Javascript
JS控制TreeView的结点选择
Nov 11 Javascript
vue.js分页中单击页码更换页面内容的方法(配合spring springmvc)
Feb 10 Javascript
vue项目打包为APP,静态资源正常显示,但API请求不到数据的操作
Sep 12 Javascript
使用typeof方法判断undefined类型
Sep 09 #Javascript
jquery取子节点及当前节点属性值的方法
Sep 09 #Javascript
jQuery CSS()方法改变现有的CSS样式表
Sep 09 #Javascript
jQuery 浮动导航菜单适合购物商品类型的网站
Sep 09 #Javascript
JavaScript中判断原生函数检查function是否是原生代码
Sep 09 #Javascript
三种取消选中单选框radio的方法
Sep 09 #Javascript
使用JQuery库提供的扩展功能实现自定义方法
Sep 09 #Javascript
You might like
给海燕B411配件机起死回生配上件
2021/03/02 无线电
PHP中使用Session配合Javascript实现文件上传进度条功能
2014/10/15 PHP
php生出随机字符串
2017/07/06 PHP
php判断str字符串是否是xml格式数据的方法示例
2017/07/26 PHP
PHP的new static和new self的区别与使用
2019/11/27 PHP
javascript不同页面传值的改进版
2008/09/30 Javascript
JavaScript 的方法重载效果
2009/08/07 Javascript
推荐一个自己用的封装好的javascript插件
2015/01/29 Javascript
javascript表单验证大全
2015/08/12 Javascript
JS+CSS实现带小三角指引的滑动门效果
2015/09/22 Javascript
jQuery判断元素是否显示 是否隐藏的简单实现代码
2016/05/19 Javascript
JavaScript中Form表单技术汇总(推荐)
2016/06/26 Javascript
JavaScript 中对象的深拷贝
2016/12/04 Javascript
Angular+Bootstrap+Spring Boot实现分页功能实例代码
2017/07/21 Javascript
JavaScript基础进阶之数组方法总结(推荐)
2017/09/04 Javascript
基于Particles.js制作超炫粒子动态背景效果(仿知乎)
2017/09/13 Javascript
BootStrap点击保存后实现模态框自动关闭的思路(模态框)
2017/09/26 Javascript
NodeJS多种创建WebSocket监听的方式(三种)
2020/06/04 NodeJs
vue中选中多个选项并且改变选中的样式的实例代码
2020/09/16 Javascript
[03:22]DOTA2超级联赛专访单车:找到属于自己的英雄
2013/06/08 DOTA
[46:14]VGJ.T vs Liquid 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
使用Python的Supervisor进行进程监控以及自动启动
2014/05/29 Python
在Mac OS上使用mod_wsgi连接Python与Apache服务器
2015/12/24 Python
python3.7简单的爬虫实例详解
2019/07/08 Python
tensorboard实现同时显示训练曲线和测试曲线
2020/01/21 Python
Pytest mark使用实例及原理解析
2020/02/22 Python
Python web如何在IIS发布应用过程解析
2020/05/27 Python
基于Python+QT的gui程序开发实现
2020/07/03 Python
Python字符串查找基本操作代码案例
2020/10/27 Python
python 实现Harris角点检测算法
2020/12/11 Python
css3实现蒙版弹幕功能
2019/06/18 HTML / CSS
网络教育自我鉴定
2014/02/04 职场文书
《三个小伙伴》教学反思
2014/04/11 职场文书
注册资产评估专业求职信
2014/07/16 职场文书
教师批评与自我批评心得体会
2014/10/16 职场文书
PHP实现两种排课方式
2021/06/26 PHP