JQ 放大镜
<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 放大镜的更多相关文章
- jq仿淘宝放大镜插件
html部分 //小图 <div id="photoBox"> <img src="图片路径" width="400" h ...
- jq商品展示图放大镜 and 原生js和html5写的放大镜效果 ~~效果不错
<!DOCTYPE HTML><html lang="en-US"><head> <meta charset="UTF-8&qu ...
- JQ面向对象的放大镜
index.html <!DOCTYPE html><html> <head> <meta charset="utf-8" /> & ...
- jq的图片放大镜效果
<div class="imgbox"> <div class="probox"> <img src="" a ...
- JQ实战天猫淘宝放大镜
这个特效平时生活中很常见,话不多说先上效果图. 首先布局,遮罩层是这个效果中的重点精华,也就是下面代码中的shade. <style> * { margin:0px; padding:0p ...
- 基于jq图片居中插件 [center]
最近在做一个项目,大量的图片基于js进行缩放(图片放大镜),考虑用css要写许多hack,而已经基于jq了,干脆写个方法得了. 代码很简单,不用多讲但是很实用. $.fn.extend({ cente ...
- JS实现放大镜效果(放大图片)
注意:里边的两张图片(一大一小)可以自己添加,JQ采用jquery-1.11.3.js版,也可自行调换. HTML代码: <!DOCTYPE html> <html> < ...
- JQuery仿购物网站放大镜特效所遇问题及思考
JQuery仿购物网站放大镜特效所遇问题及思考 先贴下效果图,然后描述起来也就不会不知道我在说什么了. 我碰到的问题一: 一开始我自己总结了是因为两个小原因导致的①使用了mouseover,mouse ...
- jq选择器基础
Jquery $代表选择器 使用jq必须要导入jq文件 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js&qu ...
随机推荐
- python函数默认参数陷阱
对于学习python的人都有这样的困惑 def foo(a=[]): a.append(5) return a Python新手希望这个函数总是返回一个只包含一个元素的列表:[5].结果却非常不同,而 ...
- 小程序app.onLaunch中获取用户信息，index.onLoad初次载入时取不到值的问题
问题描述: //app.js App({ globalData:{ nickname:'' }, onLaunch: function () { let that=this; //假设已经授权成功 w ...
- 五、OpenStack—nova组件介绍与安装
一.nova介绍 Nova 是 OpenStack 最核心的服务,负责维护和管理云环境的计算资源.OpenStack 作为 IaaS 的云操作系统,虚拟机生命周期管理也就是通过 Nova 来实现的. ...
- Linux虚拟机搭建本地yum源
Yum本地源的配置 本教程是在虚拟机里安装Red Hat Enterprise Linux 7 ,以其为例使用iso文件进行Yum本地源的配置.所使用的软件如下: (1)虚拟机:Vmware work ...
- Pandas 0 数据结构Series
# -*- encoding:utf-8 -*- # Copyright (c) 2015 Shiye Inc. # All rights reserved. # # Author: ldq < ...
- dubbo+zookeeper报错:com.alibaba.dubbo.rpc.RpcException: Failed to invoke the method
com.alibaba.dubbo.rpc.RpcException: Failed to invoke the method可能的错误原因有三个前两个是从网上摘得, 第三个是自己解决的 1.需要进行 ...
- Rest API 操作List Items
获取所有的List Itemsfunction getItems(url) { $.ajax({ url: url, type: "GET", headers: { "a ...
- mybatis 之数据库 include refid ="base_column_list"
mybatis 之数据库 include refid ="base_column_list" 对于刚学习使用SSM框架的新手来说,mybatis中的数据库语句有点不一样,下面便是对 ...
- Chrome_高亮显示当前改变的区域
- HDP Hive StorageHandler 下推优化的坑
关键词:hdp , hive , StorageHandler 了解Hive StorageHandler的同学都知道,StorageHandler作为Hive适配不同存储的拓展类,同时肩负着Hive ...