Rumah > applet WeChat > Pembangunan program mini > jQuery实现鼠标绑定事件图片放大功能

jQuery实现鼠标绑定事件图片放大功能

php中世界最好的语言
Lepaskan: 2018-06-04 15:07:34
asal
1980 orang telah melayarinya

这次给大家带来jQuery实现鼠标绑定事件图片放大功能,jQuery实现鼠标绑定事件图片放大功能的注意事项有哪些,下面就是实战案例,一起来看一下。

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

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>jQuery图片变换</title>

</head>

<style type="text/css">

 .show{width:330px; height:auto; margin:50px auto; background:#eee}

 .item{background:#fff; width:300px; height:auto; float:left; margin:15px;}

 p{ padding:15px; color:#ff6600}

 .big-photo img{ width:300px; height:300px; border:1px solid #e0e0e0}

 .des-small img{ width:30px; height:30px;border:1px solid #e0e0e0; }

 .des-small img:hover{ border:1px solid #ff6600}

 .clear{clear:both}

</style>

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

<script type="text/javascript">

 $(function() {

  /** 更换小图片 */

  $(".item a").hover(function(){

   changeImg($(this))

  }); 

 });

 function changeImg(obj){

  if(obj.find("img").attr("alt")=="small"){

   var temp_big_src = obj.siblings('a').find('img[alt=big]').attr('src');

   var temp_big_url = obj.siblings('a[class=big-photo]').attr('href');

   var temp_small_src = obj.find('img').attr('src');

   var temp_small_url = obj.attr('href');

   obj.siblings('a').find('img[alt=big]').attr('src',temp_small_src);

  }

 }

</script>

<body>

 <p class="show">

  <p>Jquery实现鼠标移动/移过到商品小图片上时替换掉大图片上的图片</p>

  <p class="item">

   <a class="big-photo">

    <img src="WR_00001.jpg" alt="big"/>

   </a>

   <a class="des-small">

    <img src="WR_00002.jpg" alt="small"/>

   </a>

   <a class="des-small">

    <img src="WR_00003.jpg" alt="small"/>

   </a>

   <a class="des-small">

    <img src="WR_00004.jpg" alt="small"/>

   </a>

  </p>

  <p class="clear"></p>

 </p>

</body>

</html>

Salin selepas log masuk

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

js基础提升学习之操作DOM对象样式

js基础提升学习之基本数据类型

Atas ialah kandungan terperinci jQuery实现鼠标绑定事件图片放大功能. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan