- 浏览: 25218 次
- 性别:
- 来自: 北京
文章分类
最新评论
<div class="container"> <ul> <li><a href="b.jpg" class="preview"><img src="b.jpg" width="40" height="40" alt="gallery thumbnail" /></a></li> <li><a href="cc.jpg" class="preview"><img src="cc.jpg" width="40" height="40" alt="gallery thumbnail" /></a></li> </ul> </div> <style> *{padding:0px;margin:0px;} li{list-style:none; float:left;margin-left:10px;} .container{ width:1000px; height:600px; margin:0 auto; background:#FFC; } #preview { position:absolute; border:1px solid #ccc; background:#333; padding:5px; display:none; color:#fff; } </style> <script> /* * Image preview script * powered by jQuery (http://www.jquery.com) * * written by Alen Grakalic (http://cssglobe.com) * * for more info visit http://cssglobe.com/post/1695/easiest-tooltip-and-image-preview-using-jquery * */ this.imagePreview = function(){ /* CONFIG */ xOffset = -30; yOffset = 10; // these 2 variable determine popup's distance from the cursor // you might want to adjust to get the right result /* END CONFIG */ $("a.preview").hover(function(e){ this.t = this.title; this.title = ""; var c = (this.t != "") ? "<br/>" + this.t : ""; $("body").append("<p id='preview'><img src='"+ this.href +"' alt='Image preview' />"+ c +"</p>"); $("#preview") .css("top",(e.pageY - xOffset) + "px") .css("left",(e.pageX + yOffset) + "px") .fadeIn("fast"); }, 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"); }); }; // starting the script on page load $(document).ready(function(){ imagePreview(); }); </script>
发表评论
-
录屏软件
2015-09-14 15:31 01、LICEcap 这个录屏软件已用过,比较好用, 最后 ... -
switch 语句
2015-07-23 15:01 431switch 语句是 if 语句的兄弟语句。 一、 if ( ... -
常用编辑器
2015-06-19 10:52 0dw eclipse Sublime Brackets W ... -
sublime text3 安装及快捷键--ruby环境安装
2015-06-18 16:46 0安装插件:http://www.cnblogs.com/Ris ... -
远程关机
2014-10-31 16:15 0若要关闭远程访问的计算机,可按Alt+F4调出 注销 关机 ... -
向上/向下 取整
2014-10-15 15:58 5771.丢弃小数部分,保留整数部分 parseInt(5/2) ... -
jquery获取焦点后光标在字符串后
2014-09-27 18:05 0jquery获取焦点后光标在字符串后,当input获得焦点后, ... -
解除绑定
2014-09-27 17:44 0$(this).unbind("click" ... -
sass 学习
2014-08-21 17:11 0学习sass: http://www.w3cplus.com ... -
sublime 安装插件
2014-08-21 17:11 01、首先下载sublime(可以在360管家中直接下载)。-- ... -
sass 考拉的安装
2014-08-21 15:57 0安装环境:http://www.w3cplus.com/sas ... -
轻量级图形报表工具JSCharts (JSChart),内置函数中文参考
2014-08-19 16:55 0JSChart是一个轻量级的在 ... -
AJAX是什么? AJAX的交互模型(流程)? AJAX跨域的解决办法?
2014-07-29 17:28 3571、什么是 AJAX ? AJAX = 异步 JavaScr ... -
各种小例子
2014-06-06 17:15 4631、加载页面后,直接跳转到想要的位置。 jQuery.fn ... -
网页在线验证工具
2014-06-06 15:54 0网页在线验证工具(W3C国际标准验证) 免费在线检测你的网 ... -
通配符*的使用
2014-02-18 11:03 292css 通配符 "*" 可以消除浏览器的默 ... -
添加到收藏夹
2013-11-25 15:51 353支持火狐和ie <script type="t ... -
ie中改变滚动条的样式(overflow-y:auto)
2013-10-14 18:07 2871首先写一个div,设置宽 ... -
css自动换行 ie6 css强制换行 white-space:nowrap
2013-10-13 10:27 416网页中有这样的需求,外层宽度固定了,内层每个li宽度不定,依靠 ... -
如何使浮动的元素居中
2013-09-05 17:43 911<div class="content ...
相关推荐
jQuery简单实现鼠标经过小图显示大图
鼠标经过小图的时候出现大图。适合多图片展览。大图片的定位是根据小图片的位置定位的。所以小图片的 外层不能定义超出影藏属性(overflow:hidden)。
又一个鼠标滑过小图显示大图的CSS特效。。
Jquery鼠标移小图显示大图 Powerful jQuery with Image Zoomer
鼠标经过抖动图片,点击显示大图.
简单的鼠标移入小图显示大图 简单的鼠标移入小图显示大图 简单的鼠标移入小图显示大图 简单的鼠标移入小图显示大图
鼠标滑过小图片时,js实现鼠标hover的提示效果,提示内容为当前小图片的大图片
鼠标经过图片会放大图片 同时显示图片的代替文本alt属性值
淘宝SDK模块代码 鼠标经过右侧小图,左侧显示大图
NULL 博文链接:https://chen-miao.iteye.com/blog/1465431
鼠标滑过小图看大图的素材及效果鼠标滑过图片出现大图片提示层效果js代码
鼠标划过缩略图显示大图
JQuery 鼠标移到小图上显示大图
Jquery相册鼠标经过放大图片插件实例源码,供大家一起参考学习。
鼠标移上去显示大图的代码,网页特效鼠标移上去显示大图的代码,网页特效鼠标移上去显示大图的代码,网页特效
鼠标移到缩略图显示大图,鼠标移上小图显示大图
js特效鼠标悬浮显示大图,鼠标移动到图片上显示相关大图~!
鼠标滑过图片出现大图片提示层效果js代码
鼠标经过显示大图,鼠标经过显示大图,鼠标经过显示大图
鼠标移上去旁边显示大图|跟着鼠标的图|鼠标移到小图后跟着鼠标的大图