原生JS实现的放大镜效果实例代码


Posted in Javascript onOctober 15, 2016

这是我用原生js写的放大镜效果,与各种各样的框架技术相比,我喜欢使用原生的js,在这里,想和大家一起谈谈原生和框架技术的理解与个人喜好。

<!DOCTYPE HTML>
<html>
<head>
<title>js放大镜效果</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<style>
*{
margin:0px;
padding:0px;
border:none;
list-style:none;
}
#box{
margin:80px auto;
width: 352px;
}
#box p
{
width: 350px;
height: 350px;
border: 1px solid #ddd;
margin-bottom: 5px; 
}
#box p img
{
width:350px;
height:350px;
}
#box h1
{
width: 352px;
height: 54px;
overflow:hidden; 
position:relative;
}
#box h1 div
{
width:310px;
height: 54px;
margin:0px auto;
position:relative;
}
#box h1 div ul
{
position:absolute;
left: 0px;
top: 0px;
}
#box h1 ul li
{
width: 62px; 
float: left;
}
#box h1 ul li img
{
width: 50px;
height: 50px;
padding: 1px;
border: 1px solid #CECFCE;
}
#box h1 img.hoveredThumb{
border: 2px solid #e4393c;
padding: 0;
}
/*中等大小的图片显示区域*/
p#medImgBox{
position: relative;
}
#jing{
position: absolute;
left: 0;
top: 0;
width: 175px;
height: 175px;
border-radius:50%;
background: #ffd;
opacity: 0.7;
display: none;
}
/*悬于图片/jing上方的专用于接收鼠标移动事件的
一个完全透明的层*/
#medImgBox #mian{
display: block;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
cursor: move;
opacity: 0;
}
/**
大图显示区域
**/
#largeImgBox{
position:absolute;
width: 175px;
height: 175px;
border-radius:50%;
border: 1px solid #faa;
top: 0px;
left: 352px; 
overflow: hidden;
display: none;
}
#largeImg{
display: none;
position: absolute;
}
</style> 
</head>
<body >
<div id="box">
<p id="medImgBox">
<img id="mediumImg" src="images/product-s1-m.jpg" />
<span id="jing"></span>
<span id="mian"></span>
<span id="largeImgBox">
<img id="largeImg"/>
</span>
</p>
<h1>
<div>
<ul id="list">
<li><img src="images\product-s1.jpg" /></li>
<li><img src="images\product-s2.jpg" /></li>
<li><img src="images\product-s3.jpg" /></li>
<li><img src="images\product-s4.jpg" /></li>
<li><img src="images\product-s1.jpg" /></li>
</ul>
</div>
</h1>
</div>
<script>
var imgList = document.querySelectorAll('#box ul li img');
for(var i=0; i<imgList.length; i++){
var img = imgList[i];
img.onmouseover = changeThumbImg;
}
function changeThumbImg(){
var previousHovered = document.querySelector('.hoveredThumb');
if(previousHovered==null){
this.className = 'hoveredThumb'; 
changeMediumImg(this.src); //修改中等图片的src
}else if(previousHovered!=this){
previousHovered.removeAttribute('class');
this.className = 'hoveredThumb';
changeMediumImg(this.src); //修改中等图片的src
}
}
function changeMediumImg(thumbSrc){
var dotIndex = thumbSrc.lastIndexOf('.');
var prefix = thumbSrc.substring(0, dotIndex);
var suffix = thumbSrc.substring(dotIndex);
var mediumSrc = prefix + '-m'+suffix;
document.getElementById('mediumImg').src = mediumSrc;
}
/**
为放大镜jing添加鼠标移动事件
**/
document.querySelector('#mian').onmousemove = 
function(event){
var x = event.offsetX; //事件相对于事件源的偏移量
var y = event.offsetY; 
var jing = document.getElementById('jing'); 
var w = jing.offsetWidth; //jing的宽和高
var h = jing.offsetHeight;
var left = x<w/2 ? 0 : (x-w/2);
var top = y<h/2 ? 0 : (y-h/2);
if(x>(w*2-w/2)){
left = w*2 - w;
}
if(y>(h*2-h/2)){
top = h*2 - h;
}
jing.style.left = left+'px';
jing.style.top = top+'px';
//修改大图的位置/
var largeImg = document.getElementById('largeImg');
largeImg.style.left = (-left*largeImg.width/350) + 'px';
largeImg.style.top = (-top*largeImg.height/350)+'px';
}
document.querySelector('#mian').onmouseover = function(){
//显示jing
var jing = document.getElementById('jing');
jing.style.display = 'block';
var largeImgBox = document.getElementById('largeImgBox');
largeImgBox.style.display = 'block';
//获取当前要显示的大图的src
var src = document.querySelector('#mediumImg').src;
var dotIndex = src.lastIndexOf('.');
var prefix = src.substring(0, dotIndex-2);
var suffix = src.substring(dotIndex);
src = prefix + '-l'+ suffix;
var largeImg = document.getElementById('largeImg');
largeImg.src = src;
largeImg.style.display='block';
}
document.querySelector('#mian').onmouseout = 
function(){
//除去jing
var jing = document.getElementById('jing');
jing.style.display = 'none';
//除去大图显示区
document.getElementById('largeImgBox').style.display = 'none';
}
</script>
</body>
</html>

以上所述是小编给大家介绍的原生JS实现的放大镜效果实例代码,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的,在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript 写类方式之一
Jul 05 Javascript
jQuery帮助之筛选查找 children([expr])
Jan 31 Javascript
基于jQuery实现图片的前进与后退功能
Apr 24 Javascript
15款jQuery分布引导插件分享
Feb 04 Javascript
javascript截取字符串小结
Apr 28 Javascript
javascript实现计时器的简单方法
Feb 21 Javascript
酷! 不同风格页面布局幻灯片特效js实现
Feb 19 Javascript
JavaScript定时器制作弹窗小广告
Feb 05 Javascript
动手写一个angular版本的Message组件的方法
Dec 16 Javascript
mpvue小程序仿qq左滑置顶删除组件
Aug 03 Javascript
微信小程序导航栏跟随滑动效果的实现代码
May 14 Javascript
小程序实现背景音乐播放和暂停
Jun 19 Javascript
jQuery通过ajax方法获取json数据不执行success的原因及解决方法
Oct 15 #Javascript
Bootstrap分页插件之Bootstrap Paginator实例详解
Oct 15 #Javascript
jstl中判断list中是否包含某个值的简单方法
Oct 14 #Javascript
js中获取 table节点各tr及td的内容简单实例
Oct 14 #Javascript
jQuery ajaxForm()的应用
Oct 14 #Javascript
jQuery的 $.ajax防止重复提交的两种方法(推荐)
Oct 14 #Javascript
jQuery如何防止Ajax重复提交
Oct 14 #Javascript
You might like
php base64 编码与解码实例代码
2017/03/21 PHP
thinkPHP5.1框架中Request类四种调用方式示例
2019/08/03 PHP
层序遍历在ExtJs的TreePanel中的应用
2009/10/16 Javascript
Javascript 二维数组
2009/11/26 Javascript
基于jQuery实现点击同时更改两个iframe的网址
2010/07/01 Javascript
js定义对象或数组直接量时各浏览器对多余逗号的处理(json)
2011/03/05 Javascript
分享20款好玩的jQuery游戏
2011/04/17 Javascript
JS保留两位小数,多位小数的示例代码
2014/01/07 Javascript
firefox浏览器用jquery.uploadify插件上传时报HTTP 302错误
2015/03/01 Javascript
使用impress.js制作幻灯片
2015/09/09 Javascript
JavaScript中对JSON对象的基本操作示例
2016/05/21 Javascript
D3.js实现折线图的方法详解
2016/09/21 Javascript
js/jq仿window文件夹移动/剪切/复制等操作代码
2017/03/08 Javascript
js编写简单的聊天室功能
2017/08/17 Javascript
Webpack 服务器端代码打包的示例代码
2017/09/19 Javascript
JavaScript&quot;模拟事件&quot;的注意要点详解
2019/02/13 Javascript
说说Vuex的getters属性的具体用法
2019/04/15 Javascript
初学node.js中实现删除用户路由
2019/05/27 Javascript
vue 实现Web端的定位功能 获取经纬度
2019/08/08 Javascript
js实现点击生成随机div
2020/01/16 Javascript
JS实现的定时器展示简单秒表、页面弹框及跳转操作完整示例
2020/01/26 Javascript
js实现百度淘宝搜索功能
2020/02/17 Javascript
微信小程序点击按钮动态切换input的disabled禁用/启用状态功能
2020/03/07 Javascript
vue 实现超长文本截取,悬浮框提示
2020/07/29 Javascript
JavaScript如何操作css
2020/10/24 Javascript
跟老齐学Python之做一个小游戏
2014/09/28 Python
django开发之settings.py中变量的全局引用详解
2017/03/29 Python
python实现对求解最长回文子串的动态规划算法
2018/06/02 Python
Python之关于类变量的两种赋值区别详解
2020/03/12 Python
Pytorch高阶OP操作where,gather原理
2020/04/30 Python
Python列表推导式实现代码实例
2020/09/09 Python
薇诺娜官方网上商城:专注敏感肌肤
2017/05/25 全球购物
年终晚会活动方案
2014/08/21 职场文书
感恩老师演讲稿600字
2014/08/28 职场文书
导游词之沈阳清昭陵
2019/12/28 职场文书
浅谈MySQL函数
2021/10/05 MySQL