发布于 2016-08-21 06:48:34 | 107 次阅读 | 评论: 0 | 来源: 网友投递

这里有新鲜出炉的jQuery示例,程序狗速度看过来!

jQuery javascript框架

jQuery是一个兼容多浏览器的javascript框架,核心理念是write less,do more(写得更少,做得更多)。jQuery在2006年1月由美国人John Resig在纽约的barcamp发布,吸引了来自世界各地的众多JavaScript高手加入,由Dave Methvin率领团队进行开发。


jQuery获取当前鼠标相对位置坐标和点击图片跳转上一张或下一张功能
 
<!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>无标题文档</title> 
<script type="text/javascript" src="jquery-1.3.2.js"></script><!--包含jQuery库文件--> 
<script type="text/javascript" src="jquery.tooltip.js"></script><!--包含jQuery库的tooltip插件文件--> 
<style> 
h1{ 
font-size:180%; 
font-weight:normal; 
color:#555; 
} 
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; 
} 


/* tooltip的样式 */ 

#tooltip{ 
position:absolute; 
border:1px solid #333; 
background:#f7f5d1; 
padding:2px 5px; 
color:#333; 
display:none; 
} 
</style> 
</head> 
<body> 
<div><a href="" class="tooltip"><img src="image/wife.jpg" /></a></div> 
</body> 
</html> 


 
/* 
* Tooltip script 
* powered by 淅淅代码雨 
* 
* written by Wany 
* 
* 
*/ 
this.tooltip = function(){ 
var xOffset = 10;//定义x的偏移量 
var yOffset = 20;//定义y的偏移量 
$("img").mousemove(function(e){ 
var positionX=e.originalEvent.x-$(this).offset().left||e.originalEvent.layerX-$(this).offset().left||0;//获取当前鼠标相对img的x坐标 
var positionY=e.originalEvent.y-$(this).offset().top||e.originalEvent.layerY-$(this).offset().top||0;//获取当前鼠标相对img的y坐标,(以下用不着,可删除) 
var tipTitle;//定义提示标题 
if(positionX<=$(this).width()/2)//当当前鼠标相对x坐标小于图片宽度的一半时执行 
{ 
$('p').remove();//移除p标签 
$('a').attr('href','http 
//www.google.cn');//修改a标签的href属性以改变链接 
tipTitle='谷歌'; 
} 
else 
{ 
$('p').remove(); 
$('a').attr('href','http 
//www.baidu.com'); 
tipTitle='百度'; 
} 
$("body").append("<p id='tooltip'>"+tipTitle+"</p>");//在body标签里添加这个p标签,实现提示功能 
$("#tooltip").css("top",(e.pageY - xOffset) + "px")//为id为tooltip的元素设置css样式 
.css("left",(e.pageX + yOffset) + "px") 
.fadeIn("fast");//添加动画效果 
}, 
function(){ 
$("#tooltip").remove();//鼠标移动时移除tooltip,实现提示和鼠标的相对位置不变 
}); 
$("img").mouseout(function(e){ 
$("#tooltip").remove();//鼠标移出img标签时不再显示tooltip,用remove函数将其移除 
}); 
}; 
$(document).ready(function(){ 
$('img').css('border','none'); 
tooltip(); 
}); 


最新网友评论  共有(0)条评论 发布评论 返回顶部

Copyright © 2007-2017 PHPERZ.COM All Rights Reserved   冀ICP备14009818号  版权声明  广告服务