<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档 </title>
<style type="text/css" media="screen">
body { margin:0; padding: 0; font-family: 'trebuchet ms', trebuchet, verdana }
div,pre { margin:0; padding:0 }
h2 { margin: 20px 0 5px 0; padding: 0 }
p.intro { margin: 0; padding: 15px; background: #eee; font-size: small; }
#thumbs { position: relative; width: 198px; height: 198px; }
div.thumb { float: left; padding: 1px; width: 64px; height: 64px; }
div.thumb img { border: 2px solid white; cursor: pointer }
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.hoverpulse.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('div.thumb img').hoverpulse().each(function() {
var $img = $(this);
var link = $img.attr('data-link');
$img.attr('title','Goto: ' + link);
$img.click(function() {
window.open(link);
return false;
});
});
});
</script>
</head>
<body>
<div id="thumbs">
<div class="thumb"><img src="1.jpg" width="64" height="64" data-link="http://google.com" /></div>
<div class="thumb"><img src="1.jpg" width="64" height="64" data-link="http://yahoo.com" /></div>
<div class="thumb"><img src="1.jpg" width="64" height="64" data-link="http://msn.com" /></div>
<div class="thumb"><img src="1.jpg" width="64" height="64" data-link="http://facebook.com" /></div>
<div class="thumb"><img src="1.jpg" width="64" height="64" data-link="http://twitter.com" /></div>
<div class="thumb"><img src="1.jpg" width="64" height="64" data-link="http://jquery.com" /></div>
<div class="thumb"><img src="1.jpg" width="64" height="64" data-link="http://sitepoint.com" /></div>
<div class="thumb"><img src="1.jpg" width="64" height="64" data-link="http://tuaw.com" /></div>
<div class="thumb"><img src="1.jpg" width="64" height="64" data-link="http://ajaxian.com" /></div>
</div>
</body>
</html>
分享到:
相关推荐
鼠标点击图片放大功能 源代码鼠标点击图片放大功能 源代码鼠标点击图片放大功能 源代码
CSS3鼠标经过图片旋转放大特效是一款采用CSS3结合图片实现的鼠标悬停到图标上面旋转放大展示效果。
图片方格形排列方式,鼠标移动到单个图片上后,图片全屏显示
c# 图片放大缩小(鼠标点击放大区域为原始大小)
jquery实现鼠标悬停图片预览功能的效果下载
通过鼠标滚动来放大或缩小图片,提供了一个属性src来让用户自己添加图片。该功能被我封装成一个用户自定义控件了,有源代码。
jquery图片放大功能(类似放大镜查看效果),希望对研究前端的朋友有所帮助。
界面上有三张图片,当鼠标指针移动到某图片之上,该图片会放大显示,当鼠标移到另一张图片之上时,前一张图片变为原大小,后一张图片放大显示。
c# 实现版的类似于Window图片查看器的东西 功能有:鼠标滚轮放大 鼠标拖动图像 放大时以鼠标点击选择的点位中心放大 Esc键按界面大小显示等 如有问题请联系QQ:78499261
C#winform实现鼠标滚轮放大/缩小图片功能, 并可以在该放大/缩小的图片上截图并保存(截图功能类似QQ截图), 缩放过程界面无刷新!
HTML css图片放大效果,鼠标放在图片上后图片放大,离开后缩小
鼠标悬停改变图片大小。鼠标悬停在图片上,可以实现改变图片的大小效果。
对图片进行缩放的显示操作. zip文件之家加入eclipse即可.
JS实现图片鼠标移上放大,JS实现在复制图片功能,JS图片自动放大类,Javascriopt图片控制 考虑到程序的藕合度,可移植度,最好封装一个图片自动放大,点击复制JS类,对于所要操作放大的图象对象实现松藕合,即对WEB界面实现...
图片放大镜插件,鼠标移动到图片放大功能。图片放大镜插件,鼠标移动到图片放大功能。
类似淘宝产品图片放大功能的jquery插件,鼠标移动到,出现放大镜,能将图片局部进行放大,可自行修改里面的功能。
C# 写的图片查看器,实现了图片的放大缩小旋转,等功能,是用来练手的必备参考代码
当鼠标放在图片上的时候会放大所放区域 类似京东商场查看商品图功能
类似Windows图片查看器,实现图像的缩放,滑动鼠标中间的滚轮,可以实现图像的逐级缩放。类似Windows图片查看器,实现图像的缩放,滑动鼠标中间的滚轮,可以实现图像的逐级缩放。