图片展示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>

相关文章推荐

JS实现可左右滚动产品图片展示

JS实现图片滚动展示 var Speed_1 = 10; //速度(毫秒) var Space_1 = 20; //每次移动(px) var PageWidth_1 = 116 * 3;...
  • aerchi
  • aerchi
  • 2012年01月09日 17:50
  • 3887

html+css实现3D旋转图片展示

MyHtml.html --> *{margin:0px ; padding:0px} body{background:url("imgs/bg.jp...

html+css实现爱奇艺图片展示

MyHtml.html --> *{margin:0px ; padding:0px;} #big{width:100%;} .main...

【Android】0行代码实现任意形状图片展示--android-anyshape

前言在Android开发中, 我们经常会遇到一些场景, 需要以一些特殊的形状显示图片, 比如圆角矩形、圆形等等。关于如何绘制这类形状, 网上已经有很多的方案,比如自定义控件重写onDraw方法, 通过...

推荐几款非常棒的 jQuery 全景图片展示插件

jquery.cyclotron.js 一款非常简单的 jQuery 全景图片展示插件,拖动鼠标即可进行全景浏览。 在线演示   源码下载   Panoramic Photo Viewer...

Android--图片展示--photoview开源项目解析与使用

先说使用() 在自己的项目中使用  只需要在 xml 文件里面将  原有的imageview  替换为  uk.co.senab.photoview.PhotoView   就能使用 如图: ...

IOS开发之所有类型的UIKeyboardType图片展示

在使用UITextField的时候,我们经常会有需求来控制打开的键盘的类型,虽然文档里都有相应类型的说明,但都不够直观。现在,把所有的UIKeyboardType来以图片展示下。可以直观的来选择所需的...
  • ccf0703
  • ccf0703
  • 2012年06月17日 10:50
  • 11553

android-自定义View-GridListView(仿Q空间好友动态列表图片展示方式)

先来看下实现的效果图:

jquery 图片展示--翻牌旋转效果

因客户需要图片展示翻牌效果,本人对Flash又是不熟悉,特用Jquery开发这一效果,自认为还不错,满足客户需求,代码也非常简单,希望对需要的朋友有所帮助,现在把具体Jquery代码展示如下: 一、...

android 关于WebView点击图片展示大图

最近因为项目的需要 在加载webview的时候如果有图片展示点击能够查看大图,刚开始百思不得其解,后来经过多方的努力得以实现。 这一行代码是为了重写js交互 webView.setWebVie...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:图片展示JQ
举报原因:
原因补充:

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