这篇文章主要介绍了鼠标悬浮停留三秒后显示大图,在网页中还是比较实用的,下面是示例代码
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
鼠标悬浮停留三秒后显示大图,在网页中还是比较实用的
- <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; } }
来源: