精华内容
下载资源
问答
  • 款基于jQuery 左右带箭头图片浏览控制插件.rar
  • 箭头的左右图片轮播js

    热门讨论 2011-10-27 14:04:55
    用于焦点图轮播,左右有箭头,每次轮播
  • js控制div左右切换带左右箭头
  • 用 CSS 写个向箭头

    万次阅读 2017-06-30 14:24:46
    今天在修改别人写的网页的时候发现个有意思的东西,就是个向箭头,这玩意居然还能用 CSS 来写,让我眼前亮,就记录下来,

    今天在修改别人写的网页的时候发现一个有意思的东西,就是一个向右的箭头,如图所示:

    这个效果如果要我来写的话,我估计会直接弄一个图片放上去,但是我今天发现这玩意居然还能用 CSS 来写,让我眼前一亮,就记录下来,我 H5 写的不多,也许是我孤陋寡闻了,,,,

    具体代码如下:

        width: 7px;
        height: 7px;
        border-top: 2px solid #ffffff;
        border-right: 2px solid #ffffff;
        transform: rotate(45deg);

    几个简单的属性就可以写出一个图片效果,还是很不错的,要写其他方向的箭头或者其他的样式,可以按照上面的代码改改,举一反三嘛。

    展开全文
  • 3、显示效果(图片:参考百度地图) <!DOCTYPE html> <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> .routebox-revert-icon { position: ...

     1、显示效果:(CSS样式)

    <!DOCTYPE html>
    <html >
    <head>
    	<meta charset="UTF-8">
    	<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    	
    <style>
    .arrowLeft{                        /*整个箭头容器*/
    	width:40px;
        height:10px;
        display: inline-block;
        position: relative;             /*相对定位*/
    }
    .arrowLeft:before,.arrowLeft:after{
        content: '';
        border-color: transparent;       /*伪元素边框颜色为透明*/
        border-style: solid;
        position: absolute;               /*伪元素绝对定位*/
    }
    .arrowLeft:after{                   /*箭头尾部的矩形*/
        width: 60%;
        height: 2%;
        background-color:#D3D3D3;
        top: 5px;
        left: 0;
    }
    .arrowLeft:before{                 /*箭头三角形*/
        border-right-color:#D3D3D3;
        border-width: 7px;/*箭头的大小*/
        left: -13px;
        top: 2px;
    }
    
    .arrowRight{                        /*整个箭头容器*/
    	width:40px;
        height:10px;
        display: inline-block;
        position: relative;             /*相对定位*/
        top: -9px;
    }
    .arrowRight:before,.arrowRight:after{
        content: '';
        border-color: transparent;       /*伪元素边框颜色为透明*/
        border-style: solid;
        position: absolute;               /*伪元素绝对定位*/
    }
    .arrowRight:after{                   /*箭头尾部的矩形*/
        width: 60%;
        height: 2%;
        background-color:#D3D3D3;
        top: 5px;
        left: 0;
    }
    .arrowRight:before{                 /*箭头三角形*/
        border-left-color:#D3D3D3;
        border-width: 7px;
        left: 28px;
        top: 2px;
    }
    </style>
    </head>
    
    <body >
    
    <div>
      <div id="arrowLeft" class="arrowLeft"></div></br>
      <div id="arrowRight" class="arrowRight"></div>
    </div>
    
    </body>
    </html>

     2、显示效果(CSS样式)

    
    <!DOCTYPE html>
    <html >
    <head>
    	<meta charset="UTF-8">
    	<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    	
    <style>
    .arrowLeft{                       /*整个箭头容器*/
    	width:40px;
    	height:10px;
    	display: inline-block;
    	position: relative;             /*相对定位*/
    }
    .arrowLeft:before,.arrowLeft:after{
    	content: '';
    	border-color: transparent;       /*伪元素边框颜色为透明*/
    	border-style: solid;
    	position: absolute;               /*伪元素绝对定位*/
    }
    .arrowLeft:after{                   /*箭头尾部的矩形*/
    	width: 60%;
    	height: 3%;
    	background-color:#D3D3D3;
    	top: 5px;
    	left: 0;
    }
    .arrowLeft:before{                 /*箭头三角形*/
    	border-right-color:#D3D3D3;
    	border-width: 8px;
    	left: -15px;
    	top: 0;
    }
    .arrowRight{                        /*整个箭头容器*/
    	display: inline-block;
    	position: relative;             /*相对定位*/
    }
    .arrowRight:before{
    	content: '';
    	border-color: transparent;       /*伪元素边框颜色为透明*/
    	border-style: solid;
    	position: absolute;               /*伪元素绝对定位*/
    }
    .arrowRight:before{                 /*箭头三角形*/
    	border-left-color:#D3D3D3;
    	border-width: 8px;
    	left: 25px;
    	top: -31px;
    }
    </style>
    </head>
    
    <body >
    
    <div>
      <div id="arrowLeft" class="arrowLeft"></div></br>
      <div id="arrowRight" class="arrowRight"></div>
    </div>
    
    </body>
    </html>

    3、显示效果(图片:参考百度地图)

    <!DOCTYPE html>
    <html >
    <head>
    	<meta charset="UTF-8">
    	<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    	
    <style>
    .routebox-revert-icon {
        position: absolute;
        left: 30px;
        top: 30px;
        width: 18px;
        height: 14px;
        background: url(//webmap1.bdimg.com/wolfman/static/common/images/new/revert_9adb172.png);
    </style>
    </head>
    
    <body >
    
    <div class="routebox-revert-icon"></div>
    
    </body>
    </html>

     

    展开全文
  • 制作下角箭头的.9图片

    千次阅读 2016-04-27 18:13:32
    如果不.9图片,前面的箭头肯定会随着信息长度变化而变化,那肯定是毁三观的。 认识.9图片 .9图片保证不失真,在最外层加了圈区域设置功能,通过用纯黑色颜色来设置(必须是纯黑,#000000)。共四个边,每个边的

    .9图片介绍

    1. 简单了解
      .9图片在APP中用的非常多,主要是为了防止图片缩放后造成变形,确保图片不失真。
      典型的就是微信的聊天界面,如对方信息长短不一,但背景使用的都是同一张图片。
      这里写图片描述

      如果不.9图片,前面的箭头肯定会随着信息长度变化而变化,那肯定是毁三观的。
      这里写图片描述

    2. 认识.9图片
      .9图片保证不失真,在最外层加了一圈区域设置功能,通过用纯黑色颜色来设置(必须是纯黑,#000000)。共四个边,每个边的功能如下:

    左边:纵向拉伸区域(上下)
    上边:横向拉伸区域(左右)

    右边:前景内容区域的高
    下边:前景内容区域的宽
    这里写图片描述这里写图片描述
    左边和上边是拉伸的区域,图片被拉伸后,设置的区域会被拉伸,其他地方会保持原大小。
    右边和下边是显示前景的区域,前景的内容只能显示在此区域。如果未设置,前景将被挤出来,相当于两个控件一样,一个背景的控件,一个是内容的控件,是并排关系,不是叠加关系了。

    所以.9图片没有特殊情况下,都要设置四个边的。
    下面结合以前学的PS技术来完成右下角箭头的制作

    用PS制作右下角箭头

    1. 新建一张图片,大小为20px*20px,背景内容选透明。因为箭头小,所以图片的尺寸可以尽量小。
      这里写图片描述

    2. 缩放图片至适合大小(Alt+鼠标上滚),标尺的单位是像素,知道我放到多大了吧
      这里写图片描述

    3. 画三角形。画法很多,这里介绍三种
      1). 用钢笔
      使用钢笔(P)的时候不要拖动,直接点击三角形的三个顶点就可以。这里画了两个边都是8px,
      这里写图片描述
      转成选区(Ctrl+Enter)。
      这里写图片描述
      2). 用多边形
      使用多边形(U),把顶部属性栏中“边:”数改为3
      从上面(或左边)坐标上拉一根参考线到12像素的位置(菜单栏 - 视图,可清除)。点击右下角,按住Shift(45°的倍数),往右下角拖动,直到三角形在画布中的区域与参考线相交为止
      这里写图片描述

      3). 矩形转三角形
      先用选框工具选择8*8的区域
      这里写图片描述
      填充颜色(Alt+Backspace/Delete)。
      右键——自由变换
      右键——斜切
      这里写图片描述
      把鼠标移动到左上角,变成“白色三角形”后,向下拖动到底部(刚好是斜切了45°。Canvas中经常用到矩阵Matrix,它的skew斜切就是这样做的)。
      这里写图片描述

    4. 填充颜色
      填充前景色(Alt+Backspace/Delete)。前景色设置在左边工具栏
      这里写图片描述

    5. 周围添加.9图片区域设置空间
      四周放大一个像素,修改画布大小(Ctrl+Alt+C)。因为四周都要加,所以宽高加2px。当然在画图时把画布缩小一个像素来画也可以,就不需要此步骤了。
      这里写图片描述
      这里写图片描述
    6. 保存,选PNG格式,并把后缀名改为.9.png。保存时弹出PNG选项,默认设置。
      这里写图片描述

    操作说明:
    取消选区选择:Ctrl+D
    删除颜色:选择区域(M) -> 删除(Delete)
    删除不了,是因为没有栅格化图层,右键图层

    制作.9图片

    1. 方法一:用PS
      修改前景色为纯黑色,在最外围添加纯黑色。用矩形选框或矩形工具都可以。四个顶角的像素不要设置
      这里写图片描述

    2. 方法二:开发工具自带的draw9patch.bat
      如果没有打开AS,直接打开软件编辑(Eclipse和AS都在SDK目录下的\tools\draw9patch.bat)
      如果图片放入了drawable里,双击就会自动打开此软件。直接拖拉边界线就行,非常方便
      这里写图片描述
      说明,如果给的.9图片最外层的一圈像素没有设置区域,draw9patch.bat会自动把最外层的像素清空,用于设置区域

    这里的图片仅适用我的分辨率,为了更好的效果,需要制作不同分辨率的图,以达到屏幕适配

    最终效果如下:
    这里写图片描述

    最后附上两种聊天对话框背景图片的制作图片:
    这里写图片描述这里写图片描述

    发现我挺适合写操作说明书的,如此地详细(啰嗦)。。。⊙﹏⊙b汗

    展开全文
  • 需求是我自己要自定义左右切换的箭头图片,每个页面里面显示6组数据。 二 上代码 :autoplay="false" 不需要自动轮播 arrow="never" 不需要自带的箭头 indicator-position="none" 不需要底部的指示器 重点在于 ...

    一 效果图

    需求是我自己要自定义左右切换的箭头图片,每个页面里面显示6组数据。

    二 上代码

    :autoplay="false" 不需要自动轮播

    arrow="never"  不需要自带的箭头

    indicator-position="none"  不需要底部的指示器

    重点在于 ref=“cardShow”调用方法

    <div class="leftArrow">
          <img src="@/assets/img/survey/boardItem/left.png" v-if="currentPage" @click="arrowClick('left')" />
        </div>
    
    <el-carousel  :autoplay="false" height="72px" arrow="never" indicator-position="none" ref="cardShow" >
           <el-carousel-item v-for="itemPage in pageLength" :key="itemPage">
              <el-row>
                <el-col :span="4" v-for="(item, index) in list" :key="index">
                  <img :src="item.carImg" style="width: 70px; height: 40px"/>
                  <!-- <div> {{ item.carName +  itemPage }} </div>  -->
                </el-col>
              </el-row>
            </el-carousel-item>
    </el-carousel>
    
        <div class="rightArrow">
          <img src="@/assets/img/survey/boardItem/right.png" @click="arrowClick('right')" v-if="pageLength !== currentPage + 1"/>
        </div>
    arrowClick(val) {
          if(val === 'right') {
            this.$refs.cardShow.next()
          } else {
            this.$refs.cardShow.prev()
          }
        },

    上面有个pageLength方法,就是需要前端自己处理一下分页,比如6条一页前端自己处理一下分页。

    flex布局处理

    具体可以参考我这篇文章https://blog.csdn.net/sunnyboysix/article/details/105946134有前端自己处理分页方法,自己处理一下数据结构就ok了。

     

    加油加油加油

    展开全文
  • 这是款鼠标悬停标题动画向上浮动出现蓝色背景遮罩,并带有加号点击查看详情的jQuery图片滚动代码效果,还可以点击箭头按钮控制图片滚动。
  • Slick 图片左右滑动幻灯片效果

    千次阅读 2016-04-17 17:32:18
    slick 是个可以实现幻灯片效果的 jquery 插件。具有以下特点: * 支持响应式 * 浏览器支持 CSS3 时,则使用 CSS3 过度/动画 * 支持移动设备滑动 * 支持桌面浏览器鼠标拖动 * 支持左右控制 * 支持动态添加、...
  • 在data中定义个对象 swiperOption: { slidesPerView: 3, spaceBetween: 30, freeMode: true, navigation: { nextEl: '.next', prevEl: '.prev' } } css我就不码了 看看效果 over!
  • 图片左右箭头之上一张下一张

    千次阅读 2014-03-11 16:33:45
    $('img.view:first').bind('init', function() { _clickPNBtn = function(ev) { var _url = $(ev).attr('href'); if (_url && _url != '' && !/^javascript:/.test(_url)) { location.href = _url;
  • 前端开发中会使用到各种各样的箭头,有时候不断替换图片实在麻烦,掌握这些css小技巧,轻松实现各种箭头。 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="...
  • 列表左右滚动

    2014-08-29 10:40:01
    箭头控制图片列表左右滚动jQuery代码
  • vue + js实现点击箭头实现左右切换

    千次阅读 2018-08-09 10:41:24
    &lt;div class="pubuItemsBox"&gt;  &lt;!-- 修改部分5.23晚 --&gt;  &lt;...(orderEvent, index) in orderEventList"...{'pubuItem':true, 'noMag':(index+1)...
  • 在网上看到到处都有图片左右箭头的代码,但是下载下来以后出现了浏览器不兼容的现象,于是就开发了兼容各种浏览器的代码,供大家使用!有什么疑问的话可以找我,我的QQ:763352953
  • ![图片说明](https://img-ask.csdn.net/upload/201501/20/1421767974_952339.png) 不求代码,求个思路就成,提示下也好。。
  • 带左右箭头图片切换

    千次阅读 2016-12-25 20:31:25
    //右箭头 Btn_l=$('#btn .L'); //右箭头 var num=rq_con.find('li').length ; //图片的个数 for(i=0;i;i++){ //循环 nav 下的dd 小蓝点 $('.nav').append("<dd></dd>");...
  • ScrollPic.js对于一些新手来说是个很好理解运用的图片左右滚动插件,兼容性较好,可以放心大胆的使用。
  • 虽然这是图片左右滚动特效,但它既没有向滚动按钮也没有向滚动按钮,更没有暂停按钮。JS只需要测试你的鼠标位置即可自动控制图片或者向滚动即可
  • js实现图片左右移动轮播

    千次阅读 2016-11-23 20:05:49
    2.移入图片时自动轮播停止,并且有左右两个箭头. 3.图片下方有排按钮,可以点击进行切换,并且按钮的样式也随之切换.代码如下: html+css:*{ margin: 0; padding: 0; } html,body{ width: 100%;
  • 网页图片左右滚动特效实例

    千次阅读 2015-05-28 14:18:43
     很多网站上都有这个单击左右箭头滚动图片的效果; 看下代码: jq控制左右箭头滚动图片列表 *{ margin:0; padding:0;font-size: 12px;} ul{ list-style:none;} .slider{ width:960px;border: 1px ...
  • css3画步骤条 矩形向右箭头

    千次阅读 2019-02-21 09:06:30
    要实现的效果如图: 代码如下: &lt;template&gt; &lt;div class="page"&gt; &lt;...个身份只能开一家店;开店后店铺无法注销;申请到正式开通预计需1-3
  • 这是款带有左右箭头按钮控制的jQuery图片滚动切换特效,代码简洁易用,图片滚动时有动感效果。
  • 设置ExpandableListView左边的箭头

    千次阅读 2015-03-18 15:29:49
    Android心得:ExpandableListView 功能界面布局探究之 ...1、更换ExpandableListView右边的箭头(小图标)的疑问 2、展开个group的实现 3、没有child的下拉列表,group不展开的实现 1、更换E
  • 1、更换ExpandableListView右边的箭头(小图标)的疑问  第个方法: 网上许多说到在ExpandableListView的布局xml中的groupIndicator更换成@drawable/***,我试过,可行,代码如下: 首先在drawable的
  • ExpandableListView,默认箭头放到右侧

    千次阅读 2017-12-07 12:58:44
    //设置适配器执行之后执行setIndicatorBounds方法可以设置默认的下拉箭头的位置(我理解的)第个参数的意思是距离右侧140,(我理解的)第二个参数是箭头的宽度是箭头图片的初始大小-10 exlist_lol.setAdapter...
  • 目标效果 默认选中第张,鼠标悬浮缓慢放大图片,底部文字介绍由下往上缓慢滑出,选中后边框效果; 左右滑动,距离为四张图片。...左右箭头可以使用图片,我这里使用的是:before和:after伪类做的,通过倾斜
  • 简单的JS图片切换代码,图片储存于数组中
  • 先上学习地址:...作者对轮播图左右按钮的处理方法改往常,不是简单地用btn.prev+btn.next的图片代替,而是用纯css制作。 第个是left按钮,即prev: .vmc-arrow-left:after { content: "\e079"; ...
  • Jquery和纯JS实现轮播图()--左右切换式

    万次阅读 热门讨论 2017-04-28 13:01:44
    给大家分享下常见 的左右切换式轮播图; 、页面结构 对于左右切换式的轮播图的结构主要分为以下几个部分: 1、首先是个外围部分...4、然后是图片两端的箭头和右箭头 7、然后是个按钮层,用来定位图片组的i

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 37,275
精华内容 14,910
关键字:

一左一右箭头图片