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插件FusionCharts实现的Marimekko图效果示例【附demo源码】
Mar 24 jQuery
jquery.guide.js新版上线操作向导镂空提示jQuery插件(推荐)
May 20 jQuery
jQuery EasyUI的TreeGrid查询功能实现方法
Aug 08 jQuery
jquery+css实现下拉列表功能
Sep 03 jQuery
jQuery响应滚动条事件功能示例
Oct 14 jQuery
js与jQuery实现的用户注册协议倒计时功能实例【三种方法】
Nov 09 jQuery
前端html中jQuery实现对文本的搜索功能并把搜索相关内容显示出来
Nov 14 jQuery
jQuery实现模糊搜索功能的方法分析
Jun 29 jQuery
jquery无缝图片轮播组件封装
Nov 25 jQuery
jquery实现进度条状态展示
Mar 26 jQuery
jQuery实现雪花飘落效果
Aug 02 jQuery
jQuery实现可以扩展的日历
Dec 01 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脚本数据库功能详解(中)
2006/10/09 PHP
php实现监控varnish缓存服务器的状态
2014/12/30 PHP
php字符串替换函数substr_replace()用法实例
2015/03/17 PHP
解析 thinkphp 框架中的部分方法
2017/05/07 PHP
2020最新版 PhpStudy V8.1版本下载安装使用详解
2020/10/30 PHP
JQuery中dataGrid设置行的高度示例代码
2014/01/03 Javascript
JavaScript动态改变表格单元格内容的方法
2015/03/30 Javascript
基于JQuery实现分隔条的功能
2016/06/17 Javascript
AngularJS控制器详解及示例代码
2016/08/16 Javascript
Ztree新增角色和编辑角色回显问题的解决
2016/10/25 Javascript
微信小程序自定义模态对话框实例详解
2017/08/16 Javascript
webpack配置proxyTable时pathRewrite无效的解决方法
2018/12/13 Javascript
Node.js在图片模板上生成二维码图片并附带底部文字说明实现详解
2019/08/07 Javascript
微信小程序(订阅消息)功能
2019/10/25 Javascript
基于vue和websocket的多人在线聊天室
2020/02/01 Javascript
JS函数本身的作用域实例分析
2020/03/16 Javascript
Openlayers实现地图全屏显示
2020/09/28 Javascript
vue3.0 加载json的方法(非ajax)
2020/10/26 Javascript
简单的Python2.7编程初学经验总结
2015/04/01 Python
python实现对一个完整url进行分割的方法
2015/04/29 Python
深入讲解Python函数中参数的使用及默认参数的陷阱
2016/03/13 Python
Python的Flask框架应用调用Redis队列数据的方法
2016/06/06 Python
python 获取页面表格数据存放到csv中的方法
2018/12/26 Python
Python 多维List创建的问题小结
2019/01/18 Python
如何学习Python time模块
2020/06/03 Python
CSS3实现自定义Checkbox特效实例代码
2017/04/24 HTML / CSS
世界领先的在线地板和建筑材料批发商:BuildDirect
2017/02/26 全球购物
餐饮业会计岗位职责
2013/12/19 职场文书
美容师的职业规划书
2013/12/27 职场文书
医学类个人求职信范文
2014/02/05 职场文书
2015年社区文体活动总结
2015/03/25 职场文书
聘任书范文大全
2015/09/21 职场文书
少先大队干部竞选稿
2015/11/20 职场文书
总结一下关于在Java8中使用stream流踩过的一些坑
2021/06/24 Java/Android
Mysql8.0递归查询的简单用法示例
2021/08/04 MySQL
Mysql中where与on的区别及何时使用详析
2021/08/04 MySQL