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插件FusionCharts绘制的2D条状图效果【附demo源码】
May 13 jQuery
JavaScript实现离开页面前提示功能【附jQuery实现方法】
Sep 26 jQuery
jqueryUI tab标签页代码分享
Oct 09 jQuery
jQuery实现所有验证通过方可提交的表单验证
Nov 21 jQuery
JS/jQuery实现DIV延时几秒后消失或显示的方法
Feb 12 jQuery
vue-cli 引入jQuery,Bootstrap,popper的方法
Sep 03 jQuery
jquery实现动态添加附件功能
Oct 23 jQuery
jquery获取input输入框中的值
Nov 13 jQuery
使用jQuery实现购物车
Oct 29 jQuery
JS实现选项卡插件的两种写法(jQuery和class)
Dec 30 jQuery
jQuery使用hide()、toggle()函数实现相机品牌展示隐藏功能
Jan 29 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删除与复制文件夹及其文件夹下所有文件的实现代码
2013/01/23 PHP
php实现的Captcha验证码类实例
2014/09/22 PHP
PHP获取文件夹大小函数用法实例
2015/07/01 PHP
浅谈Laravel核心解读之Console内核
2018/12/02 PHP
Avengerls vs KG BO3 第三场2.18
2021/03/10 DOTA
判断用户是否在线的代码
2011/03/05 Javascript
表单元素的submit()方法和onsubmit事件应用概述
2013/02/01 Javascript
js网页版计算器的简单实现
2013/07/02 Javascript
js取消单选按钮选中示例代码
2013/11/14 Javascript
jquery自动填充勾选框即把勾选框打上true
2014/03/24 Javascript
javascript 兼容各个浏览器的事件
2015/02/04 Javascript
深入理解JavaScript系列(35):设计模式之迭代器模式详解
2015/03/03 Javascript
js同源策略详解
2015/05/21 Javascript
angularjs学习笔记之三大模块(modal,controller,view)
2015/09/26 Javascript
javascript跨域总结之window.name实现的跨域数据传输
2015/11/01 Javascript
JS获取鼠标坐标位置实例分析
2016/01/20 Javascript
JavaScript编程设计模式之观察者模式(Observer Pattern)实例详解
2017/10/25 Javascript
Vue是怎么渲染template内的标签内容的
2020/06/05 Javascript
vue实现滚动鼠标滚轮切换页面
2020/12/13 Vue.js
python使用urlparse分析网址中域名的方法
2015/04/15 Python
Python ValueError: invalid literal for int() with base 10 实用解决方法
2015/06/21 Python
python测试mysql写入性能完整实例
2018/01/18 Python
Pandas 同元素多列去重的实例
2018/07/03 Python
PyQt5通信机制 信号与槽详解
2019/08/07 Python
Java Unsafe类实现原理及测试代码
2020/09/15 Python
利用python批量爬取百度任意类别的图片的实现方法
2020/10/07 Python
美国顶级防滑鞋:Shoes For Crews
2017/03/27 全球购物
英国和世界各地预订便宜的酒店:LateRooms.com
2019/05/05 全球购物
weblogic面试题
2016/03/07 面试题
extern在函数声明中是什么意思
2014/01/19 面试题
仓库主管岗位职责
2014/03/02 职场文书
竞选班长的演讲稿
2014/04/24 职场文书
农林经济管理专业自荐信
2014/09/01 职场文书
商务英语专业大学生职业生涯规划书
2014/09/14 职场文书
认识实习感想
2015/08/10 职场文书
Android 界面一键变灰 深色主题工具类
2022/04/28 Java/Android