jQuery实现鼠标滑动切换图片


Posted in jQuery onMay 27, 2020

本文实例为大家分享了jQuery实现鼠标滑动切换图片的具体代码,供大家参考,具体内容如下

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>手风琴</title>
 <script src="./jQuery.js"></script>
 <style>
  .bigbox{
   width: 610px;
   height: 270px;
   border: 1px solid #ccc;
   margin: 0 auto;
  }
  ul{
   margin: 0;
   padding: 0;
   float: left;
   height: 270px;
  }
  li{
   float: left;
   list-style: none;
   width: 50px;
   height: 270px;
   border: 1px solid #ccc;
   overflow: hidden;
  }
  img{
   width: 400px;
  }
  .ww{
   width: 400px;
  }
 </style>
</head>
<body>
 <div class="bigbox">
  <ul class="q">
   <li class="ww"><img src="./image/d1.jpeg" alt=""></li>
   <li><img src="./image/d2.jpeg" alt=""></li>
   <li><img src="./image/d3.jpeg" alt=""></li>
   <li><img src="./image/d4.jpeg" alt=""></li>
   <li><img src="./image/d5.jpeg" alt=""></li>
  </ul>
 </div>
 <script>
  $(function(){
   $('.q li').mouseover(function(){
    $('.q li').removeClass();
    $(this).addClass('ww');
   })
  })
 </script>
</body>
</html>

再补充一段:鼠标移动切换图片操作

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <script type="text/javascript">
   function picture(pic){

   //id读取图片及路径

   document.getElementById('pic').src='ps/'+pic;
   }
 </script>
</head>
<body>
 <img id="pic" src="ps/01.jpg" width="400px"

//移上去事件 

alt="" οnmοuseοver='picture("01.jpg")'οnmοuseοut='picture("02.jpg")' 

//移出去事件

οnkeydοwn='picture("03.jpg")'> 

</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jquery中$.fn和图片滚动效果实现的必备知识总结
Apr 21 jQuery
jquery中each循环的简单回滚操作
May 05 jQuery
jQuery实现简单的手风琴效果
Apr 17 jQuery
jQuery Autocomplete简介_动力节点Java学院整理
Jul 17 jQuery
jQuery Position方法使用和兼容性
Aug 23 jQuery
jQuery 利用ztree实现树形表格的实例代码
Sep 27 jQuery
jQuery实现的电子时钟效果完整示例
Apr 28 jQuery
jQuery实现的页面详情展开收起功能示例
Jun 11 jQuery
jQuery实现列表的增加和删除功能
Jun 14 jQuery
jQuery 获取除某指定对象外的其他对象 ( :not() 与.not())
Oct 10 jQuery
在vue项目中使用Jquery-contextmenu插件的步骤讲解
Jan 27 jQuery
使用异步controller与jQuery实现卷帘式分页
Jun 18 jQuery
jQuery弹框插件使用方法详解
May 26 #jQuery
jQuery实现的分页插件完整示例
May 26 #jQuery
jQuery 选择器用法实例分析【prev + next】
May 22 #jQuery
jQuery--遍历操作实例小结【后代、同胞及过滤】
May 22 #jQuery
jquery更改元素属性attr()方法操作示例
May 22 #jQuery
jquery绑定事件 bind和on的用法与区别分析
May 22 #jQuery
jQuery实现移动端笔触canvas电子签名
May 21 #jQuery
You might like
说说PHP的autoLoad自动加载机制
2012/09/27 PHP
完美解决:Apache启动问题―(OS 10022)提供了一个无效的参数
2013/06/08 PHP
PHP 验证身份证是否合法的函数
2017/02/09 PHP
简单实现php上传文件功能
2017/09/21 PHP
laravel 事件/监听器实例代码
2019/04/12 PHP
取得传值的函数
2006/10/27 Javascript
JS 面向对象之神奇的prototype
2011/02/26 Javascript
jQuery Ajax 实例全解析
2011/04/20 Javascript
JQUERY对单选框(radio)操作的小例子
2013/04/25 Javascript
在父页面调用子页面的JS方法
2013/09/29 Javascript
基于JQuery实现滚动到页面底端时自动加载更多信息
2014/01/31 Javascript
ext前台接收action传过来的json数据示例
2014/06/17 Javascript
JS实现弹性菜单效果代码
2015/09/07 Javascript
基于jQuery实现点击弹出层实例代码
2016/01/01 Javascript
json与jsonp知识小结(推荐)
2016/08/16 Javascript
详细分析Javascript中创建对象的四种方式
2016/08/17 Javascript
JavaScript实现经典排序算法之选择排序
2016/12/28 Javascript
JavaScript实现HTML5游戏断线自动重连的方法
2017/09/18 Javascript
基于vue2.x的电商图片放大镜插件的使用
2018/01/22 Javascript
详解在Angular4中使用ng2-baidu-map的方法
2019/06/19 Javascript
layui复选框的全选与取消实现方法
2019/09/02 Javascript
[03:04]2018年度DOTA2玩家最喜爱的主播-完美盛典
2018/12/16 DOTA
[00:10]神之谴戒
2019/03/06 DOTA
Windows上使用virtualenv搭建Python+Flask开发环境
2016/06/07 Python
Django migrations 默认目录修改的方法教程
2018/09/28 Python
Scrapy-Redis结合POST请求获取数据的方法示例
2019/05/07 Python
简单掌握CSS3中resize属性的用法
2016/04/01 HTML / CSS
仿CSDN Blog返回页面顶部功能实现原理及代码
2013/06/30 HTML / CSS
HTML5中在title标题标签里设置小图标的方法
2020/06/23 HTML / CSS
机电职业生涯规划书范文
2014/03/08 职场文书
党员个人总结范文
2015/02/14 职场文书
2015年119消防宣传日活动总结
2015/03/24 职场文书
停车场管理制度范本
2015/08/05 职场文书
css3带你实现3D转换效果
2022/02/24 HTML / CSS
Python循环之while无限迭代
2022/04/30 Python
mysql数据库实现设置字段长度
2022/06/10 MySQL