js代码_js特效免费下载_JS特效代码网   网页特效   鼠标特效   js图片相册   js特效代码大全
当前位置:首页 > 网页特效 > JS常用代码 > 图片相册

jquery鼠标悬停缩略图、实现放大跟随展示大图片特效代码

发布时间:2015-09-25 13:52:03    您是第0位浏览者

本js特效代码兼容:ie6 、ie7 、ie8 、ie9 、ie10 、ie11 、chrome 、firefox 、opera 、safari 、 等浏览器

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=gb2312" />    
<title>jquery鼠标悬停缩略图、实现放大跟随展示大图片特效代码</title>    
<link href="css/jstxdm.css" rel="stylesheet" type="text/css">    
<script type="text/javascript" src="js/jquery.js"></script>    
<script>     
$(function(){    
var x = 22;    
var y = 20;    
$("a.smallimage").hover(function(e){  //绑定一个鼠标悬停时事件    
//新建一个p标签来存放大图片,this.rel就是获取到a标签的大图片的路径,然后追加到body中    
$("body").append('<p id="bigimage"><img src="'+ this.rel + '" alt="" /></p>');    
//改变小图片的透明度为0.5,结合上面的CSS,看起来就象是图片变暗了    
$(this).find('img').stop().fadeTo('slow',0.5);    
//将鼠标的坐标和声明的x,y做运算并赋值给大图片绝对定位的坐标,然后以fadeIn的效果显示    
$("#bigimage").css({top:(e.pageY - y ) + 'px',left:(e.pageX + x ) + 'px'}).fadeIn('fast');    
},function(){ //鼠标离开后    
//将变暗的图片复原    
$(this).find('img').stop().fadeTo('slow',1);    
//移除新增的p标签    
$("#bigimage").remove();    
});    
$("a.smallimage").mousemove(function(e){  //绑定一个鼠标移动的事件    
//将鼠标的坐标和声明的x,y做运算并赋值给大图片绝对定位的坐标,这样大图片就能跟随图片而移动了    
$("#bigimage").css({top:(e.pageY -y ) + 'px',left:(e.pageX + x ) + 'px'});    
});    
});    
</script>    
</head>    
<body>    
<ul id="gallery">    
       	<li><a href="http://www.jstxdm.com/" class="smallimage" rel="images/001_big.jpg"><img src="images/001_small.jpg" alt="" /></a></li>    
       	<li><a href="http://www.jstxdm.com/" class="smallimage" rel="images/002_big.jpg"><img src="images/002_small.jpg" alt="" /></a></li>    
       	<li><a href="http://www.jstxdm.com/" class="smallimage" rel="images/003_big.jpg"><img src="images/003_small.jpg" alt="" /></a></li>    
</ul>    
</body>    
</html>



鼠标悬停 放大 跟随

jquery鼠标悬停图片高亮,从左边滑动出标题信息显示效果

Css3鼠标悬停图片高亮特效

jQuery鼠标悬停导航底部边框线条伸缩动画效果

jQuery鼠标悬停内容动画切换效果

jQuery鼠标悬停在图片上显示说明按钮的HoverEx插件

jquery hover网页左侧鼠标悬停列表改变菜单样式特效

jquery仿win8风格的图片九宫格布局,鼠标悬停图片文字切换特效

jquery实现鼠标悬停九宫格图片高亮显示特效

jquery实现中英文字切换导航条,鼠标悬停滑动下拉二级导航菜单

jquery实现图片放大镜插件,鼠标悬停局部图片放大镜头显示特效

jquery实现九宫格图片鼠标悬停上下滑动切换特效

js特仿flash导航条鼠标悬停上下文字滑动特效

html5实现鼠标悬停图片动画展示特效

jquery实现鼠标悬停弹出消息提示框特效

jquery实现鼠标悬停图片动画显示文字信息特效

jquery实现鼠标悬停图片突出显示大图,另外带标签关键词功能

css3实现鼠标悬停特效代码

jquery实现鼠标悬停图片遮罩文字从左滑出特效代码

jquery鼠标悬停向上滑出显示标题文字特效代码

jquery鼠标悬停缩略图、实现放大跟随展示大图片特效代码

jqzoom仿京东商品详细页产品图片放大镜特效

jQuery多张图片相册上下切换,放大预览等特效

jquery仿淘宝图片放大镜特效

jquery实现图片放大镜插件,鼠标悬停局部图片放大镜头显示特效

jquery实现图片放大镜效果制作变焦镜头图片放大查看特效

jquery实现input表达输入文字,文字放大镜特效

js实现图片放大镜展示特效代码

jquery实现鼠标悬停图片居中放大特效代码

jquery banner插件实现全屏图片放大缩小切换轮播特效代码

jQuery商城网站商品放大镜查看效果特效代码

仿QQ空间图片相册全屏预览大图特效代码_图片预览_图片放大

支持放大显示效果的TOP排行

jquery仿新浪微博图片收起、查看放大、向左转、向右转展示特效代码

js放大镜 _jquery图片放大镜特效插件_移动鼠标图片特效代码_商城源码

js实现购物商城图片相册,图片放大展示特效代码