<script><br/> function bigimg(){<br/> var bbox = document.getelementbyid("box");<br/> var bmove = document.getelementbyid("move");<br/> var bbimg = document.getelementbyid("bimg");<br/> var b_bimg = document.getelementbyid("b_bimg");<br/> bbox.onmouseover = function(){//鼠标移动到box上显示大图片和选框<br/>bbimg.style.display = "block";<br/>bmove.style.display="block";<br/> }<br/> bbox.onmouseout = function(){//鼠标移开box不显示大图片和选框<br/>bbimg.style.display = "none";<br/>bmove.style.display="none";<br/> }<br/> bbox.onmousemove = function(e){//获取鼠标位置<br/>var x = e.clientx;//鼠标相对于视口的位置<br/>var y = e.clienty;<br/>var t = bbox.offsettop;//box相对于视口的位置<br/>var l = bbox.offsetleft;<br/>var _left = x - l - bmove.offsetwidth/2;//计算move的位置<br/>var _top = y - t -bmove.offsetheight/2;<br/>if(_top<=0)//滑到box的最顶部<br/> _top = 0;<br/>else if(_top>=bbox.offsetheight-bmove.offsetheight)//滑到box的最底部<br/> _top = bbox.offsetheight-bmove.offsetheight ;<br/>if(_left<=0)//滑到box的最左边<br/> _left=0;<br/>else if(_left>=bbox.offsetwidth-bmove.offsetwidth)//滑到box的最右边<br/> _left=bbox.offsetwidth-bmove.offsetwidth ;<br/>bmove.style.top = _top +"px";//设置move的位置<br/>bmove.style.left = _left + "px";<br/>var w = _left/(bbox.offsetwidth-bmove.offsetwidth);//计算移动的比例<br/>var h = _top/(bbox.offsetheight-bmove.offsetheight);<br/>var b_bimg_top = (b_bimg.offsetheight-bbimg.offsetheight)*h;//计算大图的位置<br/>var b_bimg_left = (b_bimg.offsetwidth-bbimg.offsetwidth)*w;<br/>b_bimg.style.top = -b_bimg_top + "px";//设置大图的位置信息<br/>b_bimg.style.left = -b_bimg_left + "px";<br/> }<br/><br/> }<br/> </script>
黑色箭头：
|
1
2
|
var x = e.clientX;//鼠标相对于视口的位置
var y = e.clientY;
|
红色箭头：
触发式加载精美特效企业网站源码1.0.0
下载
触发式加载精美特效企业网站源码使用jquery实现了很多精美的触发式加载特效，网站首页在随着访客的滚动条滚动过程中会出现很多触发式加载的特殊效果，让这个网站的风格瞬间显得非常的高大上，让你的企业品牌在访客心中留下更深的影响。当然，我们在使用jquery特效的同时也要注意程序对搜索引擎的友好型，所以这一点儿作者也有考虑到，已经尽可能的对js和css脚本进行精简和优化，尽可能的加快网站加载速度，同时也
|
1
2
|
var t = bbox.offsetTop;//box相对于视口的位置
var l = bbox.offsetLeft;
|
橙色箭头：
|
1
2
|
var _left = x - l - bmove.offsetWidth/2;//计算move的位置
var _top = y - t -bmove.offsetHeight/2;
|
2、bimg块的计算
利用move块在可移动范围内的比例来设置大图的位置
move块的移动范围：
1 |
bbox.offsetWidth-bmove.offsetWidth |
move块现在的坐标占可移动范围的比例：
|
1
2
|
var w = _left/(bbox.offsetWidth-bmove.offsetWidth);//计算移动的比例
var h = _top/(bbox.offsetHeight-bmove.offsetHeight);
|
bimg的移动范围：
1 |
b_bimg.offsetHeight-bbimg.offsetHeight |
bimg的位置：
|
1
2
|
var b_bimg_top = (b_bimg.offsetHeight-bbimg.offsetHeight)*h;//计算大图的位置
var b_bimg_left = (b_bimg.offsetWidth-bbimg.offsetWidth)*w;
|
