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

15款优秀jQuery 图片展示插件(slideshow)整理

关于jJQuery的插件有很多,图片展示的插件也有很多,往往在真正用到的时候在网上一搜一大把一大把的,但是就是找不到适合自己使用的,在这里我们这里了一些比较常用的、效果比较好的jQuery 图片展示插...
  • jiestyle21
  • jiestyle21
  • 2011年08月10日 13:55
  • 7388

JS,jQuery轻松实现input图片上传预览功能

话不多说,直接上效果图: 这里我弄了一个图片而已 浏览图片之后效果: 也可以是这样的效果: 当然,也可以放大图片 具体教程下载地址:jQuery轻松实...
  • weixin_39974202
  • weixin_39974202
  • 2017年11月16日 17:58
  • 41

jQuery仿淘宝图片移动

* {margin:0; padding:0;} body {font-size:12px; color:#222; font-family:Verdana,Arial,Helvetica,sans-...
  • cui_angel
  • cui_angel
  • 2012年07月18日 10:50
  • 3402

js框架jquery瀑布流图片墙效果代码下载,点击相册图片展示大图

js框架jquery瀑布流图片墙效果代码下载,点击相册图片展示大图 源代码下载地址:http://www.zuidaima.com/share/1795084037721088.htm...
  • yaerfeng
  • yaerfeng
  • 2016年05月25日 09:24
  • 1149

html+css图片展示

MyHtml.html --> *{margin:0px;} #imgList{width:989px;height:370px;} #imgLi...
  • u012651389
  • u012651389
  • 2015年02月25日 22:39
  • 490

java swing 图片展示器

java swing 图片展示器
  • zhangchaoyi1a2b
  • zhangchaoyi1a2b
  • 2016年04月23日 15:47
  • 174

图片展示

1、图片展示的效果图如下所示   2、activity_main.xml布局代码如下 http://schemas.android.com/apk/res/android"     xmlns:too...
  • sktvssk
  • sktvssk
  • 2015年07月04日 12:23
  • 72

CSS+JS实现图片集展示

CSS+JS实现图片集展示: 1、图片的展示与翻页; 2、点击图片放大图片。
  • GISShiXiSheng
  • GISShiXiSheng
  • 2014年12月31日 10:24
  • 1728

iOS 封装多张图片的展示器+demo

封装的一个图片的展示的功能 支持GIF 暂时只支持网络图片 提供一组URL 即可自动完成所有操作。 支持长按保存图片到相册,支持横屏查看图片,查看长图。点击图片时的放大、缩小都做了动画效果。 ...
  • wangxinxu521
  • wangxinxu521
  • 2017年06月13日 17:05
  • 116

实现鼠标拖拉图片交换图片位置

注意:需要先引用jQuery文件 编辑产品 $(function () { var pics = [ ...
  • u010740174
  • u010740174
  • 2016年11月06日 23:55
  • 233
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:图片展示JQ
举报原因:
原因补充:

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