类似淘宝放大镜代码

中国凉茶

浏览: 372168 次
性别:
来自: 北京

最近访客更多访客>>

chouldie

ningxianti

slowfishcolor

henryxlx

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Jquery
JS Code

html jquery js 放大镜

闲着无聊，自己做了一个关于淘宝放大镜的效果，方便自己和大家以后急需的时候直接拿过去就可以用。两种方法实现，第一种js，第二种jquery
JS实现

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
body{padding:0px;margin:0px;background:#aaaaaa;}
#small_pic{
margin:10px 0 0 10px;width:375px;height:275px;cursor:crosshair;
}
#zoom{
border:1px solid red;width:120px;height:120px;background:#FFFFFF;position:absolute;top:20px;left:20px;
opacity:0.5;filter:alpha(opacity=50);
display:none;
}
#big_pic{
width:240px;height:240px;border:1px solid red;position:absolute;top:10px;left:500px;overflow:hidden;display:none;
}
</style>
<script type="text/javascript">
window.onload = function(){
var small_pic = document.getElementById('small_pic');
var big_pic = document.getElementById('big_pic');
var zoomer = document.getElementById('zoom');
var pic2 =document.getElementById('pic2');
//移动跟随
 
small_pic.onmousemove = mouseMove;
function mouseMove(ev){
    ev = ev || window.event;
    var l = ev.clientX-small_pic.offsetLeft-zoomer.offsetWidth/2;
    var h = ev.clientY-small_pic.offsetTop-zoomer.offsetHeight/2;
    if(l<0){l=0;}
    else if(l>small_pic.offsetWidth-zoomer.offsetWidth){l=small_pic.offsetWidth-zoomer.offsetWidth+1;}
    if(h<0){h=0;}
    else if(h>small_pic.offsetHeight-zoomer.offsetHeight){h=small_pic.offsetHeight-zoomer.offsetHeight+1;}
 
    document.getElementById("zoom").style.left = l+small_pic.offsetLeft+"px";
    document.getElementById("zoom").style.top = h+small_pic.offsetTop+"px";
     
    var percent = big_pic.clientWidth/zoomer.clientWidth;
    pic2.style.left = big_pic.style.left-percent*l+'px';
    pic2.style.top = big_pic.style.top-percent*h+'px';
}
 
small_pic.onmouseover = function(){
    zoomer.style.display = 'block';
    big_pic.style.display = 'block';
    mouseMove();
};
small_pic.onmouseout = function(){
    zoomer.style.display ='none';
    big_pic.style.display='none';
};
};
</script>
</head>
<body>
<div id="small_pic">
<img id="pic1" src="images/00001.jpg" style="width:375px;height:275px;border:1px solid #aaaaaa;">
<span id="zoom">
</span>
</div>
<div id="big_pic">
<img id="pic2" src="images/00001.jpg" style="width:750px;height:550px;position:absolute;">
</div>
</body>
</html>

JQ实现

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<title>Untitled Document</title>
	</head>
	<style>
		*{  
    padding:0px;  
    margin:0px;  
    border:0px;}  
	.all{  
	    margin:0 auto;  
	    width:960px;  
	    }  
	.big{  
	    float:left;  
	    width:160px;  
	    height:160px;  
	    border:2px solid #CCC;  
	    padding:3px;  
	    margin-top:100px;}  
	.big .small{  
	    width:50px;  
	    height:50px;  
	    position:absolute;  
	    top:0px;  
	    left:300px;  
	    background:#CFF;  
	    opacity:0.75;  
	    display:none;}  
	.big .show{  
	    width:275px;  
	    height:150px;  
	    padding:3px;  
	    position:absolute;  
	    top:100px;  
	    left:500px;  
	    display:none;  
	    background:url(images/00001.jpg) no-repeat left top;  
	    border:1px solid #666;} 
		
	</style>
	<script src="jquery-1.7.2.js" type="text/javascript"></script>
	<script>
		var topset=0;  
    	var leftset=0;  
	    $(document).ready(function(e) {  
	        $(".big").mouseleave(function(){  
	            $(".small").css({"top":LTY,"left":LTX,"display":"none"});  
	            $(".show").css("display","none");  
	        }).mousemove(function(e){  
	            topset=$(this).offset().top;  
	            leftset=$(this).offset().left;  
	            if(e.pageX<185)  
	                LTX=160;  
	            else if(e.pageX>301)  
	                LTX=276;  
	            else  
	                LTX=e.pageX-25;  
	            if(e.pageY<125)  
	                LTY=100;  
	            else if(e.pageY>241)  
	                LTY=221;  
	            else  
	                LTY=e.pageY-25;  
	            $(".small").css({"top":LTY,"left":LTX,"display":"block"});  
	              
	            position_x="-"+Math.round((LTX-160)/160*550)+"px";  
	            position_y="-"+Math.round((LTY-100)/160*375)+"px";  
	            pl=position_x+" "+position_y;  
	            $(".show").css({"display":"block","background-position":pl});  
	        });  
	    });  
		
	</script>
	<body>  
    <div class="all">  
        <div class="big">  
            [img]images/00001.jpg" width="160px;" height="160px[/img]  
            <div class="small"></div>  
            <div class="show"></div>  
        </div>  
    </div>  
    </body>
</html>

10
顶

3
踩

分享到：

js的时间比较大小 | Java基础 write方法应用

2012-06-28 10:28
浏览 4173
评论(2)
分类:Web前端
查看更多

2 楼 nicegege 2012-06-28

1 楼 coding1688 2012-06-28

推荐jqZoom插件，下面是它的演示站点
http://www.mind-projects.it/projects/jqzoom/demos.php#demo1

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

类似淘宝放大镜代码

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

类似淘宝放大镜代码

评论

发表评论

相关推荐

jQuery实现多选下来框(multiple select)

Jquery选择器,选择ID以"某某"字符开头的一组文本框只能输入数字

Jackson 框架，轻易转换JSON

highcharts 时间少8小时问题

highcharts中x轴曲线不连续时的解决办法

Highcharts和Highstock实例(包括折线图，饼图，柱状图)

选择框(select)添加或者减少选项(option)操作的js代码

js 数组对象的操作方法

js 数组对象的操作方法

Jquery解析json

Jquery JSON操作应用

下拉列表，动态初始化前天日期

纯js分页

js的时间比较大小

Jquery常用方法总结

jquery 根据name属性获取对象（=document.getElementByName("") )

jquery 根据name属性获取对象（=document.getElementByName("") )

Jquery和JS的加载事件区别

JS时间控件

JS时间比较

最近访客更多访客>>