鼠标悬浮停留三秒后自动显示大图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 相关文章推荐
event.srcElement 用法笔记e.target
Dec 18 Javascript
jQuery元素选择器用法实例
Dec 23 Javascript
jquery移动点击的项目到列表最顶端的方法
Jun 24 Javascript
jquery实现滑动特效代码
Aug 10 Javascript
JS深度拷贝Object Array实例分析
Mar 31 Javascript
Javascript的比较汇总
Jul 25 Javascript
JavaScript实现移动端轮播效果
Jun 06 Javascript
Angular5中提取公共组件之radio list的实例代码
Jul 10 Javascript
微信小程序签到功能
Oct 31 Javascript
微信小程序实现留言板(Storage)
Nov 02 Javascript
layui实现三级联动效果
Jul 26 Javascript
详解JS函数防抖
Jun 05 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脚本的10个技巧(3)
2006/10/09 PHP
计算一段日期内的周末天数的php代码(星期六,星期日总和)
2009/11/12 PHP
php文件操作小结(删除指定文件/获取文件夹下的文件名/读取文件夹下图片名)
2016/05/09 PHP
JavaScript高级程序设计 阅读笔记(十二) js内置对象Math
2012/08/14 Javascript
详解JavaScript中shift()方法的使用
2015/06/09 Javascript
原生JavaScript实现瀑布流布局
2020/06/28 Javascript
轻松实现JavaScript图片切换
2016/01/12 Javascript
利用iscroll4实现轮播图效果实例代码
2017/01/11 Javascript
微信小程序实现图片预加载组件
2017/01/18 Javascript
简单实现js悬浮导航效果
2017/02/05 Javascript
js模态对话框使用方法详解
2017/02/16 Javascript
js实现自定义进度条效果
2017/03/15 Javascript
vue 中动态绑定class 和 style的方法代码详解
2018/06/01 Javascript
浅谈node中的cluster集群
2018/06/02 Javascript
vue填坑之webpack run build 静态资源找不到的解决方法
2018/09/03 Javascript
微信小程序登录数据解密及状态维持实例详解
2019/05/06 Javascript
Vue2.0实现简单分页及跳转效果
2019/07/29 Javascript
js实现点击图片在屏幕中间弹出放大效果
2019/09/11 Javascript
ES6 十大特性简介
2020/12/09 Javascript
原生js中运算符及流程控制示例详解
2021/01/05 Javascript
Python操作MySQL数据库的方法
2018/06/20 Python
详解Python3 pickle模块用法
2019/09/16 Python
PyTorch使用cpu加载模型运算方式
2020/01/13 Python
python如何判断IP地址合法性
2020/04/05 Python
Python3 ID3决策树判断申请贷款是否成功的实现代码
2020/05/21 Python
浅谈HTML5 &amp; CSS3的新交互特性
2016/07/19 HTML / CSS
Juice Beauty官网:有机美容产品,护肤与化妆品
2020/06/13 全球购物
卫校中专生个人自我评价
2013/09/19 职场文书
网吧收银员岗位职责
2013/12/14 职场文书
眼镜促销方案
2014/03/15 职场文书
房屋租赁委托书范本
2014/10/04 职场文书
成都人事代理协议书
2014/10/25 职场文书
单位工作证明范本
2015/06/15 职场文书
小学生法制教育心得体会
2016/01/14 职场文书
2016年先进教师个人事迹材料
2016/02/26 职场文书
详解NumPy中的线性关系与数据修剪压缩
2022/05/25 Python