jQuery 点击图片跳转上一张或下一张功能的实现代码

大疯子445

大疯子445

2016-02-19 13:32

清醒时做事,糊涂时读书,大怒时睡觉,无聊时关注图老师为大家准备的精彩内容。下面为大家推荐jQuery 点击图片跳转上一张或下一张功能的实现代码,无聊中的都看过来。

代码如下:

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)
!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
diva href=""img src="image/wife.jpg" //a/div
/body
/html


代码如下:

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)
/*
* 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();
});
展开更多 50%)
分享

猜你喜欢

jQuery 点击图片跳转上一张或下一张功能的实现代码

Web开发
jQuery 点击图片跳转上一张或下一张功能的实现代码

jquery 图片 上一张 下一张 链接效果(续篇)

Web开发
jquery 图片 上一张 下一张 链接效果(续篇)

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

CSS教程:一张图片实现圆角

Web开发
CSS教程:一张图片实现圆角

鼠标移动到一张图片时变为另一张图片

Web开发
鼠标移动到一张图片时变为另一张图片

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

PS怎样把一张图片放到另一张图片上?

PhotoShop PS PS教程
PS怎样把一张图片放到另一张图片上?

使用一张或两张图片创建大背景网站

Web开发
使用一张或两张图片创建大背景网站

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

Frame控件的使用

Frame控件的使用

VisualBasic控件的使用二

VisualBasic控件的使用二
下拉加载更多内容 ↓