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 相关文章推荐
vue中如何引入jQuery和Bootstrap
Apr 10 jQuery
jQuery实现在HTML文档加载完毕后自动执行某个事件的方法
May 08 jQuery
jquery实现图片放大点击切换
Jun 06 jQuery
jquery dataTable 后台加载数据并分页实例代码
Jun 07 jQuery
jQuery实现的粘性滚动导航栏效果实例【附源码下载】
Oct 19 jQuery
jQuery实现浏览器之间跳转并传递参数功能【支持中文字符】
Mar 28 jQuery
jQuery实现获取选中复选框的值实例详解
Jun 28 jQuery
jQuery实现checkbox全选功能完整实例
Jul 12 jQuery
使用jQuery动态设置单选框的选中效果
Dec 06 jQuery
js/jquery遍历对象和数组的方法分析【forEach,map与each方法】
Feb 27 jQuery
jquery实现弹窗(系统提示框)效果
Dec 10 jQuery
jQuery是用来干什么的 jquery其实就是一个js框架
Feb 04 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
DC漫画《蝙蝠侠和猫女》图透 猫女怀孕老爷当爹
2020/04/09 欧美动漫
php实现文件编码批量转换
2014/03/10 PHP
PHP实现简单的新闻发布系统实例
2015/07/28 PHP
php 多继承的几种常见实现方法示例
2019/11/18 PHP
跨浏览器开发经验总结(三)   警惕“IE依赖综合症”
2010/05/13 Javascript
javascript基础知识大集锦(一) 推荐收藏
2011/01/13 Javascript
使用js检测浏览器的实现代码
2013/05/14 Javascript
button没写type=button会导致点击时提交
2014/03/06 Javascript
json属性名为什么要双引号(个人猜测)
2014/07/31 Javascript
js使用for循环查询数组中是否存在某个值
2014/08/12 Javascript
js实现类似于add(1)(2)(3)调用方式的方法
2015/03/04 Javascript
JQuery中attr属性和jQuery.data()学习笔记【必看】
2016/05/18 Javascript
Vue.js 2.0窥探之Virtual DOM到底是什么?
2017/02/10 Javascript
动态统计当前输入内容的字节、字符数的实例详解
2017/10/27 Javascript
vue2.0 如何把子组件的数据传给父组件(推荐)
2018/01/15 Javascript
Vue.js中的computed工作原理
2018/03/22 Javascript
如何将百度地图包装成Vue的组件的方法步骤
2019/02/12 Javascript
Node.js从字符串生成文件流的实现方法
2019/08/18 Javascript
JavaScript中this函数使用实例解析
2020/02/21 Javascript
PyQt5 多窗口连接实例
2019/06/19 Python
详解python和matlab的优势与区别
2019/06/28 Python
Python实现图片批量加入水印代码实例
2019/11/30 Python
Python tkinter之Bind(绑定事件)的使用示例
2021/02/05 Python
用HTML5的canvas实现一个炫酷时钟效果
2016/05/20 HTML / CSS
使用phonegap播放音频的实现方法
2017/03/31 HTML / CSS
STAY JAPAN台湾:预订日本民宿
2018/07/22 全球购物
财务分析个人的自荐书范文
2013/11/24 职场文书
宣传保护环境的公益广告词
2014/03/13 职场文书
挂靠协议书范本
2014/04/22 职场文书
我的中国梦主题教育活动总结
2015/05/07 职场文书
2016党员党章学习心得体会
2016/01/14 职场文书
幼儿园教师教学反思
2016/03/02 职场文书
超级实用的公文标题大全!
2019/07/19 职场文书
Matlab如何实现矩阵复制扩充
2021/06/02 Python
解析在浏览器地址栏输入一个URL后发生了什么
2021/06/21 Servers
Node实现搜索框进行模糊查询
2021/06/28 Javascript