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 ...
随机推荐
- 高性能HTTP加速器Varnish-3.0.3搭建、配置及优化步骤
经过一天的努力,终于将Varnish缓存服务器部署到线上服务器了.趁着热乎劲儿,赶紧给大家分享一下.Varnish是一个轻量级的Cache和反向代理软件.先进的设计理念和成熟的设计框架是Varnish ...
- vue v-for循环的用法
1.v-for循环普通数组 ①创建vue对象 ② 循环数据 结果: 2.v-for循环对象数组 ① 创建vue实例对象 ② 循环对象数组 结果: 3.v-for循环对象 ①创建vue对象实例 ②循环对 ...
- [sublime]用sublime搭建属于自己的Python的IDE
先在sublime中利用package control下载anaconda插件, 然后更改python的路径,不知道自己anaconda的python在哪,可以在prompt用命令where pyth ...
- Mac安装sqlite3
1,下载最新版本的 Mac OS X 会预安装 SQLite,但是如果没有可用的安装,只需按照如下步骤进行: 去安装最新的3.8.6版本,和linux的sqlite3安装版本是同一个. 软件地址为:h ...
- Machine Learning学习资源
引申:非原创,转载来自:https://blog.csdn.net/ptkin/article/details/50995140
- ios中getTime()的兼容性问题
· var getTime = function(time){ var myDate = new Date(time); var u = navigator.userAgent; var isAndr ...
- linq给list集合数据分页
var lastlist= newlist.Skip(pageindex * pagesize).Take(pagesize);
- RDSS和RNSS
RNSS英文全称Radio Navigation Satellite System,由用户接收卫星无线电导航信号,是一种卫星无线电导航业务,自主完成至少到4颗卫星的距离测量,进行用户位置,速度及航行参 ...
- 获取用户在web页面上选中的文本
window.getSelection().toString();
- 34 文件地理数据库（GDB）变文件夹了怎么办
我们都知道文件地理数据库(GDB)是ArcGIS软件特有的格式,有其独特的设计之处,在文件资源管理器中显示为.gdb的文件夹,但是里面的文件却看不明白,而且将gdb文件夹在Windows资源管理器中直 ...