Marquee

      模仿IE下面的marquee效果,鼠标移上去暂停。形成环的主要原理在于每张图片一旦判断出了外面的显示窗口就添加到尾部,用append和prepend模拟数组的push()和shift()。

      代码如下:

HTML

<!doctype html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta content="" name="keywords" />
<meta content="" name="description" />
<meta name="author" content="codetker" />
<head>
<title>模拟marquee标签效果的简单实现</title>
<link href="style/reset.css" rel="stylesheet" type="text/css">
<link href="style/style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="/UploadFiles/2021-04-02/jquery-1.9.1.min.js">

CSS

@charset "utf-8";
/* CSS Document */
body{
  margin:0 0;
  padding:0 0;
  height:100%;
  width:100%;
}
.wrap{
  font-family:"微软雅黑","宋体", Times, "Times New Roman", serif;
  font-size:14px;
  margin:0 0;
  padding:0 0;
  height:100%;
  width:100%;
  overflow:hidden;
}
.marquee{
  margin: 0 auto;
  width: 960px;
  height: 300px;
  overflow: hidden;
}
.marquee ul{
  width: 10000px;
}
.marquee ul li{
  float: left;
  width: 500px;
  text-align: center;
}
.marquee ul li a{

}
.marquee ul li a:hover{
  color: red;
}

JavaScript

/*
 * boxScroll 0.1
 * 兼容IE8,FF,Chrome等常见浏览器
 */
 ;(function($,window,document,undefined){
   //定义构造函数
   var BoxObj=function(ele,opt){
     this.$element=ele; //最外层对象
     this.defaults={
       'style': 0 ,//滚动样式选择,默认为普通效果
       'speed': 1 ,//默认为1s
       'direction': 'left'//默认为向左边滚动
     },
   
     this.options=$.extend({},this.defaults,opt );
     //这里可以添加一些通用方法  
   }

   //给构造函数添加方法
   BoxObj.prototype={

     commonScroll:function(){
       //接收对象属性
       var obj=this.$element;
       var boxWindow=$(this.$element).children('ul');
       var speed=this.defaults.speed;
       var style=this.defaults.style;
       var direction=(this.defaults.direction=='left')"https://github.com/codetker/myMarquee">https://github.com/codetker/myMarquee

以上所述就是本文的全部内容了,希望大家能够喜欢。

标签:
jQuery,marquee

免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
狼山资源网 Copyright www.pvsay.com

评论“jQuery实现模拟marquee标签效果”

暂无“jQuery实现模拟marquee标签效果”评论...

P70系列延期,华为新旗舰将在下月发布

3月20日消息,近期博主@数码闲聊站 透露,原定三月份发布的华为新旗舰P70系列延期发布,预计4月份上市。

而博主@定焦数码 爆料,华为的P70系列在定位上已经超过了Mate60,成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢?

根据目前爆料的消息来看,华为P70系列将推出三个版本,其中P70和P70 Pro采用了三角形的摄像头模组设计,而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智,但辨识度绝对拉满。