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

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

<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;
}
}
时间: 2014-09-07

js和css写一个可以自动隐藏的悬浮框

今天写一个小实例,用js和css写一个可以自动隐藏的悬浮框.css肯定是用来控制样式的,js用来控制器显示与隐藏的.显示与隐藏通常有两种方法实现:1,用js控制其显示属性:2,用js控制其大小. 今天要说的就是通过控制其大小来实现元素的显隐,原理:为其注册鼠标移入.移出的事件,当鼠标移出对象范围,将其宽度设为1,当鼠标再次移入该对象,将其宽度还原.很简单,我们一起看看吧! 隐藏状态: 左边那一条窄线就是隐藏以后的悬浮框. 显示状态: 当鼠标滑到左边的悬浮框上,悬浮框就又显示出来了. CSS样式:

js 固定悬浮效果实现思路代码

复制代码 代码如下: <script type="text/javascript"> (function($){ var ele_fix = $("#div_right"); //浮动窗口 var _main = $(".main"); //浮动区域 var ele_offset_top = ele_fix.offset().top; //浮动区域高度 $(window).scroll(function(){ var scro_top

javascript 鼠标悬浮图片显示原图 移出鼠标后原图消失(多图)

具体用法是这样的: 将Javascript代码放到</body>前(将脚本代码放在页面底端有助于提高页面速度,但是我现在还没有切身的体会) 复制代码 代码如下: <script language=JavaScript> function mouseOutPic()    //当鼠标移出时,隐藏原图 { if(window.event.toElement.id!="img000") bigPic.style.visibility = "hidden&qu

javascript手工制作悬浮菜单

有选择性的重复造一些轮子,未必是件坏事.Aaron的博客上加了一个悬浮菜单,貌似显得很高大上了.虽然这类小把戏也不是头一次见了,但是从未自己写过.今天就选择性的拿这个功能写一写.下面是这个轮子的开发过程,也可以当作是一篇需求文档的分析和实现过程. 演示地址:http://sandbox.runjs.cn/show/to8wdmuy 源码下载:https://github.com/bjtqti/floatmenu 第一步创建dom节构: 复制代码 代码如下: <!DOCTYPE html> &l

JS实现悬浮移动窗口(悬浮广告)的特效

js方法: 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html>    <head>        <title> New Document </title>        <meta name="Gener

js QQ客服悬浮效果实现代码

代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Cont

js 左右悬浮对联广告特效代码

js制作web网页左右悬浮广告特效. 引用: 复制代码 代码如下: <script src="js/ad.js" type="text/javascript"></script> 2.页面调用 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-trans

js点击出现悬浮窗效果不使用JQuery插件

JQuery有很多这样的插件,但是我们公司不用jquery,没有插件,所以我就试着自己写,我也不知道别人是怎么写的,纯粹是按着自己的想法来的. 直接上代码: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Demo</title> <script type="text/javascript">

鼠标悬浮显示二级菜单效果的jquery实现

1.布局: <div class="show"> <img src="~/images/head_icon.png" /> <div class="drop" style=" display:none; z-index:80000" id="profileMenu"> <ul> <li> <a class="pass" s

JavaScript 悬浮窗口实现代码

效果如图:代码如下: 悬浮窗口示例 window.onscroll = function () { var div = document.getElementById("divSuspended"); div.style.top = document.body.scrollTop; } window.onresize = window.onscroll; function init(){ var df = document.createDocumentFragment(); for(v

js制作的鼠标悬浮时产生的下拉框效果

先给大家补补课,讲个简单的例子: 复制代码 代码如下: <html><head> <meta type-equiv="Content-Type" content="text/html"> <meta charset="utf-8″> <script type="text/javascript"> jq=jQuery.noConflict(); jq=(document).rea

JS实现侧悬浮浮动实例代码

效果: 思路: 首先,加载onscroll控制滚动条.然后写缓存运动的方法,缓冲运动的方法是先计算出DIV缓冲的速度,并且将其取整,再进行运动判断什么时候到达终点.最后将其参数返回.再在onscroll里面调用此方法,并且将终点计算出来赋予此方法的参数. 代码: 复制代码 代码如下: <head runat="server">    <title></title>    <style type="text/css"> 

原生JS实现的放大镜效果实例代码

这是我用原生js写的放大镜效果,与各种各样的框架技术相比,我喜欢使用原生的js,在这里,想和大家一起谈谈原生和框架技术的理解与个人喜好. <!DOCTYPE HTML> <html> <head> <title>js放大镜效果</title> <meta http-equiv="content-type" content="text/html;charset=utf-8"/> <style

Vue.js实现输入框绑定的实例代码

实现效果如下: 实现代码及注释 <!DOCTYPE html> <html> <head> <title>vue.js数据动态编辑</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style type=

Angular.js 实现数字转换汉字实例代码

AngularJS 简介 AngularJS 是一个 JavaScript 框架.它可通过 <script> 标签添加到 HTML 页面. AngularJS 通过 指令 扩展了 HTML,且通过 表达式 绑定数据到 HTML. 下面通过本文给大家介绍Angular.js 实现数字转换汉字实例代码,具体代码如下所示: // 1.实现输入数字输出对应汉字,要求使用angularjs,不准使用$watch函数,for循环:提示:ng-change指令 <div ng-app="my

js给table赋值的实例代码

要求:用js实现给一个table赋值如上:(定义X=70 [HTML] <table class="table table-bordered"> <thead> <tr> <th colspan="5" class="active">经济条件较好地区学费表</th> </tr> <tr> <th></th> <th>4-8人班&

JS判断输入字符串长度实例代码(汉字算两个字符,字母数字算一个)

js判断输入字符串长度实例代码(汉字算两个字符,字母数字算一个) 文本输入时,由于数据库表字段长度限制会导致提交失败,因此想到了此方法验证. 废话不多说上代码: <html> <head> <title>js判断输入字符串长度(汉字算两个字符,字母数字算一个)</title> <style type="text/css"> .pbt { margin-bottom: 10px; } .ie6 .pbt .ftid a, .ie

BootStrap fileinput.js文件上传组件实例代码

1.首先我们下载好fileinput插件引入插件 <span style="font-size:14px;"><link type="text/css" rel="stylesheet" href="fileinput/css/fileinput.css" rel="external nofollow" /> <script type="text/javascript

用js实现简单算法的实例代码

一.冒泡排序 var arr1=[3,9,2,7,0,8,4]; for(var i=0;i<arr1.length;i++){ for(var j=i+1;j<arr1.length;j++){ var temp=0; if(arr1[i]>arr1[j]){ temp=arr1[i]; arr1[i]=arr1[j]; arr1[j]=temp; } } } alert(arr1); 二.快速排序 var a=[3,5,0,9,2,7,5]; function quickSort(a

js实现String.Fomat的实例代码

引言 拼接字符串用习惯了C#的String.Format.今天看别人的代码在js中也封装了一个js的String.Format,用来拼接字符串和DOM. js实现和调用String.Format String.Format = function (str) { for (var i = 1; i < arguments.length; i++) { var parent = "\\{" + (i - 1) + "\\}"; var reg = new RegE

JS正则表达式判断有效数实例代码

<script type="text/javascript"> function validate(){ var reg = new RegExp("^[0-9]*$"); var obj = document.getElementById("name"); if(!reg.test(obj.value)){ alert("请输入数字!"); } if(!/^[0-9]*$/.test(obj.value)){ a