首页 > web前端 > js教程 > js实现图片放大和拖拽特效代码分享_javascript技巧

js实现图片放大和拖拽特效代码分享_javascript技巧

WBOY
发布: 2016-05-16 15:40:42
原创
1209 人浏览过

本文实例讲述了js实现图片放大和拖拽特效代码。分享给大家供大家参考。具体如下:
js实现图片放大和拖拽特效是一款非常实用的js特效,实现了图片的放大和拖拽功能,没用用到jquery插件,是用原生javascript实现的,除了点击放大和缩小按钮来控制图片的放大缩小,还可以使用鼠标的滚轮控制图片的缩放。
运行效果图:                               ----------------------查看效果 源码下载-----------------------

小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式。
 为大家分享的js实现图片放大和拖拽特效代码如下

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

<!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="js/drag_map.js"></script>

 <style type="text/css">

  body{font-size: 12px;font-family: "Verdana" , "Arial" , "Helvetica" , "sans-serif";} td{font-size: 12px; line-height: 150%;} TD{font-size: 12px; color: #000000;} A{font-size: 12px; color: #000000;} #Layer1{z-index: 100; position: absolute; top: 150px;} #Layer2{z-index: 1; position: absolute;}

 </style>

 <script type="text/JavaScript">

  function MM_reloadPage(init) {

   if (init == true) with (navigator) {

    if ((appName == "Netscape") && (parseInt(appVersion) == 4)) {

     document.MM_pgW = innerWidth; document.MM_pgH = innerHeight; onresize = MM_reloadPage;

    }

   }

   else if (innerWidth != document.MM_pgW || innerHeight != document.MM_pgH) location.reload();

  }

  MM_reloadPage(true);

 </script>

</head>

<body onLoad="" onmouseup="document.selection.empty()" oncontextmenu="return false"

 onselectstart="return false" ondragstart="return false" onbeforecopy="return false"

 style="overflow-y: hidden; overflow-x: hidden" oncopy="document.selection.empty()"

 leftmargin="0" topmargin="0" onselect="document.selection.empty()" marginheight="0"

 marginwidth="0">

  

 <div id="Layer1">

  <table cellspacing="2" cellpadding="0" border="0">

   <tbody>

    <tr>

     <td>

       

     </td>

     <td>

      <img title="向上"   style="max-width:90%" onClick="clickMove('down')"  style="max-width:90%" src="images/up.gif"

        style="max-width:90%">

     </td>

     <td>

       

     </td>

    </tr>

    <tr>

     <td>

      <img title="向左"   style="max-width:90%" onClick="clickMove('right')"  style="max-width:90%" src="images/left.gif"

        style="max-width:90%">

     </td>

     <td>

      <img title="还原"   style="max-width:90%" onClick="realsize();"  style="max-width:90%" src="images/zoom.gif"

        style="max-width:90%">

     </td>

     <td>

      <img title="向右"   style="max-width:90%" onClick="clickMove('left')"  style="max-width:90%" src="images/right.gif"

        style="max-width:90%">

     </td>

    </tr>

    <tr>

     <td>

       

     </td>

     <td>

      <img title="向下"   style="max-width:90%" onClick="clickMove('up')"  style="max-width:90%" src="images/down.gif"

        style="max-width:90%">

     </td>

     <td>

       

     </td>

    </tr>

    <tr>

     <td>

       

     </td>

     <td>

      <img title="放大"   style="max-width:90%" onClick="bigit();"  style="max-width:90%" src="images/zoom_in.gif"

        style="max-width:90%">

     </td>

     <td>

       

     </td>

    </tr>

    <tr>

     <td>

       

     </td>

     <td>

      <img title="缩小"   style="max-width:90%" onClick="smallit();"  style="max-width:90%" src="images/zoom_out.gif"

        style="max-width:90%">

     </td>

     <td>

       

     </td>

    </tr>

   </tbody>

  </table>

 </div>

 <p>

  <br>

 </p>

 <div id="hiddenPic" style="z-index: 1; left: 0px; visibility: hidden; width: 0px;

  position: absolute; top: 150px; height: 0px">

  <img  src="http://ww2.sinaimg.cn/large/adde8400gw1eeazlmtqa8j20qd0mdadm.jpg" border="0" name="images2" alt="js实现图片放大和拖拽特效代码分享_javascript技巧" >

 </div>

 <div class="dragAble" id="block1" onMouseOver="dragObj=block1; drag=1;" style="z-index: 10;

  left: 0px; width: 0px; position: absolute; top: 150px; height: 0px" onMouseOut=""

  drag="0">

  <img onmousewheel="return onWheelZoom(this)"   style="max-width:90%" src="images/adde8400gw1eeazlmtqa8j20qd0mdadm.jpg"

   border="0" name="images1">

 </div>

<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">

</div>

</body>

</html>

登录后复制

核心代码如下:

1

2

3

4

5

6

7

function onWheelZoom(obj){ //滚轮缩放

 zoom = parseFloat(obj.style.zoom);

 tZoom = zoom + (event.wheelDelta>0 &#63; 0.05 : -0.05);

 if(tZoom<0.1 ) return true;

 obj.style.zoom=tZoom;

 return false;

}

登录后复制

js关键代码:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

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 &#63; nTY + e.clientY - y : nTY + event.clientY - y)+"px";

 oDragObj.style.left = (nn6 &#63; nTX + e.clientX - x : nTX + event.clientX - x)+"px";

 return false;

 }

}

 

function initDrag(e) {

 var oDragHandle = nn6 &#63; e.target : event.srcElement;

 var topElement = "HTML";

 while (oDragHandle.tagName != topElement && oDragHandle.className != "dragAble") {

 oDragHandle = nn6 &#63; oDragHandle.parentNode : oDragHandle.parentElement;

 }

 if (oDragHandle.className=="dragAble") {

 isdrag = true;

 oDragObj = oDragHandle;

 nTY = parseInt(oDragObj.style.top+0);

 y = nn6 &#63; e.clientY : event.clientY;

 nTX = parseInt(oDragObj.style.left+0);

 x = nn6 &#63; e.clientX : event.clientX;

 document.onmousemove=moveMouse;

 return false;

 }

}

document.onmousedown=initDrag;

document.onmouseup=new Function("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 &#63; 0.05 : -0.05);

if(tZoom<0.1 ) return true;

obj.style.zoom=tZoom;

return false;

}

登录后复制

以上就是为大家分享的js实现图片放大和拖拽特效代码,希望大家可以喜欢。

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板