本文实例讲述了js实现图片放大和拖拽特效代码。分享给大家供大家参考。具体如下:
js实现图片放大和拖拽特效是一款非常实用的js特效,实现了图片的放大和拖拽功能,没用用到jquery插件,是用原生javascript实现的,除了点击放大和缩小按钮来控制图片的放大缩小,还可以使用鼠标的滚轮控制图片的缩放。
运行效果图: ----------------------查看效果 源码下载-----------------------
小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式。
为大家分享的js实现图片放大和拖拽特效代码如下
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>js实现图片放大和拖拽特效</title> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"> <link rel="stylesheet" href="css/style.css"> <script type="text/javascript" src="/UploadFiles/2021-04-02/drag_map.js">核心代码如下:
function onWheelZoom(obj){ //滚轮缩放 zoom = parseFloat(obj.style.zoom); tZoom = zoom + (event.wheelDelta>0 "htmlcode">drag = 0 move = 0 var ie=document.all; var nn6=document.getElementById&&!document.all; var isdrag=false; var y,x; var oDragObj; function moveMouse(e) { if (isdrag) { oDragObj.style.top = (nn6 "px"; oDragObj.style.left = (nn6 "px"; return false; } } function initDrag(e) { var oDragHandle = nn6 "HTML"; while (oDragHandle.tagName != topElement && oDragHandle.className != "dragAble") { oDragHandle = nn6 "dragAble") { isdrag = true; oDragObj = oDragHandle; nTY = parseInt(oDragObj.style.top+0); y = nn6 "isdrag=false"); function clickMove(s){ if(s=="up"){ dragObj.style.top = parseInt(dragObj.style.top) + 100; }else if(s=="down"){ dragObj.style.top = parseInt(dragObj.style.top) - 100; }else if(s=="left"){ dragObj.style.left = parseInt(dragObj.style.left) + 100; }else if(s=="right"){ dragObj.style.left = parseInt(dragObj.style.left) - 100; } } function smallit(){ var height1=images1.height; var width1=images1.width; images1.height=height1/1.2; images1.width=width1/1.2; } function bigit(){ var height1=images1.height; var width1=images1.width; images1.height=height1*1.2; images1.width=width1*1.2; } function realsize() { images1.height=images2.height; images1.width=images2.width; block1.style.left = 0; block1.style.top = 0; } function featsize() { var width1=images2.width; var height1=images2.height; var width2=701; var height2=576; var h=height1/height2; var w=width1/width2; if(height1<height2&&width1<width2) { images1.height=height1; images1.width=width1; } else { if(h>w) { images1.height=height2; images1.width=width1*height2/height1; } else { images1.width=width2; images1.height=height1*width2/width1; } } block1.style.left = 0; block1.style.top = 0; } function onWheelZoom(obj){ //滚轮缩放 zoom = parseFloat(obj.style.zoom); tZoom = zoom + (event.wheelDelta>0 ? 0.05 : -0.05); if(tZoom<0.1 ) return true; obj.style.zoom=tZoom; return false; }以上就是为大家分享的js实现图片放大和拖拽特效代码,希望大家可以喜欢。
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
更新日志
2024年09月20日
2024年09月20日
- 曾轶可.2011-一只猫的旅行【天娱传媒】【WAV+CUE】
- 黑神话悟空上品狼刺客精魄获取方法一览|上品狼刺客精魄收集攻略
- 视觉小说《神椿市建设中REGENERATE》将于2025年2月20日发售
- 黑神话悟空上品鼠弩手精魄获取方法一览|上品鼠弩手精魄收集攻略
- 中国音乐地图听见世界非物质文化遗产《非遗HQCD》wav
- 中国民乐合奏作品集《华夏之音HQ》头版限量编号[WAV+CUE]
- [电影原声带]黎允文《天将雄师》[FLAC+CUE]
- 曝NS继任机型已进入量产阶段:已花了30亿日元
- 不是Switch2?曝《马里奥惊奇》NS捆绑包即将公开
- 暖心任天堂!网友Switch维修返还时贴纸被完好保留
- 《国语老歌 经典对唱情歌 2CD》[WAV/分轨][1.1GB]
- 《刀郎 翻唱精选华语专辑 披着羊皮的狼 》[WAV+CUE][430MB]
- 《真的田震 中国乐坛红极一时的歌者 精品集》[WAV+CUE][300MB]
- 群星.1995-新滚石九大天王之情歌大全【滚石】【WAV+CUE】
- 群星.1993-滚石九大天王十二出好戏·纵夏欢唱【滚石】【WAV+CUE】