图片放大镜特效-JS特效-爱易网页

图片放大镜特效

日期：2014-05-18　浏览次数：20158 次

以下是程序代码

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta name="keywords" content="站长,网页特效,js特效,广告代码,zzjs,zzjs.net,sky,www.zzjs.net,站长特效 网" />
<meta name="description" content="www.zzjs.net,站长特效网，站长必备js特效及广告代码。大量高质量js特效，提供高质量广告代码下载,尽在站长特效网" />
<title>图片放大镜特效，sky整理收集，站长特效网欢迎您。</title>
<SCRIPT>
var shrinkfactor=5
// left and top position of the thumbnailimage
// (distance to the left and top browser-margin, pixels)
var thumbleft = 30
var thumbtop = 30
// left and top position of the zoomed image
// (distance to the left and top browser-margin, pixels)
var largeleft = 300
var largetop = 30
// width and height of the enlarged image's sector (visible part, pixels)
var clipwidth = 240
var clipheight = 160
</SCRIPT>
<SCRIPT>
var isNav, isIE
var offsetX, offsetY
var selectedObj
//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
var largewidth = 0
var largeheight = 0
var thumbwidth = Math.floor(largewidth/shrinkfactor)
var thumbheight = Math.floor(largeheight/shrinkfactor)
var dragimgwidth = Math.floor(clipwidth/shrinkfactor)
var dragimgheight = Math.floor(clipheight/shrinkfactor)
var dragimgleft = thumbleft+3
var dragimgtop = thumbtop+3
var difleft= largeleft-thumbleft
var diftop= largetop-thumbtop
var clippoints
var cliptop=0
var clipbottom=cliptop+clipheight
var clipleft=0
var clipright=clipleft+clipwidth
if (parseInt(navigator.appVersion) >= 4) {
	if (navigator.appName == "Netscape") {
		isNav = true
	} else {
		isIE = true
	}
}
function setZIndex(obj, zOrder) {
	obj.zIndex = zOrder
}
function shiftTo(obj, x, y) {
	if (isNav) {
        if(x<=document.thumb.left) {x=document.thumb.left}
		if(x>=(document.thumb.left+thumbwidth-dragimgwidth-2)) {x=document.thumb.left+thumbwidth-dragimgwidth-2}
		if(y<=document.thumb.top) {y=document.thumb.top}
		if(y>=(document.thumb.top+thumbheight-dragimgheight-2)) {y=document.thumb.top+thumbheight-dragimgheight-2}
		obj.moveTo(x,y)
	} else {
		if(x<=document.all.thumb.style.posLeft) {x=document.all.thumb.style.posLeft}
		if(x>=(document.all.thumb.style.posLeft+thumbwidth-dragimgwidth-2)) {x=document.all.thumb.style.posLeft+thumbwidth-dragimgwidth-2}
		if(y<=document.all.thumb.style.posTop) {y=document.all.thumb.style.posTop}
		if(y>=(document.all.thumb.style.posTop+thumbheight-dragimgheight-2)) {y=document.all.thumb.style.posTop+thumbheight-dragimgheight-2}
		obj.pixelLeft = x
		obj.pixelTop = y
	}
	cliptop = (y-thumbtop)*shrinkfactor
	clipbottom = cliptop+clipheight
	clipleft = (x-thumbleft)*shrinkfactor
	clipright = clipleft+clipwidth
	if (document.all) {
		clippoints ="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"
		document.all.large.style.posTop=largetop-cliptop
		document.all.large.style.posLeft=largeleft-clipleft
		document.all.large.style.clip=clippoints
	}
	if (document.layers) {
		document.large.top=largetop-cliptop
		document.large.left=largeleft-clipleft
		document.large.clip.left = clipleft
		document.large.clip.right = clipright
		document.large.clip.top = cliptop
		document.large.clip.bottom = clipbottom
	}
}//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
function setSelectedElem(evt) {
	if (isNav) {
		var testObj
		var clickX = evt.pageX
		var clickY = evt.pageY
		for (var i = document.layers.length - 1; i >= 0; i--) {
			testObj = document.layers[i]
			if ((clickX > testObj.left) &&
				(clickX < testObj.left + testObj.clip.width) &&
				(clickY > testObj.top) &&
				(clickY < testObj.top + testObj.clip.height && document.layers[i].id=="dragimg")) {
					selectedObj = testObj
					setZIndex(selectedObj, 100)
					return
			}
		}
	} else {
		var imgO</div></div>

<div class="clearfix"></div>
                    </div>
                    <nav aria-label="...">
                        <ul class="pager">
                            <li class="previous"><a href="4667">上一篇：狡猾的按钮特效</a></li>

<li class="next"><a href="1223">下一篇：判断远程图片是否存在</a></li>
                        </ul>
                    </nav>

<div class="alert alert-warning" role="alert">
                        <strong>免责声明：</strong> 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
                    </div>

<div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34104' title='iPhone5S组件曝光 印证杀手级功能存在' target="_blank">
                        iPhone5S组件曝光 印证杀手级功能存在</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34276' title='组建铁塔公司倒逼运营商改革 或加速4G网建设' target="_blank">
                        组建铁塔公司倒逼运营商改革 或加速4G网建设</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34249' title='美剧讲硅谷创业者：远不及现实荒诞？' target="_blank">
                        美剧讲硅谷创业者：远不及现实荒诞？</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34229' title='CSS控制字符长度和显示长度' target="_blank">
                        CSS控制字符长度和显示长度</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/6903' title='联想架构调整后：Think品牌或推智能手机' target="_blank">
                        联想架构调整后：Think品牌或推智能手机</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/400' title='全球网络遭史上最大规模攻击：攻击数据每秒300G' target="_blank">
                        全球网络遭史上最大规模攻击：攻击数据每秒300G</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34286' title='一大波智能路由器正在袭来：小米、360、极路由大PK' target="_blank">
                        一大波智能路由器正在袭来：小米、360、极路由大PK</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34199' title='HDS发布《2013中国CIO洞察白皮书》' target="_blank">
                        HDS发布《2013中国CIO洞察白皮书》</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34416' title='蓝宝石PK大猩猩玻璃：作为屏幕谁更有优势？' target="_blank">
                        蓝宝石PK大猩猩玻璃：作为屏幕谁更有优势？</a></li></div>
                   
                
        </ol>
    </div>
</div>

</div>

</div>
            </div>
            <div class="clearfix"></div>

<footer class=" footer navbar-bottom">
<em>友情链接：</em>
    
      <a href="http://www.aiyiweb.com/" target="_blank">爱易网 </a>            
    
      <a href="http://www.aiyiweb.com/" target="_blank">云虚拟主机技术 </a>            
    
      <a href="http://www.aiyiweb.com/" target="_blank">云服务器技术 </a>            
    
      <a href="http://www.aiyiweb.com/" target="_blank">程序设计技术 </a>            
    
      <a href="http://www.aiyiweb.com/" target="_blank">开发网站 </a>            
    
      <a href="http://www.aiyiweb.com/" target="_blank">APP开发教程 </a>            
    
<br />
<script type="text/javascript">(function(){document.write(unescape('%3Cdiv id="bdcs"%3E%3C/div%3E'));var bdcs = document.createElement('script');bdcs.type = 'text/javascript';bdcs.async = true;bdcs.src = 'http://znsv.baidu.com/customer_search/api/js?sid=15239353030108964139' + '&plate_url=' + encodeURIComponent(window.location.href) + '&t=' + Math.ceil(new Date()/3600000);var s = document.getElementsByTagName('script')[0];s.parentNode.insertBefore(bdcs, s);})();</script>

Copyright © 2013-2025 爱易网页 当前在线：226人　
        网站在1时56分43秒内访问总人数：19380人
    当前 25.10%
　<a href="https://beian.miit.gov.cn" target="_blank">粤ICP备18100884号-2 </a>
<script charset="UTF-8" id="LA_COLLECT" src="//sdk.51.la/js-sdk-pro.min.js"></script>
<script>LA.init({ id: "JszEmKrtpbU59dY5", ck: "JszEmKrtpbU59dY5" })</script>

</footer>

</div>
   
</body>
</html>