地图
广告
招租
←—
订阅
投稿
网站首页
特效代码
素材资源
seo优化
网络营销
网站建设
免费空间
工具软件
您的位置:
网站首页
>
特效代码
>
网页图片特效
> 正文:
[非常酷] 用鼠标移动显示的图片类似google地图
网页图片特效
[非常酷] 用鼠标移动显示的图片类似google地图
日期:2011-12-1 21:54:00 标签:
图片特效
地图
移动图片
js特效
div
图层特效
∷
PC蛋蛋 赚积分 换Q币!>>>更多礼品兑换
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>芯晴网页特效|www.csrcode.cn|---用鼠标移动显示的图片类似google地图</title> <style type="text/css"> <!-- #pic { width:480px; height:320px; border: 3px solid #ccc; background-image: url(/html/txdm_1/images/zhangxinyu.JPG); background-repeat: no-repeat; background-position: 0px 0px; cursor: move; } --> </style> <script type="text/javascript"> <!-- var p = new Array(); var speed = 0.05; //速度 var picWidth = 1280; // 大图的宽高 var picHeight = 971; var x,y // 鼠标点下去时背景的坐标 var x_new,y_new //位移 var haveclick = false; function getmouseposition(event) { if(document.all) { x = document.body.scrollLeft+event.clientX; y = document.body.scrollTop+event.clientY; }else { x = event.layerX; y = event.layerY; } haveclick = true; } function movestop() { haveclick = false; } function movestart(event) { if(haveclick) { if(document.getElementById('pic').style.backgroundPosition.length==0) {document.getElementById('pic').style.backgroundPosition="0px 0px";} p = document.getElementById('pic').style.backgroundPosition.split(" ") if(document.all) { x_new = document.body.scrollLeft+event.clientX; y_new = document.body.scrollTop+event.clientY; }else { x_new = event.layerX; y_new = event.layerY; } x2 = (speed*(x_new-x)+parseInt(p[0])).toString(10); // 计算位移量 y2 = (speed*(y_new-y)+parseInt(p[1])).toString(10); if (x2<-picWidth+420) x2=-picWidth+420; if (y2>0) y2=0; if (x2>0) x2=0; if (y2<-picHeight+300) y2=-picHeight+300; document.getElementById('pic').style.backgroundPosition=x2+"px "+y2+"px"; } } --> </script> </head> <body> <div id="pic" onmousedown="getmouseposition(event)" onmousemove="movestart(event)" onmouseup="movestop()" onmouseout="movestop()"> </div> </body> </html> <br><br><hr><p align="center"><font color=black>本特效由 <a href="http://www.CsrCode.cn" target="_blank">芯晴网页特效</a>丨CsrCode.Cn 收集于互联网,只为兴趣与学习交流,不作商业用途。</font></p>
提示:您可以先修改代码后再运行,复制和保存代码功能在Firefox下无效。
(
本站已开启防盗链,请根据代码中对应的url地址下载保存特效所需的图片、flash和js文件,请见谅,谢谢.
)
(本文由
CsrCode.CN
|
芯晴网页特效
收集丨
www.CsrCode.cn
)
本文网址:
上一篇:
鼠标放到图片上慢慢变大,移开后图片又慢慢变小
下一篇:
[强烈推荐] 类似于Flash制作的一个图片展示效果
评论信息
抱歉,本文暂停评论留言。
栏目分类
·
菜单导航特效
·
图层样式特效
·
链接文本特效
·
网页图片特效
·
日期时间特效
·
页面窗口特效
·
鼠标特效代码
·
网页背景特效
·
表格表单特效
·
状态栏特效
·
页面搜索特效
·
其他特效代码
热门排行
一款常用的漂亮的JS图片滑动…
jQuery 循环图片滚动切换效果…
JS实现伪3D轮播图片幻灯片切…
一款可控制切换的图片幻灯切…
JS横向带停顿的图片滚动特效…
JS图片滤镜 焦点图片自动切换…
JS模拟FLASH幻灯片图片切换效…
JS+CSS打造的非常漂亮的图片…
一款兼容所有浏览器的js图片…
JS实现的图片横向滚动展示效…
推荐信息
搜狐博客相册首页扒下来的马…
鼠标经过时,图片边框加粗效…
图片的循环渐显渐隐效果
[荐] JavaScript 地图上下左…
超酷超绚精美图片展示效果代…
JS配合FLASH的图片切换效果
基于jQuery插件的图片无缝滚…
jQuery插件版漂亮实用且可自…
CSS+JS实现的一款图片放大显…
javascript实现图片透明度感…
相关信息
最简洁的css实现圆角效果
芯晴网页特效
:
菜单导航特效
图形图像特效
图层样式特效
链接文本特效
日期时间特效
页面窗口特效
网页背景特效
鼠标特效代码
表格表单特效
状态栏特效
搜索特效
其他特效
网站首页
丨
网站地图
© Copyright 2009
CsrCode
-
芯晴网页特效
丨备案号:
浙ICP备15010075号-2
Alex排名
页面执行时间2.3281 s