jquery实现图片无缝滚动 蒙版遮蔽效果


Posted in jQuery onJanuary 11, 2020

本文实例为大家分享了jquery实现图片无缝滚动、蒙版效果的具体代码,供大家参考,具体内容如下

1、无缝连接:通过对li设置属性float:left;消除标签之间的间隔
2、通过对ul整体进行偏移设置,使图片整体滚动,
3、设置图片切换时机,
4、蒙版遮罩移入时机的选择

代码片.

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title></title>
 <script type="text/javascript" src="../js/jquery-1.10.2.js" ></script>
 <style>
  *{
  margin: 0;
  padding: 0;
  }
  .div1{
  width: 400px;
  height: 150px;  
  overflow: hidden;
  border: 1px solid #A9A9A9;
  margin: 30px auto;
  }
  .ul1{
  position: relative;
  left: 0px;
  width: 1200px;
  }
  .ul1>li{
  position: relative;  
  list-style: none;
  float: left;  
  width: 200px;
  height: 150px;
  background: #3388FF;
  }
  .ul1>li>div{
  position: absolute;
  left: 0;
  top: 0;
  background: #A9A9A9;
  width: 200px;
  height: 150px;
  opacity: 0;
  }
 </style>
 </head>
 <body>
 <div class="div1">
  <ul class="ul1">
  <li><img src="../img/wall1.jpg" alt="" width="100%"/><div></div></li>
  <li><img src="../img/wall2.jpg" alt="" width="100%"/><div></div></li>
  <li><img src="../img/wall3.jpg" alt="" width="100%"/><div></div></li>
  <li><img src="../img/wall4.jpg" alt="" width="100%"/><div></div></li>
  <li><img src="../img/wall1.jpg" alt="" width="100%"/><div></div></li>
  <li><img src="../img/wall2.jpg" alt="" width="100%"/><div></div></li>
  </ul>
 </div>
 <script>
  $(function(){
  var $time = '';
  var mi = 0;
  gundong();
  function gundong(){
   $time = setInterval(function(){
   mi += -10;
   if (mi<-800) {
    mi = 0
   }
   $('.ul1').css({    
    marginLeft: mi+'px'   
   });
   },100);
  }
  $('li').mouseover(function(){
   window.clearTimeout($time);
   $('li').not($(this)).contents('div').css({
   opacity:0.6
   });
  });
  $('li').mouseout(function(){
   gundong();
   $('li').not($(this)).contents('div').css({
   opacity:0
   });
  });
  });
 </script>
 </body>
</html>

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

jQuery 相关文章推荐
jquery点赞功能实现代码 点个赞吧!
May 29 jQuery
jQuery正则验证注册页面经典实例
Jun 10 jQuery
详解jquery选择器的原理
Aug 01 jQuery
快速掌握jquery分页插件jqPaginator的使用方法
Aug 09 jQuery
基于jQuery中ajax的相关方法汇总(必看篇)
Nov 08 jQuery
jquery+css3实现熊猫tv导航代码分享
Feb 12 jQuery
基于jQuery使用Ajax动态执行模糊查询功能
Jul 05 jQuery
jquery判断滚动条距离顶部的距离方法
Sep 05 jQuery
JQuery模拟实现网页中自定义鼠标右键菜单功能
Nov 14 jQuery
jquery实现点击弹出对话框
Feb 08 jQuery
jquery插件实现搜索历史
Apr 24 jQuery
jQuery操作动画完整实例分析
Jan 10 #jQuery
jQuery操作事件完整实例分析
Jan 10 #jQuery
jQuery操作元素追加内容示例
Jan 10 #jQuery
jQuery操作元素的内容和样式完整实例分析
Jan 10 #jQuery
jquery选择器和属性对象的操作实例分析
Jan 10 #jQuery
jquery实现吸顶导航效果
Jan 08 #jQuery
基于jQuery实现挂号平台首页源码
Jan 06 #jQuery
You might like
PHP中实现中文字符进制转换原理分析
2011/12/06 PHP
关于查看MSSQL 数据库 用户每个表 占用的空间大小
2013/06/21 PHP
PHP取二进制文件头快速判断文件类型的实现代码
2013/08/05 PHP
JavaScript创建命名空间的5种写法
2014/06/24 PHP
PHP长连接实现与使用方法详解
2018/02/11 PHP
php实现微信支付之企业付款
2018/05/30 PHP
Laravel 微信小程序后端实现用户登录的示例代码
2019/11/26 PHP
原生Js与jquery的多组处理, 仅展开一个区块的折叠效果
2011/01/09 Javascript
firefox下jQuery UI Autocomplete 1.8.*中文输入修正方法
2012/09/19 Javascript
解决火狐浏览器下JS setTimeout函数不兼容失效不执行的方法
2012/11/14 Javascript
jQuery点击改变class并toggle及toggleClass()方法定义用法
2015/12/11 Javascript
老生常谈jquery id选择器和class选择器的区别
2017/02/12 Javascript
js实现九宫格拼图小游戏
2017/02/13 Javascript
Node.js安装配置图文教程
2017/05/10 Javascript
微信小程序input框中加入小图标的实现方法
2018/06/19 Javascript
layui 监听表格复选框选中值的方法
2018/08/15 Javascript
通过Nodejs搭建网站简单实现注册登录流程
2019/06/14 NodeJs
vue 框架下自定义滚动条(easyscroll)实现方法
2019/08/29 Javascript
Python Tkinter简单布局实例教程
2014/09/03 Python
python ddt实现数据驱动
2018/03/14 Python
Linux(Redhat)安装python3.6虚拟环境(推荐)
2018/05/05 Python
Python3日期与时间戳转换的几种方法详解
2019/06/04 Python
Python3.7 基于 pycryptodome 的AES加密解密、RSA加密解密、加签验签
2019/12/04 Python
Python3 使用selenium插件爬取苏宁商家联系电话
2019/12/23 Python
django实现将修改好的新模型写入数据库
2020/03/31 Python
Belvilla德国:在线预订度假屋
2018/04/10 全球购物
编码转换,怎样实现将GB2312编码的字符串转换为ISO-8859-1编码的字符串
2014/01/07 面试题
酒店管理自荐信
2013/10/23 职场文书
幼儿园教师演讲稿
2014/05/06 职场文书
环保志愿者活动方案
2014/08/14 职场文书
安全演讲稿开场白
2014/08/25 职场文书
2014年教研室工作总结
2014/12/06 职场文书
学校开除通知书
2015/04/25 职场文书
校园开放日新闻稿
2015/07/17 职场文书
jquery插件实现搜索历史
2021/04/24 jQuery
JavaScript异步操作中串行和并行
2021/11/20 Javascript