图片展示JQ

原创 2016年05月30日 20:47:43

<style type="text/css">
body,ul,li{ margin:0px; padding:0px;}
ul{
list-style-type: none;
border:1px solid #ccc;
width:1040px;
height: 250px;
margin-top: 20px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
z-index:1;
}
li{ float:left;
height: 250px;
width: 250px; margin:0px 5px;
}
#tooltip {

width:auto !important;width:100%;
text-align:center; z-index:2; top:0px; background:url(images/bg.png) repeat;
}
</style>
<script src="jquery-1.11.3.js" type="text/javascript" /></script>
<script>
$(function(){
var x=10;
var y=20;
$("a.tooltip").mouseover(function(e){
this.myTitle=this.title;
this.title="";
var imgTitle=this.myTitle? "<br/>" + this.myTitle:"";
var tooltip ="<div id='tooltip'><img src='"+ this.href +"' alt='产品预览图/'>"+imgTitle+"</div>";
$("body").append(tooltip);
$("#tooltip").css({
"top": (e.pageY+y)+"px",
"left":(e.pageX+x) +"px"
}).show("fast"); }).mouseout(function(){
this.title = this.myTitle;
$("#tooltip").remove();
}).mousemove(function(e){
$("#tooltip").css({
"top": (e.pageY+y)+"px",
           "left":(e.pageX+x) +"px" 
});
});
})
</script>





<body>

<ul>
  <li><a href="images/xlszrp_big.jpg" class="tooltip" title="香辣水煮肉片"><img src="images/xlszrp.jpg" alt="香辣水煮肉片"></a></li>
  <li><a href="images/szrp_big.jpg" class="tooltip" title="水煮肉片"><img src="images/szrp.jpg" alt="水煮肉片"></a></li>
  <li><a href="images/szrp2_big.jpg" class="tooltip" title="水煮肉片"><img src="images/szrp2.jpg" alt="水煮肉片"></a></li>
  <li><a href="images/sgszrp_big.jpg" class="tooltip" title="私房水煮肉片"><img src="images/sgszrp.jpg" alt="私房水煮肉片"></a></li>
</ul>
</body>
版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

Android GridView做已选图片展示效果(类似写微博写朋友圈)

查看了网络上一些仿写微博时已选图片的展示的功能,感觉都为能达到自己的需求,或者局限性太大。作为一个合格的工程师在找不到好例子的时候就应该去自己定义一个View了。 根据直观的展示方式需要的是GridV...

html+css图片展示

MyHtml.html --> *{margin:0px;} #imgList{width:989px;height:370px;} #imgLi...

jQuery实现QQ空间图片展示效果

Index.html图片浏览支持键盘左右方向键,增强用户体验 QQ Photo <link rel="stylesheet"
  • WuLex
  • WuLex
  • 2017-01-07 16:14
  • 691

基于jQuery的图片展示(横向滚动,可左右控制)

今天在网上看了一个图片展示的实例,就整理一下贴了出来,为的是以后使用方便,也可以和大家一起分享。 下面是整个页面,如果要使用,只需把整个页面拷贝过去,然后修改图片路径,把jQuery的包也要放进去。...

解决:使用Photoswipe进行图片展示

python 2.7 Django 1.6.1 photoswipe前言 对于前端的照片存储,已经在前一篇博文中进行展示,使用的是dropzone.js的包,图片存储的作用就是为了数据的再调用...

图片展示,视频播放的项目

这个项目使用了MVP架构来搭建的。 后端数据则是集成了Bmob后端云,解决了数据方面的问题。 使用的话需要大家自行去创建个Bmob账户,然后填入ApplicationId 就可以使用 了。整个项目的功...

图片展示(手动左右切换)

1、html部分: 2、css部分: 3、js部分: 注:要引入maquery.js插件

仿新浪,微信等图片展示

缩小回执,移动回执等

利用javaScript做一个简易的图片展示

首先,我们要准备展示的素材,我准备了8张图片,并将他们放在网站素材的目录下,如图所示: 并将他们的名称统一设置为img+数字。 图片展示 主界面的代码 运行结果...

织梦dedecms软件模型发布页添加多图片展示方法

织梦系统大家都比较熟悉吧,在使用过程当中也遇到了很多问题,就比如软件模板想添加几个截图的展示,而织梦自带的下载模型是不支持多图上传的,如下图: 这个就是在软件介绍下面增加了一个页面截图展示区 由于织...
  • boyit0
  • boyit0
  • 2015-07-20 17:48
  • 1064
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)