鼠标悬浮停留三秒后自动显示大图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 相关文章推荐
js下拉菜单语言选项简单实现
Sep 23 Javascript
回车直接实现点击某按钮的效果即触发单击事件
Feb 27 Javascript
jQuery实现的多屏图像图层切换效果实例
May 07 Javascript
javascript封装简单实现方法
Aug 11 Javascript
JS遍历页面所有对象属性及实现方法
Aug 01 Javascript
vuejs动态组件给子组件传递数据的方法详解
Sep 09 Javascript
AngularJS模板加载用法详解
Nov 04 Javascript
js实现一个猜数字游戏
Mar 31 Javascript
浅谈小程序 setData学问多
Feb 20 Javascript
vue实现随机验证码功能的实例代码
Apr 30 Javascript
JQuery animate动画应用示例
May 14 jQuery
vue实现整屏滚动切换
Jun 29 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
PHP使用GD库输出汉字的方法【测试可用】
2016/11/10 PHP
php 二维数组时间排序实现代码
2016/11/19 PHP
基于Laravel实现的用户动态模块开发
2017/09/21 PHP
Prototype使用指南之selector.js
2007/01/10 Javascript
JavaScript 获取当前时间戳的代码
2010/08/05 Javascript
jQuery渐变发光导航菜单的实例代码
2013/03/27 Javascript
JavaScript:new 一个函数和直接调用函数的区别分析
2013/07/10 Javascript
JS实现清除指定cookies的方法
2014/09/20 Javascript
jquery复选框多选赋值给文本框的方法
2015/01/27 Javascript
jquery模拟实现鼠标指针停止运动事件
2016/01/12 Javascript
基于javascript实现checkbox复选框实例代码
2016/01/28 Javascript
javascript和jQuery实现网页实时聊天的ajax长轮询
2016/07/20 Javascript
Backbone中View之间传值的学习心得
2016/08/09 Javascript
微信小程序 获取javascript 里的数据
2017/08/17 Javascript
浅谈React和Redux的连接react-redux
2017/12/04 Javascript
Vue Element 分组+多选+可搜索Select选择器实现示例
2018/07/23 Javascript
详解如何配置vue-cli3.0的vue.config.js
2018/08/23 Javascript
JavaScript设计模式之装饰者模式实例详解
2019/01/17 Javascript
vue组件三大核心概念图文详解
2019/05/30 Javascript
javascript实现的字符串转换成数组操作示例
2019/06/13 Javascript
使用vscode快速建立vue模板过程详解
2019/10/10 Javascript
JS创建自定义对象的六种方法总结
2020/12/15 Javascript
原生js 实现表单验证功能
2021/02/08 Javascript
[51:11]2014 DOTA2国际邀请赛中国区预选赛5.21 LGD-CDEC VS DT
2014/05/22 DOTA
解决python gdal投影坐标系转换的问题
2020/01/17 Python
解决python DataFrame 打印结果不换行问题
2020/04/09 Python
如何理解委托
2012/01/06 面试题
什么是三层交换,说说和路由的区别在那里
2014/09/01 面试题
高中毕业自我评价
2014/02/08 职场文书
违反工作纪律检讨书
2014/02/15 职场文书
艾滋病宣传活动总结
2014/05/08 职场文书
党员干部形式主义个人整改措施
2014/09/17 职场文书
干部职工纪律作风整改措施思想汇报
2014/10/11 职场文书
个人工作表现自我评价
2015/03/06 职场文书
销售经理助理岗位职责
2015/04/13 职场文书
如何解决.cuda()加载用时很长的问题
2021/05/24 Python