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中封装函数传递当前元素的方法示例
May 05 jQuery
jquery.uploadifive插件怎么解决上传限制图片或文件大小问题
May 08 jQuery
jquery插件canvaspercent.js实现百分比圆饼效果
Jul 18 jQuery
利用jQuery异步上传文件的插件用法详解
Jul 19 jQuery
简述jQuery Easyui一些用法
Aug 01 jQuery
jquery 键盘事件的使用方法详解
Sep 13 jQuery
jQuery 利用ztree实现树形表格的实例代码
Sep 27 jQuery
Vue+jquery实现表格指定列的文字收缩的示例代码
Jan 09 jQuery
jQuery获取所有父级元素及同级元素及子元素的方法(推荐)
Jan 21 jQuery
jQuery实现的点击图片居中放大缩小功能示例
Jan 16 jQuery
9种方法优化jQuery代码详解
Feb 04 jQuery
jQuery实现本地存储
Dec 22 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-accelerator网站加速PHP缓冲的方法
2008/07/30 PHP
PHP 替换模板变量实现步骤
2009/08/24 PHP
PHP设计模式 注册表模式
2012/02/05 PHP
屏蔽机器人从你的网站搜取email地址的php代码
2012/11/14 PHP
PHP基于DateTime类解决Unix时间戳与日期互转问题【针对1970年前及2038年后时间戳】
2018/06/13 PHP
php源码的使用方法讲解
2019/09/26 PHP
图片自动缩小的js代码,用以防止图片撑破页面
2007/03/12 Javascript
javascript之锁定表格栏位
2007/06/29 Javascript
分别用marquee和div+js实现首尾相连循环滚动效果,仅3行代码
2011/09/21 Javascript
javascript格式化json显示实例分析
2015/04/21 Javascript
jQuery实现默认是闭合的FAQ展开效果菜单
2015/09/14 Javascript
JQuery点击事件回到页面顶部效果的实现代码
2016/05/24 Javascript
深入理解选择框脚本[推荐]
2016/12/13 Javascript
JavaScript实现二维坐标点排序效果
2017/07/18 Javascript
Kindeditor单独调用多图上传实例
2017/07/31 Javascript
20多个小事例带你重温ES10新特性(小结)
2019/09/29 Javascript
Vue 解决多级动态面包屑导航的问题
2019/11/04 Javascript
Python中的defaultdict与__missing__()使用介绍
2018/02/03 Python
python爬取网页内容转换为PDF文件
2020/07/28 Python
对python程序内存泄漏调试的记录
2018/06/11 Python
对python中Json与object转化的方法详解
2018/12/31 Python
python装饰器常见使用方法分析
2019/06/26 Python
python 采用paramiko 远程执行命令及报错解决
2019/10/21 Python
python GUI库图形界面开发之PyQt5布局控件QVBoxLayout详细使用方法与实例
2020/03/06 Python
Html5 实现微信分享及自定义内容的流程
2019/08/20 HTML / CSS
银行会计业务的个人自我评价
2013/11/02 职场文书
创业计划书中要认真思考的问题
2013/12/28 职场文书
自我鉴定怎么写
2014/01/12 职场文书
双十佳事迹材料
2014/01/29 职场文书
班级活动策划书
2014/02/06 职场文书
2014年三八妇女节活动方案
2014/02/28 职场文书
大学校务公开实施方案
2014/03/31 职场文书
邮政竞聘演讲稿
2014/09/03 职场文书
火烧圆明园的观后感
2015/06/03 职场文书
创业计划书之农家乐
2019/10/09 职场文书
CSS中实现动画效果-附案例
2022/02/28 HTML / CSS