<!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. java-数组排序--计数排序、桶排序、基数排序

    计数排序引入 不难发现不论是冒泡排序还是插入排序,其排序方法都是通过对每一个数进行两两比较进行排序的,这种方法称为比较排序,实际上对每个数的两两比较严重影响了其效率,理论上比较排序时间复杂度的最低下限 ...

  2. Linux安装Tomcat-Nginx-FastDFS-Redis-Solr-集群——【第六集之补充：文本编辑器vi/vim】

    一:vi/vim的基本使用流程,掌握这三个步骤就算是入门vi或者vim.接下来的学习都是对vim命令和使用技巧的掌握,这要求各位自己去记忆.因为很少使用到某些命令,自然我们经常忘记这些命令,所以一旦忘 ...

  3. angularjs和ajax的结合使用 （三）

    转眼九月份了,忙忙碌碌 发现今年还没开过张,写一篇吧. 15年在空闲时就倒腾过angularjs那玩意儿 ,觉得还是挺好的,李金龙那厚厚的一本书,只不过没有系统化应用.最主要的是原来有一个东西没有用到 ...

  4. FW/IDS/IPS/WAF等安全设备部署方式及优缺点

    现在市场上的主流网络安全产品可以分为以下几个大类:1.基础防火墙FW/NGFW类 主要是可实现基本包过滤策略的防火墙,这类是有硬件处理.软件处理等,其主要功能实现是限制对IP:port的访问.基本上的 ...

  5. C++ 使用 hiredis 封装redis 的数据获取接口

    整合自互联网 一.hiredis 类库的安装 tar -zxvf hiredis-v0.13.3.tar.gz make make install mkdir /usr/lib/hiredis cp ...

  6. 短网址API

    http://tao.tf/open/ API简介 API允许第三方自由调用URL缩短,基于text/json/jsonp/js模式,支持post.get提交. 支持缩短网址: 淘宝网(*.taoba ...

  7. 动态规划——Dungeon Game

    这又是个题干很搞笑的题目:恶魔把公主囚禁在魔宫的右下角,骑士从魔宫的左上角开始穿越整个魔宫到右下角拯救公主,为了以最快速度拯救公主,骑士每次只能向下或者向右移动一个房间, 每个房间内都有一个整数值,负 ...

  8. 2018-4-5-MEMS

    微机电系统,研究生在学习纳米操作方面的知识的时候了解过一些,有时间的话写点东西温故知新.

  9. OneNote中添加代码问题

    OneNote是我最常用的笔记本,然而粘贴代码很麻烦,之前只能屏幕截图如Snipaste自带截图什么的,后来才知道win10自带有win+shift+s自动剪切到草图板上的功能, 然而还是很麻烦. 在 ...

  10. HTML 5将给开发者带来什么？

    在新的时代里,相信网页技术会伴随HTML 5的来临进入大洗牌的局面,HTML 5旨在解决Web中的交互,媒体,本地操作等问题,一些浏览器已经尝试支持HTML 5的一些功能,而开发者们有望最终从那些We ...