主页 / user-238453

word's questions

Martin Hope
word
Asked: 2022-08-27 01:11:55 +0800 CST
  • 0

告诉我如何设计地铁站数据库？
下面是地铁图。
在此处输入图像描述

一般来说，应该可以按站搜索时间表，并且还应该可以绘制从初始站到最终站的路线。
在哪个表中存储距离并不完全清楚。
有两个想法：

  1. 在中间表station_station中存储距离（多对多）
  2. 或存储在距离（一对多）表中

使用中间表 station_station（多对多）的第一个选项：
App\Models\Station：

id
name  
type(обычная, пересадка)  
lineName

public function distances()
{
    return $this->belongsToMany(Station::class);
}

App\Models\StationStation（多对多）

station_id
station_id2
km  (расстояние от station_id до station_id2)

第二个选项是将距离存储在距离表
App\Models\Station

id
name  
type(обычная, пересадка)  
lineName  

public function distances()
{
    return $this->hasMany(Distance::class);
}

应用\模型\距离

id  
station_id  
station_id2  
km

我不太确定如何正确操作，请告诉我如何操作？
站列表将从文件加载到数据库中。
相邻的车站会在地铁线路的名称之后一个接一个地走：
例如在Bookock线上会有这样一个列表：

Boock Line (линия)  
Ajax Rapids (соседняя станция)  
HTML Heights (соседняя станция)  
JavaBeans Boulevard (соседняя станция)  
...

在此处输入图像描述

PS
即 随后将有一种算法来计算从一个站点到另一个站点的最短路径。
不过这个现在不感兴趣了，现在他感兴趣的是如何正确组织数据库

laravel
Martin Hope
word
Asked: 2022-04-03 05:37:41 +0800 CST
  • 1

有一个文本“标志”形式的标志，在它下面还有一个文本“标志文本”
https://jsfiddle.net/4tp2hkL0/
在标志下面还有一个图片形式的背景，问题是“标志文字”应该稍微在底线的上方，这样文字下面就看不到任何线条，但背景是可见的。
使用溢出隐藏行：隐藏，但文本的底部也被隐藏。
怎么做才对？
也许您需要以不同的方式制作线条？问题正是在徽标文本周围的条带中，并且该条带在文本“徽标文本”下不可见。

aside{
  width: 50%;
}
header .logo h1{
    font-size: 32px;
    text-transform: uppercase;
    font-weight: bold;
    color: #fff;
}
aside{
    padding: 30px 33px;
    background-color: gray;
}
header .logo{
  position: relative;
  display: inline-block;
  border-top: 3px solid rgba(197, 124, 24, 0.6);
  border-left: 3px solid rgba(197, 124, 24, 0.6);
  border-right: 3px solid rgba(197, 124, 24, 0.6);
  overflow: hidden;
}
header .logo h1{
  font-size: 48px;
  padding: 10px;
}
header .logo span{
  font-size: 15px;
  position: absolute;
  bottom: -9px;
  right: 35px;
  text-transform: uppercase;
  color: #fff;
  line-height: 1;
  padding: 4px;
}
header .logo span::before{
  content: '';
  position: absolute;
  top: 50%;
  left: -100%;
  width: 200%;
  height: 3px;
  background: rgba(197, 124, 24, 0.6);
  transform: translateX(-50%);
}
header .logo span::after{
  content: '';
  position: absolute;
  top: 50%;
  right: -100%;
  width: 200%;
  height: 3px;
  background: rgba(197, 124, 24, 0.6);
  transform: translateX(50%);
}
<aside>
  <header>
    <div class="logo">
      <h1>Logo</h1>
      <span>logo text</span>
    </div>
  </header>
</aside>

css
Martin Hope
word
Asked: 2021-12-04 22:31:48 +0800 CST
  • 0

告诉我，在使用 ace.js（代码编辑器）时，如果您放置带有重音符号的文本并在文本末尾开始输入，则光标不会正确移动。如何解决？ https://jsfiddle.net/5vkjudrw/

var editor = ace.edit('editor', {
        mode: "ace/mode/html",
        selectionStyle: "text",
        autoScrollEditorIntoView: true,
        minLines: 1,
        maxLines: 2000
    });
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.11/mode-html.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.11/ace.min.js"></script>

<div id="editor" class="editor">Я занима́юсь про́граммированием</div>

jquery
Martin Hope
word
Asked: 2020-09-16 16:13:17 +0800 CST
  • 4

为什么通过 background-image CSS 添加的 svg 图标没有被渲染？

编码：

.icon-social{
    display: inline-block;
    width: 23px;
    height: 23px;
    border-radius: 50%;
    border: 1px solid black;
    vertical-align:middle;
}
.icon-social.big{
    width: 49px;
    height: 49px;
}
.icon-social i{
    display: inline-block;
    width: 100%;
    height: 100%;
}
.icon-facebook i{
    background-image: url("data:image/svg+xml,%3Csvg id='Capa_1' enable-background='new 0 0 512 512' height='512' viewBox='0 0 512 512' width='512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m512 256c0-141.4-114.6-256-256-256s-256 114.6-256 256 114.6 256 256 256c1.5 0 3 0 4.5-.1v-199.2h-55v-64.1h55v-47.2c0-54.7 33.4-84.5 82.2-84.5 23.4 0 43.5 1.7 49.3 2.5v57.2h-33.6c-26.5 0-31.7 12.6-31.7 31.1v40.8h63.5l-8.3 64.1h-55.2v189.5c107-30.7 185.3-129.2 185.3-246.1z'/%3E%3C/svg%3E");

}
<a href="#">
   <span class="icon-social icon-facebook big">
     <i></i>
   </span>
</a> <span>- не отображается svg</span>
<img src="data:image/svg+xml,%3Csvg id='Capa_1' enable-background='new 0 0 512 512' height='512' viewBox='0 0 512 512' width='512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m512 256c0-141.4-114.6-256-256-256s-256 114.6-256 256 114.6 256 256 256c1.5 0 3 0 4.5-.1v-199.2h-55v-64.1h55v-47.2c0-54.7 33.4-84.5 82.2-84.5 23.4 0 43.5 1.7 49.3 2.5v57.2h-33.6c-26.5 0-31.7 12.6-31.7 31.1v40.8h63.5l-8.3 64.1h-55.2v189.5c107-30.7 185.3-129.2 185.3-246.1z'/%3E%3C/svg%3E" alt="">

添加：

<svg id="Capa_1" enable-background="new 0 0 512 512" height="512" viewBox="0 0 512 512" width="512" xmlns="http://www.w3.org/2000/svg"><path d="m512 256c0-141.4-114.6-256-256-256s-256 114.6-256 256 114.6 256 256 256c1.5 0 3 0 4.5-.1v-199.2h-55v-64.1h55v-47.2c0-54.7 33.4-84.5 82.2-84.5 23.4 0 43.5 1.7 49.3 2.5v57.2h-33.6c-26.5 0-31.7 12.6-31.7 31.1v40.8h63.5l-8.3 64.1h-55.2v189.5c107-30.7 185.3-129.2 185.3-246.1z"/></svg>

链接到 JSFiddle

css
Martin Hope
word
Asked: 2020-08-05 18:30:16 +0800 CST
  • 0

有必要在基础构造函数中连接服务，以便该服务在继承基础的所有控制器中工作，但此构造函数不起作用。
给出错误消息：

Target [App\Services\GeneralAppLayerInterface] is not instantiable while building [App\Http\Site\Controllers\HomeController].

use App\Services\GeneralAppLayerInterface;
use Illuminate\Foundation\Auth\Access\AuthorizesRequests;
use Illuminate\Foundation\Bus\DispatchesJobs;
use Illuminate\Foundation\Validation\ValidatesRequests;
use Illuminate\Routing\Controller as BaseController;

class Controller extends BaseController {
    use AuthorizesRequests, DispatchesJobs, ValidatesRequests;

    public $general;

    public function __construct(
        GeneralAppLayerInterface $general
    ) {
        $this->general = $general;
    }
}

通用应用层接口

interface GeneralAppLayerInterface
{
    /**
     * Returns an array with resources.
     *
     * @param array $params
     *
     * @return array
     */
    public function getData(array $params = null);
}

一般事务

class GeneralService implements GeneralAppLayerInterface {
    public $path;
    private $settings;
    private $menu;

    public function __construct() {
        
    }

    public function getData(array $params = null){
        $data = some data;
        return [
            'data' => $data
        ];
    }

应用服务提供者

use App\Http\Site\Controllers\Controller;
use App\Services\GeneralAppLayerInterface;
use App\Services\Site\GeneralService;
use Illuminate\Support\ServiceProvider;
use DB;

class AppServiceProvider extends ServiceProvider {
    /**
     * Register any application services.
     *
     * @GeneralService - frontend service
     * @return void
     */
    public function register() {
        $this->app->when(Controller::class)
            ->needs(GeneralAppLayerInterface::class)
            ->give(function ($app) {
                return $app->make(GeneralService::class);
            });
    }

家庭控制器

use App\Http\Site\Controllers\Controller;

class HomeController extends Controller {
    public function index() {
        $data = $this->general->getData();
        dump($data);

如何解决？

php
Martin Hope
word
Asked: 2020-08-01 20:59:00 +0800 CST
  • 0

properties我有一个包含一列的表json-данные

$table->json('properties')->nullable();

在Seeder你需要添加的文件中json-данные

$sections = [
    [
        'name' => 'section1',
        'content' => 'content1',
        'properties' => json_encode([
            "link" => "/link"
        ]),
    ],
...
DB::table('sections')->insert($sections);

但是在导入数据时，会出现以下错误：

Insert value list does not match column list: 1136 Column count doesn't match value count at row 2

如果删除json_encode，它会给出一个错误：

 Array to string conversion

如何正确插入json-данные？

laravel
Martin Hope
word
Asked: 2020-07-29 23:06:29 +0800 CST
  • 1

表中有一个字段images具有唯一值

$table->string('url')->unique();

编写现有的 时url，会生成错误： Integrity constraint violation: 1062 Duplicate entry
我捕获错误try catch并打印错误文本。
告诉我，我怎样才能显示我自己的错误消息而不是当前消息？
例如ajax保存图片，保存后会显示此信息Integrity constraint violation: 1062 Duplicate entry，需要进行配置。

php
Martin Hope
word
Asked: 2020-07-14 23:10:38 +0800 CST
  • 0

我正在使用该模块Spatie laravel-medialibrary来保存图像。
要将图像存储在 table 中media，您需要调用如下方法toMediaCollection()：

$item->addMedia()->toMediaCollection();

因此，该文件将被放置在默认文件夹中。
但是选择和保存图像来自现有文件，最初输出File

$files = collect(File::allFiles(public_path('/images')) );
...
return view('view', ['images' => $files]);

它们已经在文件夹中，选择和保存时，您不需要移动现有图像，而只需在表格中输入media有关所选图像的条目。
这是必要的，因为图像可以位于子文件夹中，并且由于新保存，图像将移至默认文件夹，但您需要将图像保留在其文件夹中。这可以做到吗？

php
Martin Hope
word
Asked: 2020-07-07 22:42:21 +0800 CST
  • 1

只有当用户在管理面板中时，是否可以注册服务提供商？
这需要路由器检查，例如，管理面板中是否有前缀['prefix' => 'admin']？
一般来说，你需要这样的东西https://stackoverflow.com/questions/39844709/how-do-i-call-a-model-in-a-custom-laravel-5-3-config-file
即 . 这样您就可以从配置文件中访问模型。
在上面的文章中，他们写道，您需要在文件中创建一个密钥，app.php 'user_model' => App\Models\User::class,
然后像这样访问它： $user = config('app.user_model'); // app in file name

但它给了我一个错误：
Fatal error: Uncaught RuntimeException: A facade root has not been set. in \vendor\laravel\framework\src\Illuminate\Support\Facades\Facade.php:258

那些。我需要从管理面板中的配置文件访问模型。
config/app.php
'page_model' => App\Models\Page::class,
我使用模块adminlte，在配置文件中config/adminlte.php我需要找出条目的数量，'label' => config('app.page_model')->count(),
但它给出了一个错误，
即 我需要让它只在管理面板中工作，如果我在 中输入config/app.php，那么额外的请求将在我理解的前端工作

附言

use App\Models\Car;
use Illuminate\Support\Facades\Auth;

class Admin {
    /**
     * Handle an incoming request.
     *
     * @param \Illuminate\Http\Request $request
     * @param \Closure $next
     * @return mixed
     */
    public function handle($request, Closure $next) {
        if (!Auth::guard('web')->check()) {
            abort(403);
        }
        if (auth()->guard('web')->check()) {
            config(['pages' => Car::count()]);
        }else {
            config(['pages' => 22]);
        }
        return $next($request);
    }
}

配置/adminlte.php

    [
        'text'        => 'pages',
        'url'         => 'admin/pages',
        'icon'        => 'far fa-fw fa-file',
        'label'       => config('pages'),  //количество страниц не работает
        'label_color' => 'success',
    ],

那些。config('pages')如果你输入任何数字，那么菜单会显示这个数字，但是这个配置不起作用config('pages')
你能告诉我为什么会这样吗？
在控制器中，config('pages')此变量可用并显示数字

附言

public function handle($request, Closure $next) {
    if (auth()->guard('web')->check()) {
        config([
            'adminlte.menu' => [
                [
                    'text' => 'cars',
                    'url'  => 'admin/cars',
                    'icon' => 'fas fa-fw fa-car',
                ],
                [
                    'text'        => 'pages',
                    'url'         => 'admin/pages',
                    'icon'        => 'far fa-fw fa-file',
                    'label'       => Car::whereStatus(1)->count(),
                    'label_color' => 'success',
                ]
php
Martin Hope
word
Asked: 2020-07-02 22:47:38 +0800 CST
  • 0

有这样一个数组：

"params" => array:6 
        1 => "7"
        2 => "10"
        3 => "19"
        4 => "22"
        5 => "29"
        6 => array:3 
          0 => "33"
          1 => "35"
          2 => "36"
]

如何使嵌套数组的值33,35,36与前 6 个数组值齐平？
Collection中是否有合适的方法，还是使用常规php更容易？
事先不知道嵌套数组将在哪个键下。
它需要是这样的：

"params" => array:8 
       1 => "7"
       2 => "10"
       3 => "19"
       4 => "22"
       5 => "29"
       6 => "33"
       7 => "35"
       8 => "36"
]
php
Martin Hope
word
Asked: 2020-06-11 20:59:20 +0800 CST
  • -1

数据库中有关于汽车主题的表格：这些表格中的
标记
(id,name,alias)
模型
(id,name,alias,mark_id)
大约是以下数据： 

    $marksModels = [
        'Tesla' => ['Model S','Model X'],
        'Toyota' => ['Avensis','Prius New','iQ'],
        'Mercedes-Benz' => ['B-Class'],
        'BMW' => ['i3','1-Series','2-Series','3-Series'],
        ...
    ];

应用\模型 

class Mark extends Model {
    protected $fillable = ['name','alias'];
    public $timestamps = true;

    public function carmodel(){
        return $this->hasMany('App\Models\CarModel');
    }
}

class CarModel extends Model {
    protected $table = 'models';
    protected $fillable = ['name','alias','mark_id'];

    public function mark(){
        return $this->belongsTo('App\Models\Mark');
    }
}

我试图只得到我需要的邮票['Tesla','BMW']： 

public function index() {
    $models = CarModel::with(['mark' => function($query){
        $query->whereIn('name', ['Tesla','BMW']);
    }])->get();

    //$models = Mark::with('carmodel')->whereIn('name', ['Tesla','BMW'])->get();// та же ошибка

    return view('admin.cars',[
        'models' => $models,
    ]);
}

看法 

@if(count($models))
    @foreach($models as $model)
        {{ $model->mark->name }}
    @endforeach
@endif

结果，出现错误：
Trying to get property 'name' of non-object (View:
生成以下请求
select * from marks where marks.id in (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15) and name in ('Tesla', 'BMW')
：与模型::与？

php
Martin Hope
word
Asked: 2020-05-10 22:49:16 +0800 CST
  • 0

在“计算机公司”数据库中解决站点https://www.sql-ex.ru/上的一项 sql 任务时，解决方案是使用case when.
我想知道为什么给定的条件不起作用，即 解决方案没有通过附加基地的测试？ 

select p.maker,case when max(case when t.price is null then 0 else 1 end)=1 then max(t.price) end as m_price from product p...`

虽然结果是正确的，
而且这个解决方案是正确的： 

select p.maker,case when max(case when t.price is null then 1 else 0 end)=0 then max(t.price) end as m_price from product p...

那些。区别就在这里：
case when max(case when t.price is null then 0 else 1 end)=1 then max(t.price) end
case when max(case when t.price is null then 1 else 0 end)=0 then max(t.price) end -第二个条件是正确的结果，
因为理论上 1 和 0 在条件中的位置并不重要then и else？
还是我需要展示整个任务？

sql
Martin Hope
word
Asked: 2020-04-16 20:07:44 +0800 CST
  • 2

如何使块成为屏幕的整个宽度，而这个块位于父容器内，它有自己的填充，即 父块不是全屏宽度。
试图这样做，但有些东西无法正确计算“调整大小”。

https://jsfiddle.net/pke8L4sn/ 

var w = $(window).width();
var $fullWidth = $('.custom_full_width');
function set_full_width($fullWidth){
  $fullWidth.each(function(i,el){
    var $row = $(el);
    var offsetLeft = $row.offset().left;
    $row.css({
      transform: 'translateX('+ -offsetLeft+'px)',
      width: w
    })
  });
}
set_full_width($fullWidth);
$(window).on('resize', function(){
  $fullWidth.length && set_full_width($fullWidth);
});
.parent{
  padding: 30px;
  width: 80%;
  margin:0 auto;
}
.container{
  width: 100%;
  margin:0 auto;
  height: 400px;
  border:1px solid #000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="parent">
  <div class="container custom_full_width">content</div>
</div>
PS
如何使嵌套块成为屏幕的全宽？ https://jsfiddle.net/qmvtk40u/

css
Martin Hope
word
Asked: 2020-04-15 18:15:08 +0800 CST
  • 0

WordPress 主题在构造函数中使用了一个类，其中配置了钩子add_action,remove_action。
类中的这些钩子配置如下： 

add_action( 'woocommerce_before_main_content', array( $this, 'wrapper_start' ), 10 );
add_action( 'woocommerce_after_main_content', array( $this, 'wrapper_end' ), 10 );
add_filter('single_product_archive_thumbnail_size', array( $this, 'modify_product_thumbnail_size') );

我正在尝试像这样重新定义： 

function theme_change_actions() {
    remove_action('woocommerce_single_product_summary', array( 'Theme_WooCommerce', 'add_next_prev_product_to_single' ), 4);
}
add_action( 'init', 'theme_change_actions' );

但没有任何效果。Theme_WooCommerce是相关类的名称。
有没有办法在子主题中覆盖这些钩子？

php
Martin Hope
word
Asked: 2020-04-14 17:34:57 +0800 CST
  • 2

图标有一个svg代码，需要横向复制一份。
我怎样才能做到这一点？现在，当您在屏幕上打开图标时，没有图标。
那些。我对通过svg标签的方法感兴趣，例如使用标签use xlink:href 

<svg xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" width="120" height="24" viewBox="60 0 24 24" >
<style type="text/css">
	.st0{fill:#000000;}
</style>
<defs>
<path id="star" class="st0" d="M800,318.1C624.6,318.1,481.9,175.4,481.9,0h-30.4H348.5h-30.4c0,175.4-142.7,318.1-318.1,318.1v30.4
	c0,0,0,0,0,0v133.3c175.4,0,318.1,142.7,318.1,318.1h30.4h102.9h30.4c0-175.4,142.7-318.1,318.1-318.1v-30.4c0,0,0,0,0,0V318.1z
	 M400,590.8C357.3,509.5,290.5,442.7,209.2,400c81.3-42.7,148.1-109.5,190.8-190.8c42.7,81.3,109.5,148.1,190.8,190.8
	C509.5,442.7,442.7,509.5,400,590.8z"/>
</defs>
<use  xlink:href="#star" x="10" y="0"  />
<use  xlink:href="#star" x="35" y="0"  />
</svg>

也如此处： 

<svg xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" width="120" height="24" viewBox="60 0 24 24" >
<style type="text/css">
.st0{fill:gold;}
</style>
<defs>
<path id="star" class="st0" d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z"/>
</defs>
<use  xlink:href="#star" x="10" y="0"  />
<use  xlink:href="#star" x="35" y="0"  />
<use  xlink:href="#star" x="60" y="0"  /> 
<use  xlink:href="#star" x="85" y="0"  />
<use  xlink:href="#star" x="110" y="0"  />
</svg>

PS
原创

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 23.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 800 800" style="enable-background:new 0 0 800 800;" xml:space="preserve">
<style type="text/css">
	.st0{fill:#000000;}
</style>
<g>
	<path class="st0" d="M496.2,800H303.8v-18c0-157.6-128.2-285.8-285.8-285.8H0V303.8h18c157.6,0,285.8-128.2,285.8-285.8V0h192.3v18
		c0,157.6,128.2,285.8,285.8,285.8h18v192.4h-18c-157.6,0-285.8,128.2-285.8,285.8V800z M339.4,764h121.3
		c9-163.1,140.2-294.3,303.3-303.3V339.4c-163.2-9-294.3-140.2-303.3-303.3H339.4c-9,163.2-140.2,294.3-303.3,303.3v121.3
		C199.2,469.7,330.3,600.8,339.4,764z M400,621.6l-15.9-30.4c-39.4-75.3-100-135.8-175.2-175.2l-30.5-16l30.5-16
		c75.2-39.3,135.8-99.9,175.2-175.2l15.9-30.5l16,30.5c39.4,75.2,100,135.8,175.2,175.2l30.5,16l-30.5,16
		c-75.2,39.4-135.8,100-175.2,175.2L400,621.6z M253.6,400c59.7,36.8,109.5,86.7,146.4,146.4c36.8-59.7,86.7-109.6,146.4-146.4
		c-59.7-36.8-109.6-86.7-146.4-146.4C363.1,313.3,313.3,363.2,253.6,400z"/>
</g>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" width="150" height="24" viewBox="60 0 24 24">
<style type="text/css">
	.st1{fill:#000000;}
</style>
<defs>
<g>
<path id="star" class="st1"  d="M496.2,800H303.8v-18c0-157.6-128.2-285.8-285.8-285.8H0V303.8h18c157.6,0,285.8-128.2,285.8-285.8V0h192.3v18
		c0,157.6,128.2,285.8,285.8,285.8h18v192.4h-18c-157.6,0-285.8,128.2-285.8,285.8V800z M339.4,764h121.3
		c9-163.1,140.2-294.3,303.3-303.3V339.4c-163.2-9-294.3-140.2-303.3-303.3H339.4c-9,163.2-140.2,294.3-303.3,303.3v121.3
		C199.2,469.7,330.3,600.8,339.4,764z M400,621.6l-15.9-30.4c-39.4-75.3-100-135.8-175.2-175.2l-30.5-16l30.5-16
		c75.2-39.3,135.8-99.9,175.2-175.2l15.9-30.5l16,30.5c39.4,75.2,100,135.8,175.2,175.2l30.5,16l-30.5,16
		c-75.2,39.4-135.8,100-175.2,175.2L400,621.6z M253.6,400c59.7,36.8,109.5,86.7,146.4,146.4c36.8-59.7,86.7-109.6,146.4-146.4
		c-59.7-36.8-109.6-86.7-146.4-146.4C363.1,313.3,313.3,363.2,253.6,400z"/>
</g>
</defs>
<use  xlink:href="#star" x="0" y="0"  />
<use  xlink:href="#star" x="30" y="0"  />
<use  xlink:href="#star" x="60" y="0"  />
<use  xlink:href="#star" x="90" y="0"  />
<use  xlink:href="#star" x="120" y="0"  />
</svg>

css
Martin Hope
word
Asked: 2020-04-14 16:50:16 +0800 CST
  • 0

css滚动时，使用-property隐藏文本transform:translateX(-100%)（您也可以使用其他方法）。
向下滚动时，文本离开，向上滚动时，文本返回是必要的。
事实证明，您需要将文本的位置绑定到滚动条。
告诉我怎么做对吗？ 

$(window).scroll(function(e){
	var offsetTop = $(window).scrollTop()
  console.log('offsetTop - '+offsetTop);
})
$('span').waypoint({
  handler: function(direction) {
    var $el = $(this.element);
    $el.addClass('visibled');
    console.log('direction '+direction);
    
  },
  offset: '90%'
})
section{
  height: 400px;
  border:1px solid;
}
span{
  transform:translateX(-100%);
  display:inline-block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<section class="section1">section1</section>
<section class="section2"><span>section2</span></section>
<section class="section3"><span>section3</span></section>
<section class="section4"><span>section4</span></section>
<section class="section5"><span>section5</span></section>

https://jsfiddle.net/0zqmLdb1/2/

jquery
Martin Hope
word
Asked: 2020-04-14 15:22:32 +0800 CST
  • 2

有一个star svg来显示评分，我们需要水平重复几次。
这样您就可以使用 css 调整星星之间的间距。
如何复制到具有某些缩进的水平线 svg？

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<style type="text/css">
.st0{fill:#ffff00;}
</style>
<path class="st0" d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z"/>
</svg>
或者至少告诉我如何设置标签中的缩进，path以便您可以复制标签path并放置所需的缩进？
也许有必要应用另一个svg，你能告诉我如何连续水平复制svg吗？

css
Martin Hope
word
Asked: 2020-04-13 15:33:28 +0800 CST
  • 3

如何制作从一个点向不同方向发散的线条动画:hover？
我有一个解决方案，但在这里您可以在中心看到该线如何位于另一条线之上

https://jsfiddle.net/ws1nfmo6/

.line{
  display: inline-block;
  width: 200px;
  height: 10px;
  border:1px solid #000;
  position: relative;
  padding: 10px;
}
.line::before,
.line::after{
    content:'';
    width: 0;
    height: 2px;
    background: #FA7268;
    position: absolute;
    top: 50%;
    left: 50%;
    opacity: .6;
    display: block;
    transition:1s;
}
.line:hover::after{
    width: 50%;
}
.line:hover::before{
    width: 50%;
    transform: translateX(-100%);
}
<div class="line"></div>

html