web前端|js教程
鼠标,放大,图片
web前端-js教程
这个效果最初源于小敏同志的一个想法，刚开始做的时候只能实现弹出的图片是固定的，不能随鼠标移动，最后加以改善，终于实现了比较理想的效果。今天就把制作该效果的经验与大家一同分享。先看看最终效果演示：
HTML结构部分：
先编写一个无序列表的结构，a标签中的img标签用来存放小图片，a标签添加一个rel属性，用来存放大图片的路径。
小游戏连连看源码,ubuntu 部署网页,多模块项目配置tomcat,scray爬虫代理,ui好还是php好,北辰区电子seo服务诚信经营lzw
o2o商城开源源码,怎么查看vscode 分支,ubuntu 17 ip,tomcat弱命令扫描,sqlite3 外键约束,Python分布式爬虫知识点,php 英文日期,宁德短视频seo优化,网站手机登录模板 html,h5专家介绍模板lzw
);
//改变小图片的透明度为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});
});
});
//]]>
到这一步，效果已经差不多了，但是正如蓝秋枫同志提到的，效果还并不完美。如果弹出的大图片超过了浏览器的宽度就会出现滚动条，这对于用户体验来说的确很不好。趁周末有时间我又在原来的基础上进行了修改。
先分析下思路，默认情况下，弹出的大图片的位置始终是在当前鼠标指针的右侧，如果当前鼠标指针离浏览器右侧边界的宽度小于弹出的大图片的宽度时，就会出现图片溢出浏览器的现象。那么只要写一个语句判断当前鼠标指针离浏览器右侧的边界的宽度是否小于大图片的宽度，然后再根据这个判断来显示。
有了上面的思路就好办了，为了使代码更简洁，提高复用性，我新增了一个widthJudge函数用于判断宽度：
仓库管理系统源码,vscode 不自动格式化,ubuntu拼IP,tomcat线程数增多,爬虫的驱动,php 返回当前时间,外贸seo关键词选取工具,android的图标下载网站lzw
function widthJudge(e){
//页面的总宽度减去鼠标当前的X坐标得到右侧边界的宽度
var marginRight = document.documentElement.clientWidth - e.pageX;
//获取弹出的大图片的宽度
var imageWidth = $("#bigimage").width();
//如果右侧边界的宽度小于弹出的大图片的宽度
if(marginRight < imageWidth)
{
//重新计算变量x的值
x = imageWidth + 22;
//此时大图片的位置应该是当前鼠标指针的宽度减去新的x的值
$("#bigimage").css({top:(e.pageY - y ) + px,left:(e.pageX - x ) + px});
}else{ //否则
//仍将x定义为22，这一步千万不能省略，因为之前x的值已经改变
x = 22;
//如果右侧的宽度值够显示大图片，将仍然按照原来的位置显示
$("#bigimage").css({top:(e.pageY - y ) + px,left:(e.pageX + x ) + px});
};
}
最后再结合上面的代码，完整的jQuery代码部分如下：
//<![CDATA[
$(function(){
var x = 22;
var y = 20;
$("a.smallimage").hover(function(e){
$("body").append(
);
$(this).find(img).stop().fadeTo(slow,0.5);
widthJudge(e); //调用宽度判断函数
$("#bigimage").fadeIn(fast);
},function(){
$(this).find(img).stop().fadeTo(slow,1);
$("#bigimage").remove();
});
$("a.smallimage").mousemove(function(e){
widthJudge(e); //调用宽度判断函数
});
function widthJudge(e){
var marginRight = document.documentElement.clientWidth - e.pageX;
var imageWidth = $("#bigimage").width();
if(marginRight < imageWidth)
{
x = imageWidth + 22;
$("#bigimage").css({top:(e.pageY - y ) + px,left:(e.pageX - x ) + px});
}else{
x = 22;
$("#bigimage").css({top:(e.pageY - y ) + px,left:(e.pageX + x ) + px});
};
}
});
//]]>
解决了图片溢出浏览器的问题，这个效果还算不错了。如果你喜欢这个效果，你可以下载源文件。
