<!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. Aspnet Mvc 前后端分离项目手记（二）关于token认证

    在前后端分离的项目中,首先我们要解决的问题就是身份认证 以往的时候,我们使用cookie+session,或者只用cookie来保持会话. 一,先来复习一下cookie和session 首先我们来复习 ...

  2. Win10家庭版WindowsUpdate属性为灰色

    一般的取消Windows更新只需要打开任务管理器,点击服务 然后点击左下角的打开服务 找到WindowsUpdate,右键属性 按照正常的电脑只要在启动类型中选择禁用,然后在恢复里的第一次操作选择无操 ...

  3. 微信小程序1

    本次项目主要了解及使用微信小程序,以及更好的理解微信动画,wxss,JavaScript,ajax,xml等技术: 借助的平台是java后端设计语言以及微信小程序界面,设计 该系统分为1,个人用户端: ...

  4. 生产环境，vue页面跳转的时候，js报404的问题

    最近上线的一个vue项目,需要各种路由跳转,在开发和测试环境都没问题,但是在生产环境,发现后期更新代码的时候,有些机型(ios机型,暂未发现android有问题)跳转路由的时候,标题修改了,但是内容并 ...

  5. 记录新项目中遇到的技术及自己忘记的技术点【DES加密解密，MD5加密，字符串压缩、解压，字符串截取等操作】

    一.DES加密.解密 #region DES加密解密 /// <summary> /// 进行DES加密 /// </summary> /// <param name=& ...

  6. 练习2-1 Programming in C is fun!

    练习2-1 Programming in C is fun! 一 问题描述 本题要求编写程序,输出一个短句“Programming in C is fun!”. 输入格式: 本题目没有输入. 输出格式 ...

  7. jQuery（三）

    jquery链式调用 jquery对象的方法会在执行完后返回这个jquery对象,所有jquery对象的方法可以连起来写: $('#div1') // id为div1的元素 .children('ul ...

  8. 一. 优化小程序自身的Storage

    小程序中的存储只有 Storage ,特性如下: 上限为 10MB 以用户纬度隔离,同一个设备,A 无法访问 B 用户的数据. 持久缓存,只有在用户关掉小程序才会删除,如果空间不足,会进行 LRU , ...

  9. vue开发（开发环境+项目搭建）

    Vue.js是一套构建用户界面的渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合.另一方面,Vu ...

  10. 详解 vue-cli 的打包配置文件代码（给大家写写注释）

    一.前言 对于webpack基础不好,node指令不通的童鞋.估计对自己搭建Vue.react脚手架是相当头疼的,有种无从下手的感觉.然而,从头看这2块,耗时太长,而且说实话得练才行,不练练手看不明白 ...