+
 添加收藏
 
 联系方式
  e世博茂业博彩博彩常识 → 网页设计

鼠标指向图片显示大图片JS代码

<!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=utf-8" />
<title>Image Preview with jQuery</title>
<meta name="description" content="Easiest jQuery Tooltip Ever">
<script src="http://www.codefans.net/ajaxjs/jquery1.3.2.js" type="text/javascript"></script>
<script type="text/javascript">
this.imagePreview = function(){ 
  xOffset = 10;
  yOffset = 30;
 $("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>
</meta>
<style>
body {
 margin:0;
 padding:40px;
 background:#fff;
 font:80% Arial, Helvetica, sans-serif;
 color:#555;
 line-height:180%;
}

h1{
 font-size:180%;
 font-weight:normal;
 color:#555;
}
h2{
 clear:both;
 font-size:160%;
 font-weight:normal;
 color:#555;
 margin:0;
 padding:.5em 0;
}
a{
 text-decoration:none;
 color:#f30; 
}
p{
 clear:both;
 margin:0;
 padding:.5em 0;
}
pre{
 display:block;
 font:100% "Courier New", Courier, monospace;
 padding:10px;
 border:1px solid #bae2f0;
 background:#e3f4f9; 
 margin:.5em 0;
 overflow:auto;
 width:800px;
}

img{border:none;}
ul,li{
 margin:0;
 padding:0;
}
li{
 list-style:none;
 float:left;
 display:inline;
 margin-right:10px;
}

#preview{
 position:absolute;
 border:1px solid #ccc;
 background:#333;
 padding:5px;
 display:none;
 color:#fff;
 }


</style>
</head>
<body>
 <h1>Easy Image Preview with jQuery</h1>
 <h2>Image gallery  (without caption)</h2>
 <ul>
  <li><a href="/jscss/demoimg/wall1.jpg" class="preview"><img src="/jscss/demoimg/wall_s1.jpg" alt="gallery thumbnail" /></a></li>
  <li><a href="/jscss/demoimg/wall4.jpg" class="preview"><img src="/jscss/demoimg/wall_s4.jpg" alt="gallery thumbnail" /></a></li>
 </ul>
 <h2>Image gallery (with caption)</h2>
 <ul>
  <li><a href="/jscss/demoimg/wall3.jpg" class="preview" title="Autumn"><img src="/jscss/demoimg/wall_s3.jpg" alt="gallery thumbnail" /></a></li>
  <li><a href="/jscss/demoimg/wall4.jpg" class="preview" title="Skiing on a mountain"><img src="/jscss/demoimg/wall_s4.jpg" alt="gallery thumbnail" /></a></li>
 </ul>
</body>
</html>



来源:
阅读:3258
日期:2012-2-10

【 双击滚屏 】 【 推荐朋友 】 【 评论 】 【 收藏 】 【 打印 】 【 关闭 】 【 字体: 】 
上一篇:用css与图片做的搜索栏目
下一篇:谷歌3D人体浏览器开源:通过浏览器查看人体构造
  >> 相关文章
 
  用css与图片做的搜索栏目
  谈谈FLASH怎么学
  JS实现复制内容时自动加入你网址信息
  HTML网页设计:去掉IE滚动条
  从HTML1到HTML5,HTML的发展史
  如何能让彩票配色方案更吸引人?
  彩票banner字体设计与应用
  块级元素(div)和内联元素(span)
发表评论


点  评: 字数0
用户名:  密码:

  • 尊重网上道德,遵守中华人民共和国的各项有关法律法规
  • 承担一切因您的行为而直接或间接导致的民事或刑事法律责任
  • 本站管理人员有权保留或删除其管辖留言中的任意内容
  • 本站有权在彩票内转载或引用您的评论
  • 参与本评论即表明您已经阅读并接受上述条款
授权使用:茂业博彩 Http://www.nnmy.net Powered by:nnmy Version 05.07.25
Copyright (c) 2005-2006 nnmy.com. All Rights Reserved .
<友情连结> 沙巴平台/ f1赌城/ 万博彩票/ 电子信息产业网/ 何洪庆个人博客/