鼠标移动到图片上时,显示大图片

HTML标签中的一部分,仅供参考

<tr>
<td><input type="checkbox"
class="checkbox1"/></td>
<td>1002</td>

<td>小猫咪</td>
<td><img src="img/02.jpg" height="100"
width="100" /></td>            
  //图片
<td>200</td>
<td><input type="button"
value="添加"/></td>
</tr>

<img id="imgTip" class="clsImg" src="img/04.jpg" />  
 //写在外面,隐藏显示,定位提示图片的位置

.clsImg{
position:absolute;
border:1px solid
#ccc;
width:200px;
height:200px;
display:none;

}

JS部分实现功能:

<script type="text/javascript"
src="../jquery-1.8.3.js"></script>
<script
type="text/javascript">
$(function(){

$("table tr:nth-child(odd)").css("background","#CCF");  
 //奇偶行变色

var x=5; var y=15;
$("table tr td img").mousemove(function(e) {

$("#imgTip").attr("src",this.src).css({"top":(e.pageY+y)+"px","left":(e.pageX+x)+"px"}).show(600);

});

$("table tr td img").mouseout(function() {

$("#imgTip").hide();
});

/*复选框单机事件*/

$("#checkAll").click(function() {
if(this.checked){
$("table
tr td
input[type=checkbox]").attr("checked",true);
}else
{
$("table tr
td input[type=checkbox]").attr("checked",false);
}
});

});
</script>

鼠标移动到图片上时,显示大图片,布布扣,bubuko.com

时间: 05-07

鼠标移动到图片上时,显示大图片的相关文章

C# chart,有关如何在鼠标移动到Series上时显示节点及数据 (有待继续更新)

一.效果与思路 效果: 解决方案1 用chart的mousemove时间,实时跟踪鼠标最近的X轴的位置,然后把cursorX设置到那个位置上,让用户知道我是选的那一个X的值,同时用tooltip显示该X轴上所有的Y值,结贴了谢谢大家. 至于如何显示鼠标移动到的那个series上的数据节点,可以在Mousmove时,用一个击中测试,判断. 参考代码,击中测试获得点数据点的索引: if (e.HitTestResult.ChartElementType == ChartElementType.Dat

CSS如何实现当鼠标放在图片上时改变边框

CSS如何实现当鼠标放在图片上时改变边框:建议:尽可能的手写代码,可以有效的提高学习效率和深度.很多网页都有这样的效果,当鼠标放在图片链接上的时候,图片的边框会发生变化.下面就简单介绍一下如何实现此种效果.实例代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://ww

android高仿微信UI点击头像显示大图片效果

转自:http://www.cnblogs.com/Jaylong/archive/2012/09/27/androidUI.html 用过微信的朋友朋友都见过微信中点击对方头像显示会加载大图,先贴两张图片说明下: 这种UI效果对用户的体验不错,今天突然有了灵感,试着去实现,结果就出来了.. 下面说说我的思路: 1.点击图片时跳转到另一个activity,然后显示加载的效果,即progressbar 2.显示图片的之前先弹出自定义dialog,然后模拟加载一段时间后,显示整张大图片,要全屏显示,

图片操作,图片上放个水印图片

知识点: 1.先创建一个Image,再创建一个水印图片Image,再创建画布Graphic 问题: 图片上放置一个水印图片 解决方案 1 <%@ WebHandler Language="C#" Class="ShuiYin" %> 2 3 using System; 4 using System.Web; 5 using System.Drawing; 6 7 public class ShuiYin : IHttpHandler { 8 9 publ

ueditor使用-图片上传正常,图片显示异常404

做个小项目,用到了ueditor,其中需要在ueditor中上传图片. 问题症状: 点击上传图片的按钮后选择图片,上传到了目的文件夹,但是显示不了,f12查看也是404.后来发觉显示图片时路径不对. 解决方案: 翻看官网文档,找到了个博客:http://popozhu.github.io/2014/07/03/ueditor%E5%9B%BE%E7%89%87%E4%B8%8A%E4%BC%A0%E8%B7%AF%E5%BE%84%E9%85%8D%E7%BD%AE/ 说的还蛮详细.找了下原因,

妈蛋:kinMaxShow轮播图异常,WebUploader图片上传坑爹,图片被压缩了

今天晚上在改造轮播图. 原来的代码是这样的: <div> <img src="${static}/image/index/banner/`.jpg" /> </div> <div> <img src="${static}/image/index/banner/2.jpg" /> </div> <div> <img src="${static}/image/index/

鼠标移到图片上时,图片“友好”的渐进效果

.box img:hover { -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -webkit-transition: all 0.6s linear; -moz-transition: all 0.6s linear; }

显示大图片的技巧

尽量不要使用setImageBitmap或setImageResource或BitmapFactory.decodeResource来设置一张大图, 因为这些函数在完成decode后,最终都是通过java层的createBitmap来完成的,需要消耗更多内存. 因此,改用先通过BitmapFactory.decodeStream方法,创建出一个bitmap,再将其设为ImageView的 source, decodeStream最大的秘密在于其直接调用JNI>>nativeDecodeAsse

Asp.net 2.0 无刷新图片上传 显示缩略图 具体实现

简单三步实现图片无刷新上传:注意是上传,至于上传时的验证,比如图片的尺寸,大小,格式判断.限制等,自行解决. 兼容性想还不错:FF,CH,IE,猎豹,都是可以实现的.如果看到回显.当然就是成功了. 经历了好几天的不停的钻牛角尖,终于将这个二货弄出来了.真是煞费苦心啊.但是做出来的瞬间还是蛮开心的. 第一步:我们需要加载几个JS库. jquery库 jquery.form.js库 下载这两个库,并引用到页面中. 以下为页面中 JS 代码: function upload() { var optio