js购物时的放大镜效果
首先需要两张一样的图片,一张大图,一张小图,大图显示,当鼠标移入时,小图上出现一个滑块,可以滑动,大图也跟着显示,大图的显示区域和小图一样,当滑块滑到不同的位置,大图显示不同的区域,当鼠标移出时,滑块和大图都隐藏。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>放大镜</title>
<style type="text/css">
*{
padding: 0px;
margin: 0px;
}
#left{
width:400px;
height:400px;
border:1px solid blue;
position: relative;
float:left;
background: url(xiao.jpg) no-repeat;
} #left #huakuai{
width:200px;
height:200px;
background:white;
position: absolute;
opacity: 0.6;
filter:alpha(opacity=60);
display: none;
}
#left #cover{
width:400px;
height: 400px;
position: absolute;
z-index: 3;
top:0px;
left:0px;
background: red;
opacity: 0;
filter:alpha(opacity=0);
/*相当于给左边的div加了一个盖子,鼠标直接作用在盖子上,不用作用滑块上,防止滑块的抖动*/
}
#right{
width:400px;
height:400px;
border:1px solid blue;
overflow: hidden;
float: left;
margin-left:20px;
position:relative;
display: none;
}
#right #right_img{
position: absolute;
top:0px;
left:0px;
/*根据鼠标的移动,图片的显示区域显示相应的位置*/
} </style>
<script type="text/javascript">
window.onload=function(){
var oleft=document.getElementById('left');//获得左边原图的div元素
var ohk=document.getElementById('huakuai');//获得滑块元素
var ocover=document.getElementById('cover');//获得盖子元素
var oright=document.getElementById('right');//获得右边div区域
var oright_img=document.getElementById('right_img');//获得右边图片区域 oleft.onmouseover=function(){//当鼠标移入左边的div时,
ohk.style.display='block';//滑块显示
oright.style.display='block';//右边div显示
}
oleft.onmouseout=function(){//鼠标移出,
ohk.style.display='none';//滑块隐藏
oright.style.display='none';//右边div隐藏
}
ocover.onmousemove=function(e){//鼠标在盖子上移动的事件
var ev=e||window.event;//兼容性
var m_left=ev.layerX||ev.offsetX;//兼容性获得鼠标的横坐标
var left=m_left-100;//表示滑块到div左边框的距离,鼠标在div中间
if(left<0){//如果滑块要超出左边框,另左边距等于0
left=0;
}
if(left>200){//如果滑块要超出右边框,另左边框为最大值200
left=200;
}
huakuai.style.left=left+'px';//将左边距赋值给小滑块 var m_top=ev.layerY||ev.offsetY;//同理设置垂直方向的值
var top=m_top-100;
if(top<0){
top=0;
}
if(top>200){
top=200;
}
huakuai.style.top=top+'px'; var right_left=left*-2;//因为大图为小图的2倍,所以乘以2,因为图片要向左上移动,位置像素值为负,所以再乘以-1
var right_top=top*-2;//同理,获得垂直方向的值
oright_img.style.left=right_left+'px';//赋值
oright_img.style.top=right_top+'px';
} }
</script> </head>
<body>
<div id="left">
<div id="huakuai"></div>
<div id="cover"></div>
</div>
<div id="right">
<img src="datu.jpg" id="right_img">
</div> </body>
</html>
图片如下:
js购物时的放大镜效果的更多相关文章
- 利用JS实现购物网站商品放大镜效果
大家几乎都有在网上购物的经验,有的网站会有一个商品放大镜功能, 就是把鼠标移到图片上的时候,旁边会有另外一张大的图片展示,等同于 放大镜效果,那这样的效果怎样实现的呢,我把代码发给大家,请大家参考. ...
- js、jquery实现放大镜效果
在一些电商网站的商品详情页面,都会有放大镜效果,实现起来并不是很困难,今天用了两个小时,写了一个放大镜效果的实例,来分享给大家! 实现的效果大概是这个样子的 预览 先来看一下效果吧,点击下面的链接预览 ...
- 原生js实现简单的放大镜效果
前言:相信很多同学在浏览购物网站的时候都会用到过放大镜的功能,这个功能在日常的网站也会经常用到.接下来我们开始实现一下它吧: (1)首先了解一下放大镜效果的html架构:如下图,它由两部分组成. ht ...
- jquery+js实现鼠标位移放大镜效果
jQuery实现仿某东商品详情页放大镜效果 用jquery+js实现放大镜效果,效果大概如下图! 效果是不是大家很感兴趣,放大镜查看细节,下边大家可以详细看一看具体是怎么实现的.下边直接看代码! HT ...
- js 实现淘宝放大镜功能,可更改配置参数 带完整版解析代码[magnifier.js]
前言: 本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽. 本篇文章为您分析一下原生JS写淘宝放大镜效果 基本功能: 运 ...
- 原生js实现放大镜效果
今天做任务的时候,有一个任务就是让实现电商网站常用的放大镜效果,类似于这样的效果,之前并没有做过这种放大镜效果,刚开始的思路是对图片进行裁剪,但是后来发现实在是难以实现,于是求助了万能的谷歌,发现一个 ...
- js原生淘宝京东宝贝放大镜效果
js实现商城放大镜效果 效果: 鼠标放上去会有半透明遮罩.右边会有大图片局部图. 鼠标移动时右边的大图片也会局部移动. 技术点: Event Event 是一个事件对象,当一个事件发生后,和当前事件发 ...
- Magnifier.js - 支持鼠标滚轮缩放的图片放大镜效果
Magnifier.js 是一个 JavaScript 库,能够帮助你在图像上实现放大镜效果,支持使用鼠标滚轮放大/缩小功能.放大的图像可以显示在镜头本身或它的外部容器中.Magnifier.js 使 ...
- JS 文本输入框放大镜效果
JS 文本输入框放大镜效果 今天下午研究了下 "文本输入框放大镜效果" 当然KISSY官网也有这种组件 请看kissy demo 其实这种效果 对于很多童鞋来说 应该并不陌生!我今 ...
随机推荐
- Oracle rman 命令详解
一.list常用命令总结备忘 list命令列出控制文件.RMAN恢复目录中备份信息, 是我们对所有可见的数据库备份文件的一个最直观的了解的方法 list incarnation; list ba ...
- spring--注解注入--12
12.1 概述 12.1.1 什么是零配置 在SSH集成一章中大家注意到项目结构和包结构是不是很有规律,类库放到WEB-INF/lib文件夹下,jsp文件放到WEB-INF/jsp文件夹下,web ...
- UVA 11426 GCD - Extreme (II) 欧拉函数
分析:枚举每个数的贡献,欧拉函数筛法 #include <cstdio> #include <iostream> #include <ctime> #include ...
- unix时间戳和localtime
今天看代码的时候看到这么一段 void user::setHelpday() { int time = ::getTickCount(); m_helpday = (time +( * ))/( * ...
- Shell的那些事儿
日常工作中,哪种语言对你的帮助最大?我觉得非Shell莫属.最早接触Shell应该是在大学的时候,如做Linux文件系统裁减会用到一些命令,如find, tar, xargs, cp等等,并把它们通过 ...
- mongodb在java驱动包下的操作(转)
推荐几章很有用的文章 java操作参考文档 http://www.cnblogs.com/hoojo/archive/2011/06/02/2068665.html http://blog.csdn. ...
- 多目标遗传算法 ------ NSGA-II (部分源码解析) 临时种群生成新父代种群 fillnds.c
/* Nond-domination based selection routines */ # include <stdio.h> # include <stdlib.h> ...
- WIN10环境下搭建与连接VPN服务器
搭建VPN服务器 0.前言 1.WIN+E打开此电脑 2.勾选始终显示菜单,并应用,确定 3.新建传入连接,可以添加用户,也可以直接选取已有用户 连接VPN服务器 1.打开vpn设置 2.添加vpn连 ...
- PAT 1003. Emergency (25)
1003. Emergency (25) 时间限制 400 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Yue As an emerg ...
- 推送通知/传感器/UIDynamic仿真(推送通知已适配iOS10)
推送通知/传感器/UIDynamic 一.推送通知 1.推送通知简介 什么是推送通知 此处的推送通知与NSNotification没有任何关系 可以理解为,向用户推送一条信息来通知用户某件事情 作用: ...