<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
#shangpin{
background-image: url(images/userimg.jpg);
width: 300px;
height: 300px;
border: 1px red solid;
}
#shangpin div{
width: 80px; height: 80px;
background-color: rgba(200,100,0,0.4);
display: none;
position: relative;
}
#fangDa{
width:200px;height: 200px;
border: 1px red solid;
position: absolute;
left: 300px;
top: 50px;
display: none;
background-size: 500%;
}
</style>
<script src="js/jquery-1.11.0.js"></script>
<script type="text/javascript">
$(function(){
$('#shangpin').hover(
function(){
$('#shangpin div').show();
$('#fangDa').show().css('background-image',$(this).css('background-image'));
},function(){
$('#shangpin div').hide();
$('#fangDa').hide();
}
).mousemove(function(e){
var indexX = e.pageX-$('#shangpin').offset().left;
var indexY =e.pageY-$('#shangpin').offset().top;
//内Div移动
var dleft = 0;
if(indexX-$('#shangpin div').width()/2<0){
dleft = 0;
}else if(indexX-$('#shangpin div').width()/2>$('#shangpin').width() - $('#shangpin div').width()){
dleft = $('#shangpin').width() - $('#shangpin div').width();
}else{
dleft=indexX-$('#shangpin div').width()/2;
}

var dtop = 0;
if(indexY-$('#shangpin div').height()/2<0){
dtop = 0;
}else if(indexY-$('#shangpin div').height()/2>$('#shangpin').height() - $('#shangpin div').height()){
dtop = $('#shangpin').height() - $('#shangpin div').height();
}else{
dtop=indexY-$('#shangpin div').height()/2;
}
$('#shangpin div').css({"top":dtop,"left":dleft});
$('#fangDa').css({'background-position-x':-dleft*3,'background-position-y':-dtop*3})
});

});
</script>
</head>
<body>
<div id="shangpin">
<div></div>
</div>
<div id="fangDa"></div>
</body>
<ml>

JQ 放大镜的更多相关文章

  1. jq仿淘宝放大镜插件

    html部分 //小图 <div id="photoBox"> <img src="图片路径" width="400" h ...

  2. jq商品展示图放大镜 and 原生js和html5写的放大镜效果 ~~效果不错

    <!DOCTYPE HTML><html lang="en-US"><head> <meta charset="UTF-8&qu ...

  3. JQ面向对象的放大镜

    index.html <!DOCTYPE html><html> <head> <meta charset="utf-8" /> & ...

  4. jq的图片放大镜效果

    <div class="imgbox"> <div class="probox"> <img src="" a ...

  5. JQ实战天猫淘宝放大镜

    这个特效平时生活中很常见,话不多说先上效果图. 首先布局,遮罩层是这个效果中的重点精华,也就是下面代码中的shade. <style> * { margin:0px; padding:0p ...

  6. 基于jq图片居中插件 [center]

    最近在做一个项目,大量的图片基于js进行缩放(图片放大镜),考虑用css要写许多hack,而已经基于jq了,干脆写个方法得了. 代码很简单,不用多讲但是很实用. $.fn.extend({ cente ...

  7. JS实现放大镜效果(放大图片)

    注意:里边的两张图片(一大一小)可以自己添加,JQ采用jquery-1.11.3.js版,也可自行调换. HTML代码: <!DOCTYPE html> <html> < ...

  8. JQuery仿购物网站放大镜特效所遇问题及思考

    JQuery仿购物网站放大镜特效所遇问题及思考 先贴下效果图,然后描述起来也就不会不知道我在说什么了. 我碰到的问题一: 一开始我自己总结了是因为两个小原因导致的①使用了mouseover,mouse ...

  9. jq选择器基础

    Jquery $代表选择器 使用jq必须要导入jq文件 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js&qu ...

随机推荐

  1. Docker使用问题记录贴

    请参考: https://blog.csdn.net/u013948858/article/details/78429954 问题:安装Docker之后,执行docker run hello-worl ...

  2. flask 中使用 socket 遇到的坑

    很久没用博客园了,最近涉及到一个问题,需要向前端推送日志 考虑的方案两个,一个是定时ajax 但是这样效率太慢了,二是用socket 那看看有没有轮子咯,面向百度编程,有两个库可以使用 1.flask ...

  3. avue的小白之路

    经过几天的看实例,我稍稍了解到了avue,写这个博客主要是最近学习avue的一个总结.. avue是基于vue与element ui的一个框架,强烈建议等了解这其中道理在学习avue会事半功倍:这是我 ...

  4. hadoop ha zkfc 异常自动切换机制和hdfs 没有空间问题解决

    在我搭建hadoop ha 后,我启动了各个功能,但是发现hadoop hdfs 没法使用,在web 页面也显示hdfs 可用空间为零,并且自动备份机制无法使用,本人也不理解,然后就是指定hdfs t ...

  5. PHP命名空间与自动加载类详解

    本文实例讲述了PHP命名空间与自动加载类.分享给大家供大家参考,具体如下: 今天我要给大家介绍的是PHP的命名空间 和 自动加载类 我先简单的分开演示 在放在一起 大家请看:什么是自动加载类? 想必大 ...

  6. web 11

    Obtaining the JSON: 1.首先,我们将把要检索的JSON的URL存储在变量中. 2.要创建请求,我们需要使用new关键字从XMLHttpRequest构造函数创建一个新的请求对象实例 ...

  7. Mysql初学入门

    最近研究了一下Mysql的初学应用,在此进行整理记录. 1.Windows系统下的安装 我用的是win10系统,在http://dev.mysql.com/downloads/mysql/ 下载相应版 ...

  8. Mybatis中的Caused by: org.apache.ibatis.binding.BindingException: Invalid bound statement (not found): 找不到Mapper.xml文件的问题

    1 首先在配置mapper-locations的时候: classpath:  只在现有目录下寻找配置文件 classpath*: 在现有的项目目录下和依赖的jar包下寻找xml配置文件

  9. Linux了解知识点

    Linux知识点   1.linux系统内核最早由芬兰大学生linus Torvalds开发. 2.Linux主要用于服务器端和嵌入式两个领域. 3.Linux的特点:开放性.多用户.多任务.良好的用 ...

  10. Vue v-for循环添加表单v-model不重复变动的注意事项！

    正常添加,v-model,修改所有循环会得到一样的结果! 定义一个users[]的数组,不要定义全局的user,而是要在Vue里面的方法里定义局部的变量添加.