Jquery版放大镜效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>放大镜</title>
<style>
*{margin:;padding:;list-style: none}
#div1{width:200px;height:200px;position:absolute;left:100px;border:1px solid #;top:100px;border:1px solid #;}
#span1{width:80px;height:80px;background:green;position:absolute;left:;top:;z-index:;opacity:0.4;filter:alpha(opacity:);cursor: all-scroll;display:none;}
#div1 img{width:200px;height:200px;}
#div2{width:400px;height:400px;overflow: hidden;position:absolute;left:302px;top:100px;border:1px solid #;display:none;}
#div2 img{width:600px;hgeight:600px;position:absolute;}
</style>
<script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>
</head>
<body>
<div id="div1">
<span id="span1"></span>
<img src="http://img5.imgtn.bdimg.com/it/u=96369774,1200533339&fm=206&gp=0.jpg" alt="">
</div>
<div id="div2">
<img src="http://img5.imgtn.bdimg.com/it/u=96369774,1200533339&fm=206&gp=0.jpg" alt="" id="img1">
</div>
</body>
<script>
$(function(){
var oDiv1=$('#div1');
var oDiv2=$('#div2');
var oSpan=$('#span1');
var oImg=$('#img1');
oDiv1.mouseover(function(){
oSpan.css({display:'block'});
oDiv2.css({display:'block'});
});
oDiv1.mouseout(function(){
oSpan.css({display:'none'});
oDiv2.css({display:'none'});
});
oDiv1.mousemove(function(ev){
var l=ev.clientX-oDiv1.offset().left-oSpan.outerWidth()/;
var t=ev.clientY-oDiv1.offset().top-oSpan.outerHeight()/;
if(l<)l=;
if(t<)t=;
if(l>oDiv1.outerWidth()-oSpan.outerWidth())l=oDiv1.outerWidth()-oSpan.outerWidth();
if(t>oDiv1.outerHeight()-oSpan.outerHeight())t=oDiv1.outerHeight()-oSpan.outerHeight();
oSpan.css({
left:l,
top:t
});
var scaleX=l/(oDiv1.outerWidth()-oSpan.outerWidth());
var scaleY=t/(oDiv1.outerHeight()-oSpan.outerHeight());
var kL=oImg.outerWidth()-oDiv2.outerWidth();
var kT=oImg.outerHeight()-oDiv2.outerHeight(); oImg.css({
left:-kL*scaleX,
top:-kT*scaleY
})
})
})
</script>
</html>
Jquery版放大镜效果的更多相关文章
- jQuery实现放大镜效果
1.1.1 摘要 相信大家都见过或使用过放大镜效果,甚至实现过该效果,它一般应用于放大查看商品图片,一些电商网站(例如:凡客,京东商城,阿里巴巴等)都有类似的图片查看效果. 在接下来的博文中,我们将向 ...
- 使用jquery实现放大镜效果
原文:使用jquery实现放大镜效果 实现原理 首先,我们讲解一下放大镜效果的实现方式: 方法一:准备一张高像素的大图,当鼠标放到原图上,加载显示大图的对应位置. 方法二:对原图片进行放大,也就是调整 ...
- js、jquery实现放大镜效果
在一些电商网站的商品详情页面,都会有放大镜效果,实现起来并不是很困难,今天用了两个小时,写了一个放大镜效果的实例,来分享给大家! 实现的效果大概是这个样子的 预览 先来看一下效果吧,点击下面的链接预览 ...
- 【Demo】jQuery 图片放大镜效果——模仿淘宝图片放大效果
实现功能: 模仿淘宝图片放大效果,鼠标移动到小图片的某一处,放大镜对应显示大图片的相应位置. 实现效果: 实现代码: <!DOCTYPE html> <html> <he ...
- 用JavaScript中jQuery编写放大镜效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 用jquery实现放大镜效果
----css代码--- *{margin:0;padding:0;} .showimg{position:relative;width:450px;height:420px;border:1px s ...
- jquery版手风琴效果
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- 关于jQuery中实现放大镜效果
1.1.1 摘要 相信大家都见过或使用过放大镜效果,甚至实现过该效果,它一般应用于放大查看商品图片,一些电商网站(例如:凡客,京东商城,阿里巴巴等)都有类似的图片查看效果. 在接下来的博文中,我们将向 ...
- jQuery实现图片放大镜效果
实现图片放大镜的原理: 给放大镜元素一个对应的html元素为<div class='right'> 设置这个div的宽高固定为某个值(350px,350px) 设置div的css为超出部分 ...
随机推荐
- #linux 下Sublime的安装
1.Download http://www.sublimetext.com/2 Installtion use tar 解压压缩包,这里我将包改了个名字,这样就不用写空格的转义字符了,改成Subli ...
- Windows底层开发前期学习准备工作
1.若对Windows底层开发没有兴趣,不建议继续深究, 若有些兴趣可以继续. 2. 先广泛打基础,比如C/ASM/C++/MFC,再学习Windows核心编程,对R3上的一些开发有所熟悉,再系统的学 ...
- POJ 2392 Space Elevator(多重背包)
显然塔的总高度不会超过最大的a[i],而a[i]之前的可以到达的高度 是由a值更小的块组成,所以按照a从小到大的顺序去转移. 然后就是多重背包判断存在性了,几乎和coin那题一样. 数据没coin丧病 ...
- js中随机数获取
// 结果为0-1间的一个随机数(包括0,不包括1) var randomNum1 = Math.random(); //console.log(randomNum1); // 函数结果为入参的整数部 ...
- 小弟在研究CUDA时出现一个问题,求解
这是<GPU高性能编程CUDA中文实战>中的例子,第七章,热传导模拟,但是出现下面的问题,求牛人解读.小弟跪谢... 主要问题就是关键字变白. 但是添加需要的头文件后一些系统自带的关键字也 ...
- Redis学习记录(三)
1.Redis集群的搭建 1.1redis-cluster架构图 架构细节: (1)所有的redis节点批次互联(PING-PONG机制),内部使用二进制协议优化传输速度和带宽. (2)节点的fail ...
- Java第六次作业:RuPengGame setGameSize setGameTitle alert loadBgView playSound pause closeSound confirm input createText setTextPosition setTextColor setTextFontSize hideText showText CreateImage(number)
package com.swift; import java.awt.Color; import com.rupeng.game.GameCore;//导入游戏引擎包 //实现Runnable接口 p ...
- vue学习之路 - 1.初步感知
一.安装 这里使用node的npm包管理工具进行操作.操作前请先下载node. 在工程文件夹中使用以下命令安装vue: npm install vue 如下图所示:我在 helloworld 文件夹中 ...
- Uva 派 (Pie,NWERC 2006,LA 3635)
依然是一道二分查找 #include<iostream> #include<cstdio> #include<cmath> using namespace std; ...
- java中equals和==的区别详解
java中的数据类型,可分为两类: 1.基本数据类型. byte,short,char,int,long,float,double,boolean这八大原始数据类型他们之间的比较,使用“==”,比较的 ...